Comments improvements & bugfix (#277)

* Mobile header Subscribe

* Comments improvements & bugfix

src/components/Article/Comment/Comment.module.scss

@@ -1,10 +1,14 @@
 .comment {
   margin: 0 0 0.5em;
-  padding: 1rem;
+  padding: 0 1rem;
   transition: background-color 0.3s;
   position: relative;
   list-style: none;
 
+  & .comment {
+    margin-right: -1rem;
+  }
+
   &.isNew {
     border-radius: 6px;
     background: rgb(38 56 217 / 5%);
@@ -18,7 +22,7 @@
     &::before,
     &::after {
       content: '';
-      left: 0;
+      left: -14px;
       position: absolute;
     }
 
@@ -26,9 +30,9 @@
       border-bottom: 2px solid #ccc;
       border-left: 2px solid #ccc;
       border-radius: 0 0 0 1.2rem;
-      top: -1rem;
-      height: 2.4rem;
-      width: 1.2rem;
+      top: -24px;
+      height: 50px;
+      width: 12px;
     }
 
     &::after {
@@ -57,6 +61,14 @@
     align-items: center;
     margin-bottom: 1.4rem;
   }
+
+  .commentControl:not(.commentControlReply) {
+    opacity: 0;
+  }
+
+  &:hover .commentControl {
+    opacity: 1;
+  }
 }
 
 .commentContent {
@@ -71,12 +83,6 @@
   }
 }
 
-.commentControls {
-  @include font-size(1.2rem);
-
-  margin-bottom: 0.5em;
-}
-
 .commentControlReply,
 .commentControlShare,
 .commentControlDelete,
@@ -104,7 +110,7 @@
 
 .commentControl {
   border: none;
-  color: #696969;
+  color: var(--secondary-color);
   cursor: pointer;
   display: inline-flex;
   line-height: 1.2;
@@ -117,8 +123,8 @@
   vertical-align: top;
 
   &:hover {
-    background: #000;
-    color: #fff;
+    background: var(--background-color-invert);
+    color: var(--default-color-invert);
 
     .icon {
       filter: invert(1);
@@ -173,9 +179,10 @@
 }
 
 .articleAuthor {
-  color: #2638d9;
-  font-size: 12px;
-  margin-right: 12px;
+  @include font-size(1.2rem);
+
+  color: var(--blue-500);
+  margin: 0.3rem 1rem 0;
 }
 
 .articleLink {

src/components/Article/Comment/Comment.tsx

@@ -2,26 +2,26 @@ import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
 import { clsx } from 'clsx'
 import { getPagePath } from '@nanostores/router'
 
-import MD from './MD'
-import { Userpic } from '../Author/Userpic'
-import { CommentRatingControl } from './CommentRatingControl'
-import { CommentDate } from './CommentDate'
-import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
-import { Icon } from '../_shared/Icon'
+import MD from '../MD'
+import { Userpic } from '../../Author/Userpic'
+import { CommentRatingControl } from '../CommentRatingControl'
+import { CommentDate } from '../CommentDate'
+import { ShowIfAuthenticated } from '../../_shared/ShowIfAuthenticated'
+import { Icon } from '../../_shared/Icon'
 
-import { useSession } from '../../context/session'
-import { useLocalize } from '../../context/localize'
-import { useReactions } from '../../context/reactions'
-import { useSnackbar } from '../../context/snackbar'
-import { useConfirm } from '../../context/confirm'
+import { useSession } from '../../../context/session'
+import { useLocalize } from '../../../context/localize'
+import { useReactions } from '../../../context/reactions'
+import { useSnackbar } from '../../../context/snackbar'
+import { useConfirm } from '../../../context/confirm'
 
-import { Author, Reaction, ReactionKind } from '../../graphql/types.gen'
-import { router } from '../../stores/router'
+import { Author, Reaction, ReactionKind } from '../../../graphql/types.gen'
+import { router } from '../../../stores/router'
 
 import styles from './Comment.module.scss'
-import { AuthorLink } from '../Author/AhtorLink'
+import { AuthorLink } from '../../Author/AhtorLink'
 
-const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor'))
+const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
 
 type Props = {
   comment: Reaction
@@ -166,9 +166,7 @@ export const Comment = (props: Props) => {
                   </a>
                 </div>
               </Show>
-
-              <CommentDate comment={comment()} isShort={true} />
-
+              <CommentDate showOnHover={true} comment={comment()} isShort={true} />
               <CommentRatingControl comment={comment()} />
             </div>
           </Show>
@@ -183,6 +181,7 @@ export const Comment = (props: Props) => {
                   placeholder={t('Write a comment...')}
                   onSubmit={(value) => handleUpdate(value)}
                   submitByCtrlEnter={true}
+                  onCancel={() => setEditMode(false)}
                   setClear={clearEditor()}
                 />
               </Suspense>
@@ -190,7 +189,7 @@ export const Comment = (props: Props) => {
           </div>
 
           <Show when={!props.compact}>
-            <div class={styles.commentControls}>
+            <div>
               <ShowIfAuthenticated>
                 <button
                   disabled={loading()}

src/components/Article/Comment/index.ts

@@ -0,0 +1 @@
+export { Comment } from './Comment'

src/components/Article/CommentDate/CommentDate.module.scss

@@ -15,6 +15,7 @@
   .date {
     font-weight: 500;
     margin-right: 1rem;
+    position: relative;
 
     .icon {
       line-height: 1;
@@ -25,6 +26,26 @@
       vertical-align: middle;
     }
   }
+
+  &.showOnHover {
+    .text {
+      position: absolute;
+      left: 1.5rem;
+      top: 0.2rem;
+      opacity: 0;
+      white-space: nowrap;
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    .icon {
+      cursor: pointer;
+
+      &:hover + .text {
+        opacity: 1;
+        left: 1.5rem;
+      }
+    }
+  }
 }
 
 .commentDatesLastInRow {

src/components/Article/CommentDate/CommentDate.tsx

@@ -1,7 +1,7 @@
 import { Show } from 'solid-js'
-import { Icon } from '../_shared/Icon'
-import type { Reaction } from '../../graphql/types.gen'
-import { useLocalize } from '../../context/localize'
+import { Icon } from '../../_shared/Icon'
+import type { Reaction } from '../../../graphql/types.gen'
+import { useLocalize } from '../../../context/localize'
 import { clsx } from 'clsx'
 import styles from './CommentDate.module.scss'
 
@@ -9,6 +9,7 @@ type Props = {
   comment: Reaction
   isShort?: boolean
   isLastInRow?: boolean
+  showOnHover?: boolean
 }
 
 export const CommentDate = (props: Props) => {
@@ -23,12 +24,19 @@ export const CommentDate = (props: Props) => {
   }
 
   return (
-    <div class={clsx(styles.commentDates, { [styles.commentDatesLastInRow]: props.isLastInRow })}>
+    <div
+      class={clsx(styles.commentDates, {
+        [styles.commentDatesLastInRow]: props.isLastInRow,
+        [styles.showOnHover]: props.showOnHover
+      })}
+    >
       <time class={styles.date}>{formattedDate(props.comment.createdAt)}</time>
       <Show when={props.comment.updatedAt}>
         <time class={styles.date}>
           <Icon name="edit" class={styles.icon} />
-          {t('Edited')} {formattedDate(props.comment.updatedAt)}
+          <span class={styles.text}>
+            {t('Edited')} {formattedDate(props.comment.updatedAt)}
+          </span>
         </time>
       </Show>
     </div>

src/components/Article/CommentDate/index.ts

@@ -0,0 +1 @@
+export { CommentDate } from './CommentDate'

src/components/_shared/Subscribe/Subscribe.tsx

@@ -94,7 +94,13 @@ export const Subscribe = (props: Props) => {
           }
         >
           <div class="pretty-form__item">
-            <input type="email" placeholder={t('Your email')} id="subscription-email" />
+            <input
+              value={email()}
+              onInput={handleInput}
+              type="email"
+              placeholder={t('Your email')}
+              id="subscription-email"
+            />
             <label for="subscription-email">{t('Your email')}</label>
             <button type="submit" class={styles.mobileSubscriptionSubmit}>
               <Icon name="arrow-right" />