Notifications interface (#5354)

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

app/components/Avatar/Avatar.tsx

@@ -1,9 +1,14 @@
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import useBoolean from "~/hooks/useBoolean";
 import Initials from "./Initials";
 
+export enum AvatarSize {
+  Small = 18,
+  Medium = 24,
+  Large = 32,
+}
+
 export interface IAvatar {
   avatarUrl: string | null;
   color?: string;
@@ -12,9 +17,8 @@ export interface IAvatar {
 }
 
 type Props = {
-  size: number;
+  size: AvatarSize;
   src?: string;
-  icon?: React.ReactNode;
   model?: IAvatar;
   alt?: string;
   showBorder?: boolean;
@@ -24,7 +28,7 @@ type Props = {
 };
 
 function Avatar(props: Props) {
-  const { icon, showBorder, model, style, ...rest } = props;
+  const { showBorder, model, style, ...rest } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
@@ -44,13 +48,12 @@ function Avatar(props: Props) {
       ) : (
         <Initials $showBorder={showBorder} {...rest} />
       )}
-      {icon && <IconWrapper>{icon}</IconWrapper>}
     </Relative>
   );
 }
 
 Avatar.defaultProps = {
-  size: 24,
+  size: AvatarSize.Medium,
 };
 
 const Relative = styled.div`
@@ -59,18 +62,6 @@ const Relative = styled.div`
   flex-shrink: 0;
 `;
 
-const IconWrapper = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  background: ${s("accent")};
-  border: 2px solid ${s("background")};
-  border-radius: 100%;
-  width: 20px;
-  height: 20px;
-`;
-
 const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   display: block;
   width: ${(props) => props.size}px;