Set background to notification icon

src/components/Desktop/DesktopHeader.tsx

@@ -1,47 +1,55 @@
-import * as React from "react";
+import * as React from 'react';
 import {
   BottomNavigation,
   BottomNavigationAction,
   ButtonBase,
   Typography,
-} from "@mui/material";
-import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
-import Box from "@mui/material/Box";
-import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
-import { CustomSvg } from "../../common/CustomSvg";
-import { WalletIcon } from "../../assets/Icons/WalletIcon";
-import { HubsIcon } from "../../assets/Icons/HubsIcon";
-import { TradingIcon } from "../../assets/Icons/TradingIcon";
-import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
-import { HomeIcon } from "../../assets/Icons/HomeIcon";
-import { NotificationIcon2 } from "../../assets/Icons/NotificationIcon2";
-import { ChatIcon } from "../../assets/Icons/ChatIcon";
-import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
-import { MembersIcon } from "../../assets/Icons/MembersIcon";
-import { AdminsIcon } from "../../assets/Icons/AdminsIcon";
+} from '@mui/material';
+import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
+import Box from '@mui/material/Box';
+import BottomLogo from '../../assets/svgs/BottomLogo5.svg';
+import { CustomSvg } from '../../common/CustomSvg';
+import { HubsIcon } from '../../assets/Icons/HubsIcon';
+import { TradingIcon } from '../../assets/Icons/TradingIcon';
+import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
+import { HomeIcon } from '../../assets/Icons/HomeIcon';
+import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
+import { ChatIcon } from '../../assets/Icons/ChatIcon';
+import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon';
+import { MembersIcon } from '../../assets/Icons/MembersIcon';
+import { AdminsIcon } from '../../assets/Icons/AdminsIcon';
 import LockIcon from '@mui/icons-material/Lock';
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
 
-const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => {
+const IconWrapper = ({
+  children,
+  label,
+  color,
+  selected,
+  selectColor,
+  customHeight,
+}) => {
   return (
     <Box
       sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "5px",
-        flexDirection: "column",
-        height: customHeight ? customHeight : "65px",
-        width: customHeight ? customHeight :  "65px",
-        borderRadius: "50%",
-        backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '5px',
+        flexDirection: 'column',
+        height: customHeight ? customHeight : '65px',
+        width: customHeight ? customHeight : '65px',
+        borderRadius: '50%',
+        backgroundColor: selected
+          ? selectColor || 'rgba(28, 29, 32, 1)'
+          : 'transparent',
       }}
     >
       {children}
       <Typography
         sx={{
-          fontFamily: "Inter",
-          fontSize: "10px",
+          fontFamily: 'Inter',
+          fontSize: '10px',
           fontWeight: 500,
           color: color,
         }}
@@ -83,60 +91,67 @@ export const DesktopHeader = ({
   isChat,
   isForum,
   setGroupSection,
-  isPrivate
+  isPrivate,
 }) => {
   const [value, setValue] = React.useState(0);
   return (
     <Box
       sx={{
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        height: "70px", // Footer height
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        height: '70px', // Footer height
         zIndex: 1,
-        justifyContent: "space-between",
-        padding: "10px",
+        justifyContent: 'space-between',
+        padding: '10px',
       }}
     >
-      <Box sx={{
-        display: 'flex',
-        gap: '10px'
-      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
         {isPrivate && (
-          <LockIcon sx={{
-            color: 'var(--green)'
-          }} />
+          <LockIcon
+            sx={{
+              color: 'var(--green)',
+            }}
+          />
         )}
         {isPrivate === false && (
-          <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--danger)'
-          }} />
+          <NoEncryptionGmailerrorredIcon
+            sx={{
+              color: 'var(--danger)',
+            }}
+          />
         )}
         <Typography
           sx={{
-            fontSize: "16px",
+            fontSize: '16px',
             fontWeight: 600,
           }}
         >
-          {selectedGroup?.groupId === '0' ? 'General' :selectedGroup?.groupName}
+          {selectedGroup?.groupId === '0'
+            ? 'General'
+            : selectedGroup?.groupName}
         </Typography>
       </Box>
       <Box
         sx={{
-          display: "flex",
-          gap: "20px",
-          alignItems: "center",
-          visibility: selectedGroup?.groupId === '0' ? 'hidden' : 'visibile'
+          display: 'flex',
+          gap: '20px',
+          alignItems: 'center',
+          visibility: selectedGroup?.groupId === '0' ? 'hidden' : 'visibile',
         }}
       >
-      
         <ButtonBase
           onClick={() => {
-            goToAnnouncements()
+            goToAnnouncements();
           }}
         >
           <IconWrapper
-            color={isAnnouncement ? "black" :"rgba(250, 250, 250, 0.5)"}
+            color={isAnnouncement ? 'black' : 'rgba(250, 250, 250, 0.5)'}
             label="ANN"
             selected={isAnnouncement}
             selectColor="#09b6e8"
@@ -147,10 +162,10 @@ export const DesktopHeader = ({
               width={20}
               color={
                 isUnread
-                  ? "var(--unread)"
+                  ? 'var(--unread)'
                   : isAnnouncement
-                  ? "black"
-                  : "rgba(250, 250, 250, 0.5)"
+                    ? 'black'
+                    : 'rgba(250, 250, 250, 0.5)'
               }
             />
           </IconWrapper>
@@ -158,11 +173,11 @@ export const DesktopHeader = ({
 
         <ButtonBase
           onClick={() => {
-            goToChat()
+            goToChat();
           }}
         >
           <IconWrapper
-            color={isChat ? "black" :"rgba(250, 250, 250, 0.5)"}
+            color={isChat ? 'black' : 'rgba(250, 250, 250, 0.5)'}
             label="Chat"
             selected={isChat}
             selectColor="#09b6e8"
@@ -173,10 +188,10 @@ export const DesktopHeader = ({
               width={20}
               color={
                 isUnreadChat
-                  ? "var(--unread)"
+                  ? 'var(--unread)'
                   : isChat
-                  ? "black"
-                  : "rgba(250, 250, 250, 0.5)"
+                    ? 'black'
+                    : 'rgba(250, 250, 250, 0.5)'
               }
             />
           </IconWrapper>
@@ -184,12 +199,11 @@ export const DesktopHeader = ({
 
         <ButtonBase
           onClick={() => {
-            setGroupSection("forum");
-          
+            setGroupSection('forum');
           }}
         >
           <IconWrapper
-            color={isForum ? 'black' : "rgba(250, 250, 250, 0.5)"}
+            color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
             label="Threads"
             selected={isForum}
             selectColor="#09b6e8"
@@ -198,18 +212,13 @@ export const DesktopHeader = ({
             <ThreadsIcon
               height={25}
               width={20}
-              color={
-                isForum
-                  ? "black"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
+              color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
             />
           </IconWrapper>
         </ButtonBase>
         <ButtonBase
           onClick={() => {
-            setOpenManageMembers(true)
-          
+            setOpenManageMembers(true);
           }}
         >
           <IconWrapper
@@ -221,22 +230,21 @@ export const DesktopHeader = ({
             <MembersIcon
               height={25}
               width={20}
-              color={
-                isForum
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
+              color={isForum ? 'white' : 'rgba(250, 250, 250, 0.5)'}
             />
           </IconWrapper>
         </ButtonBase>
         <ButtonBase
           onClick={() => {
-            setGroupSection("adminSpace");
-          
+            setGroupSection('adminSpace');
           }}
         >
           <IconWrapper
-            color={groupSection === 'adminSpace' ? 'black' : "rgba(250, 250, 250, 0.5)"}
+            color={
+              groupSection === 'adminSpace'
+                ? 'black'
+                : 'rgba(250, 250, 250, 0.5)'
+            }
             label="Admins"
             selected={groupSection === 'adminSpace'}
             customHeight="55px"
@@ -247,8 +255,8 @@ export const DesktopHeader = ({
               width={20}
               color={
                 groupSection === 'adminSpace'
-                  ? "black"
-                  : "rgba(250, 250, 250, 0.5)"
+                  ? 'black'
+                  : 'rgba(250, 250, 250, 0.5)'
               }
             />
           </IconWrapper>