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;