Comments decorations

src/components/Article/Comment.module.scss

@@ -1,18 +1,40 @@
 .comment {
   background-color: #fff;
-  margin: 0 -2.4rem 1.5em;
+  margin: 0 -2.4rem 0.5em;
   padding: 0.8rem 2.4rem;
   transition: background-color 0.3s;
+  position: relative;
 
-  &:hover {
-    background-color: #f6f6f6;
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    .commentControlReply,
-    .commentControlShare,
-    .commentControlDelete,
-    .commentControlEdit,
-    .commentControlComplain {
-      opacity: 1;
+  .comment {
+    &:before,
+    &:after {
+      content: '';
+      left: 0;
+      position: absolute;
+    }
+
+    &:before {
+      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;
+    }
+
+    &:after {
+      background: #ccc;
+      height: 100%;
+      top: 0;
+      width: 2px;
+    }
+
+    &:last-child:after {
+      display: none;
     }
   }
 
@@ -32,6 +54,18 @@
   }
 }
 
+.commentContent {
+  &:hover {
+    .commentControlReply,
+    .commentControlShare,
+    .commentControlDelete,
+    .commentControlEdit,
+    .commentControlComplain {
+      opacity: 1;
+    }
+  }
+}
+
 .commentControls {
   @include font-size(1.2rem);
   margin-bottom: 0.5em;

src/components/Article/Comment.tsx

@@ -135,7 +135,7 @@ export default (props: {
                 <textarea name="reply" id="reply" rows="5" />
                 <div class={styles.replyFormControls}>
                   <button class="button button--light" onClick={() => setIsReplyVisible(false)}>
-                    {t('Cancel')}
+                    {t('cancel')}
                   </button>
                   <button class="button">{t('Send')}</button>
                 </div>

src/components/Article/CommentsTree.tsx

@@ -102,7 +102,7 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
           </ul>
         </div>
 
-        <ul>
+        <ul class={styles.comments}>
           <For each={nestComments(reactions().reverse())}>
             {(reaction: NestedReaction) => (
               <Comment

src/locales/ru.json

@@ -184,11 +184,11 @@
   "discussion": "дискурс",
   "Personal": "Личные",
   "Groups": "Группы",
-  "All": "Все",
   "create_chat": "Создать чат",
   "create_group": "Создать группу",
   "discourse_theme": "Тема дискурса",
   "cancel": "Отмена",
+  "Send": "Отправить",
   "group_chat": "Общий чат",
   "Profile settings": "Настройки профиля",
   "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.",

src/styles/Article.module.scss

@@ -251,6 +251,20 @@ img {
   }
 }
 
+.comments {
+  margin: 0;
+
+  &,
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  ul {
+    margin: 1em 0 0 2.4rem;
+  }
+}
+
 .commentsHeaderWrapper {
   display: flex;
   justify-content: space-between;