From 2d4e4827c762d87e2b1d745a1590d5b788a500f5 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 11 Mar 2023 17:07:47 +0600
Subject: [PATCH] notifications: changed appearance for comment notifications

---
 .../NotificationComment/index.tsx             | 43 +++++++++++++++
 .../NotificationComment/styles.module.scss    | 52 +++++++++++++++++++
 .../notifications/NotificationList/index.tsx  |  4 +-
 .../profile/ProfileSidebarMenu/index.tsx      |  8 +--
 src/styles/_mixins.scss                       |  8 +++
 5 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/notifications/NotificationComment/index.tsx
 create mode 100644 src/components/notifications/NotificationComment/styles.module.scss

diff --git a/src/components/notifications/NotificationComment/index.tsx b/src/components/notifications/NotificationComment/index.tsx
new file mode 100644
index 00000000..2f7c1b42
--- /dev/null
+++ b/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 };
diff --git a/src/components/notifications/NotificationComment/styles.module.scss b/src/components/notifications/NotificationComment/styles.module.scss
new file mode 100644
index 00000000..6d57a501
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index cd38bd74..f2860246 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/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>
diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx
index a61962d1..368e3174 100644
--- a/src/containers/profile/ProfileSidebarMenu/index.tsx
+++ b/src/containers/profile/ProfileSidebarMenu/index.tsx
@@ -45,9 +45,11 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
               Настройки
             </VerticalMenu.Item>
 
-            <VerticalMenu.Item onClick={() => setActiveTab(1)}>
-              Уведомления
-            </VerticalMenu.Item>
+            <Superpower>
+              <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+                Уведомления
+              </VerticalMenu.Item>
+            </Superpower>
 
             <VerticalMenu.Item onClick={() => setActiveTab(2)}>
               Заметки
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 905c471c..2a0f4a84 100644
--- a/src/styles/_mixins.scss
+++ b/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;
+}