notifications: added profile indicator

src/components/common/Avatar/index.tsx

@@ -14,22 +14,37 @@ interface Props extends DivProps {
   url?: string;
   username?: string;
   size?: number;
+  hasUpdates?: boolean;
   preset?: typeof imagePresets[keyof typeof imagePresets];
 }
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
   (
-    { url, username, size, className, preset = imagePresets.avatar, ...rest },
+    {
+      url,
+      username,
+      size,
+      className,
+      preset = imagePresets.avatar,
+      hasUpdates,
+      ...rest
+    },
     ref,
   ) => {
     return (
-      <Square
+      <div
         {...rest}
-        image={getURLFromString(url, preset) || '/images/john_doe.svg'}
-        className={classNames(styles.avatar, className)}
-        size={size}
-        ref={ref}
-      />
+        className={classNames(styles.container, {
+          [styles.has_dot]: hasUpdates,
+        })}
+      >
+        <Square
+          image={getURLFromString(url, preset) || '/images/john_doe.svg'}
+          className={classNames(styles.avatar, className)}
+          size={size}
+          ref={ref}
+        />
+      </div>
     );
   },
 );

src/components/common/Avatar/styles.module.scss

@@ -1,5 +1,20 @@
 @import 'src/styles/variables';
 
+.container {
+  &.has_dot::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: $color_danger;
+    z-index: 1;
+    box-shadow: $content_bg 0 0 0 2px;
+  }
+}
+
 .avatar {
   @include outer_shadow;
 
@@ -12,6 +27,7 @@
   background-position: center;
   background-size: cover;
   cursor: pointer;
+  position: relative;
 
   img {
     object-fit: cover;

src/components/main/UserButton/index.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
 import { Group } from '~/components/containers/Group';
-import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -12,15 +11,21 @@ import styles from './styles.module.scss';
 interface IProps {
   username: string;
   photo?: IFile;
+  hasUpdates?: boolean;
+
   onClick?: () => void;
 }
 
-const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
+const UserButton: FC<IProps> = ({ username, photo, hasUpdates, onClick }) => {
   return (
     <button className={styles.wrap} onClick={onClick}>
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
-        <Avatar url={getURL(photo, imagePresets.avatar)} size={32} />
+        <Avatar
+          url={getURL(photo, imagePresets.avatar)}
+          size={32}
+          hasUpdates={hasUpdates}
+        />
       </Group>
     </button>
   );

src/components/menu/VerticalMenu/index.tsx

@@ -1,8 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
 
-import { Card } from '~/components/containers/Card';
+import { Anchor } from '~/components/common/Anchor';
 import { DivProps, LinkProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
@@ -11,7 +11,9 @@ interface VerticalMenuProps extends DivProps {
   appearance?: 'inset' | 'flat' | 'default';
 }
 
-interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {}
+interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {
+  hasUpdates?: boolean;
+}
 
 function VerticalMenu({
   children,
@@ -28,8 +30,13 @@ function VerticalMenu({
   );
 }
 
-VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => (
-  <a {...props} className={classNames(styles.item, props.className)} />
+VerticalMenu.Item = ({ hasUpdates, ...props }: VerticalMenuItemProps) => (
+  <a
+    {...props}
+    className={classNames(styles.item, props.className, {
+      [styles.has_dot]: hasUpdates,
+    })}
+  />
 );
 
 export { VerticalMenu };

src/components/menu/VerticalMenu/styles.module.scss

@@ -33,6 +33,19 @@ a.item {
   cursor: pointer;
   background-color: transparent;
   transition: background-color 0.25s;
+  position: relative;
+
+  &.has_dot::after {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 8px;
+    height: 8px;
+    background: $color_danger;
+    border-radius: 8px;
+    transform: translate(0, -50%);
+  }
 
   &:hover {
     background-color: $content_bg_success;