notifications: changed appearance for comment notifications

src/components/notifications/NotificationComment/index.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+
+import { Anchor } from '~/components/common/Anchor';
+import { InlineUsername } from '~/components/common/InlineUsername';
+import { Square } from '~/components/common/Square';
+import { NotificationItem } from '~/types/notifications';
+import { formatText, getPrettyDate, getURLFromString } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NotificationCommentProps {
+  item: NotificationItem;
+}
+
+const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
+  <Anchor href={item.url} className={styles.link}>
+    <div className={styles.message}>
+      <div className={styles.icon}>
+        <Square
+          image={getURLFromString(item.user.photo, 'avatar')}
+          className={styles.circle}
+        />
+      </div>
+
+      <div className={styles.content}>
+        <b className={styles.title}>
+          <span>
+            <InlineUsername>{item.user.username}</InlineUsername>:
+          </span>
+        </b>
+        <div className={styles.text}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: formatText(item.text),
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  </Anchor>
+);
+
+export { NotificationComment };

src/components/notifications/NotificationComment/styles.module.scss

@@ -0,0 +1,52 @@
+@import 'src/styles/variables';
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.message {
+  font: $font_14_regular;
+  line-height: 1.3em;
+  padding: $gap/2 $gap/2 $gap/4 $gap/2;
+  min-height: calc(1.3em * 3 + $gap);
+  display: grid;
+  grid-template-columns: 40px auto;
+  column-gap: 0;
+}
+
+.content {
+  background: $content_bg;
+  padding: 5px;
+  border-radius: 0 4px 4px 4px;
+  position: relative;
+
+  &:before {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: 100%;
+    @include arrow_left(10px, $content_bg);
+  }
+}
+
+.text {
+  @include clamp(2, 14px);
+  text-overflow: ellipsis;
+}
+
+.title {
+  font: $font_14_semibold;
+  margin-bottom: $gap / 2;
+}
+
+.time {
+  font: $font_10_regular;
+  text-align: right;
+  margin-top: 2px;
+  color: $gray_75;
+}
+
+.circle {
+  border-radius: 4px 0 0 4px;
+}

src/containers/notifications/NotificationList/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { NotificationBadge } from '~/components/notifications/NotificationBadge';
+import { NotificationComment } from '~/components/notifications/NotificationComment';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
 
 import styles from './styles.module.scss';
@@ -22,7 +22,7 @@ const NotificationList: FC<NotificationListProps> = () => {
         <div className={styles.items}>
           {items?.map((item) => (
             <div className={styles.item} key={item.created_at}>
-              <NotificationBadge item={item} />
+              <NotificationComment item={item} />
             </div>
           ))}
         </div>

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -45,9 +45,11 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
               Настройки
             </VerticalMenu.Item>
 
-            <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+            <Superpower>
-              Уведомления
+              <VerticalMenu.Item onClick={() => setActiveTab(1)}>
-            </VerticalMenu.Item>
+                Уведомления
+              </VerticalMenu.Item>
+            </Superpower>
 
             <VerticalMenu.Item onClick={() => setActiveTab(2)}>
               Заметки

src/styles/_mixins.scss

@@ -297,3 +297,11 @@
     right: -10px;
   }
 }
+
+@mixin arrow_left($size: 50, $color: $content_bg) {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: $size $size $size 0;
+  border-color: transparent $color transparent transparent;
+}