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/Buttons/Buttons.module.scss         | 26 ++++--
 src/components/Comment/Comment.module.scss         | 22 +++--
 src/components/Comment/Comment.tsx                 |  8 +-
 src/components/CommentForm/CommentForm.module.scss | 12 +++
 src/components/CommentForm/CommentForm.tsx         | 96 ++++++++++++----------
 .../CommentsList/CommentsList.module.scss          |  9 ++
 src/components/CommentsList/CommentsList.tsx       |  3 +-
 src/components/Form/Form.module.scss               | 23 +++++-
 src/components/Form/Input/Input.tsx                |  2 +-
 src/components/Form/TextArea/TextArea.tsx          |  2 +-
 src/pages/article/[slug].tsx                       |  2 -
 11 files changed, 136 insertions(+), 69 deletions(-)
 create mode 100644 src/components/CommentForm/CommentForm.module.scss

(limited to 'src')

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 1a0d73a..ea85c9b 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -7,14 +7,19 @@
 }
 
 .primary {
-  padding: var(--spacing-xs) var(--spacing-md);
+  margin: auto;
+  padding: var(--spacing-2xs) var(--spacing-md);
   background: var(--color-primary);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark);
+  border: fun.convert-px(2) solid var(--color-bg);
+  border-radius: fun.convert-px(5);
+  box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
+    0 0 0 fun.convert-px(3) var(--color-primary-darker),
+    fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
+      var(--color-primary-dark);
   color: var(--color-fg-inverted);
   font-weight: 600;
   text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
-  transition: all 0.3s ease-in-out 0s;
+  transition: all 0.25s ease-in-out 0s;
 
   &--left {
     margin-right: auto;
@@ -32,16 +37,20 @@
   &:hover,
   &:focus {
     background: var(--color-primary-light);
-    box-shadow: fun.convert-px(7) fun.convert-px(7) 0 0
-      var(--color-primary-dark);
+    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light),
+      0 0 0 fun.convert-px(3) var(--color-primary-darker),
+      fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2)
+        var(--color-primary-dark);
     transform: translateX(#{fun.convert-px(-4)})
       translateY(#{fun.convert-px(-4)});
   }
 
   &:active {
     background: var(--color-primary-dark);
-    box-shadow: 0 0 0 0 var(--color-primary-dark);
-    transform: translateX(#{fun.convert-px(3)}) translateY(#{fun.convert-px(3)});
+    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
+      0 0 0 fun.convert-px(3) var(--color-primary-darker),
+      0 0 0 0 var(--color-primary-dark);
+    transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)});
   }
 }
 
@@ -197,7 +206,6 @@
   position: absolute;
   top: 0;
   right: 0;
-  background: var(--color-bg);
   transition: all 0.6s ease-in 0s;
   backface-visibility: hidden;
 }
diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss
index 46c0249..a952f66 100644
--- a/src/components/Comment/Comment.module.scss
+++ b/src/components/Comment/Comment.module.scss
@@ -6,8 +6,10 @@
 }
 
 .wrapper {
+  background: var(--color-bg);
   border: fun.convert-px(1) solid var(--color-border-light);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light),
+  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
+      var(--color-shadow-lighter),
     fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
       var(--color-shadow-light);
   padding: var(--spacing-md);
@@ -38,24 +40,32 @@
 .avatar {
   width: fun.convert-px(85);
   height: fun.convert-px(85);
+  margin: 0 auto;
   border-radius: fun.convert-px(3);
-  box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light),
-    fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light);
+  box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-lighter),
+    fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1)
+      var(--color-shadow-light);
   position: relative;
+
+  img {
+    border-radius: fun.convert-px(3);
+  }
 }
 
 .author {
+  color: var(--color-primary-darker);
+  font-weight: 600;
   text-align: center;
 }
 
 .date {
   color: var(--color-fg-secondary);
   font-size: var(--font-size-sm);
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
+  display: flex;
+  flex-flow: row wrap;
   column-gap: var(--spacing-2xs);
   justify-content: center;
-  margin: var(--spacing-sm) 0 var(--spacing-md);
+  margin: var(--spacing-md) 0;
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
index 7214abe..6a4abce 100644
--- a/src/components/Comment/Comment.tsx
+++ b/src/components/Comment/Comment.tsx
@@ -44,7 +44,7 @@ const Comment = ({
   const getApprovedComment = () => {
     return (
       <>
-        <article className={styles.wrapper}>
+        <article className={styles.wrapper} id={`comment-${comment.commentId}`}>
           <header className={styles.header}>
             {comment.author.gravatarUrl && (
               <div className={styles.avatar}>
@@ -59,7 +59,11 @@ const Comment = ({
           </header>
           <dl className={styles.date}>
             <dt>{t`Published on:`}</dt>
-            <dd>{getLocaleDate()}</dd>
+            <dd>
+              <Link href={`#comment-${comment.commentId}`}>
+                <a>{getLocaleDate()}</a>
+              </Link>
+            </dd>
           </dl>
           <div
             className={styles.body}
diff --git a/src/components/CommentForm/CommentForm.module.scss b/src/components/CommentForm/CommentForm.module.scss
new file mode 100644
index 0000000..2330ca2
--- /dev/null
+++ b/src/components/CommentForm/CommentForm.module.scss
@@ -0,0 +1,12 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+  width: min(calc(100vw - (var(--spacing-md) * 2)), fun.convert-px(500));
+  margin: auto;
+}
+
+.title {
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index b2d538f..ea02306 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -4,6 +4,7 @@ import Notice from '@components/Notice/Notice';
 import { t } from '@lingui/macro';
 import { createComment } from '@services/graphql/mutations';
 import { useState } from 'react';
+import styles from './CommentForm.module.scss';
 
 const CommentForm = ({
   articleId,
@@ -57,51 +58,56 @@ const CommentForm = ({
   };
 
   return (
-    <Form submitHandler={submitHandler}>
-      <FormItem>
-        <Input
-          id="commenter-name"
-          name="commenter-name"
-          label={t`Name`}
-          required={true}
-          value={name}
-          setValue={setName}
-        />
-      </FormItem>
-      <FormItem>
-        <Input
-          id="commenter-email"
-          name="commenter-email"
-          label={t`Email`}
-          required={true}
-          value={email}
-          setValue={setEmail}
-        />
-      </FormItem>
-      <FormItem>
-        <Input
-          id="commenter-website"
-          name="commenter-website"
-          label={t`Website`}
-          value={website}
-          setValue={setWebsite}
-        />
-      </FormItem>
-      <FormItem>
-        <TextArea
-          id="commenter-message"
-          name="commenter-message"
-          label={t`Comment`}
-          value={message}
-          setValue={setMessage}
-          required={true}
-        />
-      </FormItem>
-      <ButtonSubmit>{t`Send`}</ButtonSubmit>
-      {isSuccess && !isApproved && (
-        <Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
-      )}
-    </Form>
+    <div className={styles.wrapper}>
+      <h2 className={styles.title}>{t`Leave a comment`}</h2>
+      <Form submitHandler={submitHandler}>
+        <FormItem>
+          <Input
+            id="commenter-name"
+            name="commenter-name"
+            label={t`Name`}
+            required={true}
+            value={name}
+            setValue={setName}
+          />
+        </FormItem>
+        <FormItem>
+          <Input
+            id="commenter-email"
+            name="commenter-email"
+            label={t`Email`}
+            required={true}
+            value={email}
+            setValue={setEmail}
+          />
+        </FormItem>
+        <FormItem>
+          <Input
+            id="commenter-website"
+            name="commenter-website"
+            label={t`Website`}
+            value={website}
+            setValue={setWebsite}
+          />
+        </FormItem>
+        <FormItem>
+          <TextArea
+            id="commenter-message"
+            name="commenter-message"
+            label={t`Comment`}
+            value={message}
+            setValue={setMessage}
+            required={true}
+          />
+        </FormItem>
+        <FormItem>
+          <ButtonSubmit>{t`Send`}</ButtonSubmit>
+        </FormItem>
+        {isSuccess && !isApproved && (
+          <Notice type="success">{t`Thanks for your comment! It is now awaiting moderation.`}</Notice>
+        )}
+      </Form>
+    </div>
   );
 };
 
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>
       )}
     </>
   );
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index bfb009e..fcf8d15 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -17,21 +17,40 @@
 
 .label {
   display: block;
+  color: var(--color-primary-darker);
   font-size: var(--font-size-sm);
   font-variant: small-caps;
   font-weight: 600;
 }
 
 .field {
-  border: fun.convert-px(1) solid var(--color-border);
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
+  background: var(--color-bg-tertiary);
+  border: fun.convert-px(2) solid var(--color-border-light);
+  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light);
+  transition: all 0.25s linear 0s;
+
+  &:hover {
+    box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
+      var(--color-shadow-light);
+    transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
+  }
 
   &:focus {
-    border-color: var(--color-primary);
+    background: var(--color-bg);
+    border-color: var(--color-primary-darker);
+    box-shadow: 0 0 0 0 var(--color-shadow);
+    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
+    outline: none;
+    transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
   }
 }
 
 .textarea {
   min-height: fun.convert-px(200);
 }
+
+.required {
+  color: var(--color-secondary);
+}
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 2ee214b..16cb854 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -32,7 +32,7 @@ const Input = (
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}
-          {required && <span> *</span>}
+          {required && <span className={styles.required}> *</span>}
         </label>
       )}
       <input
diff --git a/src/components/Form/TextArea/TextArea.tsx b/src/components/Form/TextArea/TextArea.tsx
index 729ef6d..e1e7e0f 100644
--- a/src/components/Form/TextArea/TextArea.tsx
+++ b/src/components/Form/TextArea/TextArea.tsx
@@ -25,7 +25,7 @@ const TextArea = ({
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}
-          {required && <span> *</span>}
+          {required && <span className={styles.required}> *</span>}
         </label>
       )}
       <textarea
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index e906d12..889af43 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -72,9 +72,7 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
           <Sharing title={title} excerpt={intro} />
         </aside>
         <section className={styles.comments}>
-          <h2>{t`Comments`}</h2>
           <CommentsList comments={comments} />
-          <h2>{t`Leave a comment`}</h2>
           <CommentForm articleId={post.databaseId} />
         </section>
       </article>
-- 
cgit v1.2.3