From a385d89dfd6312f2255d1343cea3f63375ce5b39 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 7 Jan 2022 16:34:55 +0100
Subject: chore: improve comment section

I also adjust styles for all forms and primary buttons.
---
 src/components/CommentsList/CommentsList.module.scss | 9 +++++++++
 src/components/CommentsList/CommentsList.tsx         | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'src/components/CommentsList')

diff --git a/src/components/CommentsList/CommentsList.module.scss b/src/components/CommentsList/CommentsList.module.scss
index 2358948..4971b15 100644
--- a/src/components/CommentsList/CommentsList.module.scss
+++ b/src/components/CommentsList/CommentsList.module.scss
@@ -1,5 +1,14 @@
 @use "@styles/abstracts/placeholders";
 
+.title,
+.no-comments {
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .list {
   @extend %reset-ordered-list;
+
+  margin-bottom: var(--spacing-lg);
 }
diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
index 6599475..3a1c57e 100644
--- a/src/components/CommentsList/CommentsList.tsx
+++ b/src/components/CommentsList/CommentsList.tsx
@@ -12,10 +12,11 @@ const CommentsList = ({ comments }: { comments: CommentData[] }) => {
 
   return (
     <>
+      <h2 className={styles.title}>{t`Comments`}</h2>
       {comments.length > 0 ? (
         <ol className={styles.list}>{getCommentsList()}</ol>
       ) : (
-        <p>{t`No comments yet.`}</p>
+        <p className={styles['no-comments']}>{t`No comments yet.`}</p>
       )}
     </>
   );
-- 
cgit v1.2.3