code review

src/components/Article/Comment.module.scss

@@ -37,6 +37,7 @@
       display: none;
     }
   }
+
   .shout-body {
     @include font-size(1.5rem);
     margin-bottom: 1em;
@@ -44,11 +45,13 @@
       margin-bottom: 0;
     }
   }
+
   .author {
     align-items: center;
     margin-bottom: 1.4rem;
   }
 }
+
 .commentContent {
   &:hover {
     .commentControlReply,
@@ -60,11 +63,13 @@
     }
   }
 }
+
 .commentControls {
   @include font-size(1.2rem);
 
   margin-bottom: 0.5em;
 }
+
 .commentControlReply,
 .commentControlShare,
 .commentControlDelete,
@@ -75,6 +80,7 @@
     transition: opacity 0.3s;
   }
 }
+
 .commentControlReply,
 .commentControlShare,
 .commentControlDelete,
@@ -84,6 +90,7 @@
     width: 1.2rem;
   }
 }
+
 .commentControl {
   border: none;
   color: #696969;
@@ -94,6 +101,7 @@
   padding: 0.2em 0.3em;
   transition: opacity 0.2s, color 0.3s, background-color 0.3s;
   vertical-align: top;
+
   &:hover {
     background: #000;
     color: #fff;
@@ -102,6 +110,7 @@
       opacity: 1;
     }
   }
+
   .icon {
     filter: invert(0);
     margin-right: 0.3em;
@@ -112,12 +121,14 @@
     }
   }
 }
+
 .commentControlReply {
   .icon {
     height: 1.2em;
     width: 1.2em;
   }
 }
+
 .commentBody {
   @include font-size(1.5rem);
 
@@ -137,16 +148,19 @@
     }
   }
 }
+
 .commentAuthor,
 .commentDate,
 .commentRating {
   @include font-size(1.2rem);
 }
+
 .articleAuthor {
   color: #2638d9;
   font-size: 12px;
   margin-right: 12px;
 }
+
 .commentDate {
   color: rgb(0 0 0 / 30%);
   flex: 1;
@@ -154,33 +168,41 @@
     margin-left: 1rem;
   }
 }
+
 .commentDetails {
   display: flex;
   margin-bottom: 1.2rem;
 }
+
 .commentRating {
   align-items: center;
   display: flex;
   font-weight: bold;
 }
+
 .commentRatingValue {
   padding: 0 0.3em;
 }
+
 .commentRatingPositive {
   color: #2bb452;
 }
+
 .commentRatingNegative {
   color: #d00820;
 }
+
 .commentRatingControl {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   height: 0;
   width: 0;
 }
+
 .commentRatingControlUp {
   border-bottom: 8px solid rgb(0 0 0 / 40%);
 }
+
 .commentRatingControlDown {
   border-top: 8px solid rgb(0 0 0 / 40%);
 }

src/components/Feed/Card.tsx

@@ -1,5 +1,5 @@
 import { t } from '../../utils/intl'
-import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
 import type { Shout } from '../../graphql/types.gen'
 import { capitalize } from '../../utils'
 import { translit } from '../../utils/ru2en'
@@ -72,7 +72,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { title, subtitle } = getTitleAndSubtitle(props.article)
 
-  const { cover, layout, slug, authors, stat } = props.article
+  const { cover, layout, slug, authors, stat, body } = props.article
 
   return (
     <section
@@ -195,9 +195,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
               <div class={styles.shoutCardDetailsItem}>
                 <SharePopup
                   containerCssClass={stylesHeader.control}
-                  title={props.article['title']}
+                  title={title}
-                  description={getDescription(props.article['body'])}
+                  description={getDescription(body)}
-                  imageUrl={props.article['cover']}
+                  imageUrl={cover}
                   shareUrl={getShareUrl({ pathname: `/${slug}` })}
                   trigger={
                     <button>
@@ -210,9 +210,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
               <div class={styles.shoutCardDetailsItem}>
                 <FeedArticlePopup
                   containerCssClass={stylesHeader.control}
-                  title={props.article['title']}
+                  title={title}
-                  description={getDescription(props.article['body'])}
+                  description={getDescription(body)}
-                  imageUrl={props.article['cover']}
+                  imageUrl={cover}
                   shareUrl={getShareUrl({ pathname: `/${slug}` })}
                   trigger={
                     <button>

src/components/Feed/FeedArticlePopup.tsx

@@ -1,6 +1,7 @@
 import styles from './FeedArticlePopup.module.scss'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
+import { t } from '../../utils/intl'
 
 type FeedArticlePopupProps = {
   title: string
@@ -20,38 +21,73 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
     <Popup {...props} variant="tiny" popupCssClass={styles.feedArticlePopup}>
       <ul class="nodash">
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Поделиться
+            role="button"
+            onClick={() => {
+              alert('Share')
+            }}
+          >
+            {t('Share')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Помочь редактировать
+            role="button"
+            onClick={() => {
+              alert('Help to edit')
+            }}
+          >
+            {t('Help to edit')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Пригласить экспертов
+            role="button"
+            onClick={() => {
+              alert('Invite experts')
+            }}
+          >
+            {t('Invite experts')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Подписаться на комментарии
+            role="button"
+            onClick={() => {
+              alert('Subscribe to comments')
+            }}
+          >
+            {t('Subscribe to comments')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Добавить в закладки
+            role="button"
+            onClick={() => {
+              alert('Add to bookmarks')
+            }}
+          >
+            {t('Add to bookmarks')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Пожаловаться
+            role="button"
+            onClick={() => {
+              alert('Report')
+            }}
+          >
+            {t('Report')}
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => {}}>
+          <button
-            Получать уведомления
+            role="button"
+            onClick={() => {
+              alert('Get notifications')
+            }}
+          >
+            {t('Get notifications')}
           </button>
         </li>
       </ul>

src/components/_shared/Button/Button.module.scss

@@ -8,9 +8,11 @@
   &.primary {
     background: #000;
     color: #fff;
+
     &:hover {
       color: #ccc;
     }
+
     &:active {
       color: #9fa1a7;
     }
@@ -19,9 +21,11 @@
   &.secondary {
     background: #f7f7f7;
     color: #141414;
+
     &:hover {
       background: #e8e8e8;
     }
+
     &:active {
       background: #ccc;
     }
@@ -33,6 +37,7 @@
     color: #9fa1a7;
     background: #f6f6f6;
   }
+
   &.loading,
   &.loading:hover {
     background: #f6f6f6;

src/locales/ru.json

@@ -222,5 +222,9 @@
   "Write a comment...": "Написать комментарий...",
   "Add comment": "Комментировать",
   "My subscriptions": "Подписки",
-  "Nothing here yet": "Здесь пока ничего нет"
+  "Nothing here yet": "Здесь пока ничего нет",
+  "Invite experts": "Пригласить экспертов",
+  "Subscribe to comments": "Подписаться на комментарии",
+  "Add to bookmarks": "Добавить в закладки",
+  "Get notifications": "Получать уведомления"
 }