From 9b675f470d5543e6d0868d1baf7f411da6576d4b Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Sat, 12 Apr 2025 18:17:57 +0200
Subject: [PATCH] Set background to notification icon

---
 src/components/Desktop/DesktopHeader.tsx | 172 ++++++++++---------
 src/components/GeneralNotifications.tsx  | 209 +++++++++++++----------
 2 files changed, 206 insertions(+), 175 deletions(-)

diff --git a/src/components/Desktop/DesktopHeader.tsx b/src/components/Desktop/DesktopHeader.tsx
index 4820054..9dbe111 100644
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/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>
diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx
index c7336dc..3235fbb 100644
--- a/src/components/GeneralNotifications.tsx
+++ b/src/components/GeneralNotifications.tsx
@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
+import { useState } from 'react';
 import {
   Box,
   ButtonBase,
@@ -8,58 +7,72 @@ import {
   Popover,
   Tooltip,
   Typography,
-} from "@mui/material";
-import NotificationsIcon from "@mui/icons-material/Notifications";
-import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import { formatDate } from "../utils/time";
-import { useHandlePaymentNotification } from "../hooks/useHandlePaymentNotification";
-import { executeEvent } from "../utils/events";
+  useTheme,
+} from '@mui/material';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import { formatDate } from '../utils/time';
+import { useHandlePaymentNotification } from '../hooks/useHandlePaymentNotification';
+import { executeEvent } from '../utils/events';
 
 export const GeneralNotifications = ({ address }) => {
   const [anchorEl, setAnchorEl] = useState(null);
-  const {latestTx,
+
+  const {
+    latestTx,
     getNameOrAddressOfSenderMiddle,
-    hasNewPayment, setLastEnteredTimestampPayment, nameAddressOfSender} = useHandlePaymentNotification(address)
-  
+    hasNewPayment,
+    setLastEnteredTimestampPayment,
+    nameAddressOfSender,
+  } = useHandlePaymentNotification(address);
+
   const handlePopupClick = (event) => {
     event.stopPropagation(); // Prevent parent onClick from firing
     setAnchorEl(event.currentTarget);
   };
 
+  const theme = useTheme();
+
   return (
     <>
       <ButtonBase
         onClick={(e) => {
           handlePopupClick(e);
-     
-        
         }}
         style={{}}
       >
-         <Tooltip
-                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>PAYMENT NOTIFICATION</span>} 
-                placement="left"
-                arrow
-                sx={{ fontSize: "24" }}
-                slotProps={{
-                  tooltip: {
-                    sx: {
-                      color: "#ffffff",
-                      backgroundColor: "#444444",
-                    },
-                  },
-                  arrow: {
-                    sx: {
-                      color: "#444444",
-                    },
-                  },
-                }}
-              >
-        <NotificationsIcon
-          sx={{
-            color: hasNewPayment ? "var(--unread)" : "rgba(255, 255, 255, 0.5)",
+        <Tooltip
+          title={
+            <span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
+              PAYMENT NOTIFICATION
+            </span>
+          }
+          placement="left"
+          arrow
+          sx={{ fontSize: '24' }}
+          slotProps={{
+            tooltip: {
+              sx: {
+                color: '#ffffff',
+                backgroundColor: '#444444',
+              },
+            },
+            arrow: {
+              sx: {
+                color: '#444444',
+              },
+            },
           }}
-        />
+        >
+          <NotificationsIcon
+            sx={{
+              color: hasNewPayment
+                ? 'var(--unread)'
+                : theme.palette.mode === 'dark'
+                  ? 'rgb(209, 209, 209)'
+                  : 'rgba(41, 41, 43, 1)',
+            }}
+          />
         </Tooltip>
       </ButtonBase>
 
@@ -67,81 +80,91 @@ export const GeneralNotifications = ({ address }) => {
         open={!!anchorEl}
         anchorEl={anchorEl}
         onClose={() => {
-          if(hasNewPayment){
-            setLastEnteredTimestampPayment(Date.now())
+          if (hasNewPayment) {
+            setLastEnteredTimestampPayment(Date.now());
           }
-          setAnchorEl(null)
-
+          setAnchorEl(null);
         }} // Close popover on click outside
       >
         <Box
           sx={{
-            width: "300px",
-            maxWidth: "100%",
-            maxHeight: "60vh",
-            overflow: "auto",
-            padding: "5px",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: hasNewPayment ? "flex-start" : "center",
+            width: '300px',
+            maxWidth: '100%',
+            maxHeight: '60vh',
+            overflow: 'auto',
+            padding: '5px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: hasNewPayment ? 'flex-start' : 'center',
           }}
         >
-          {!hasNewPayment && <Typography sx={{
-            userSelect: 'none'
-          }}>No new notifications</Typography>}
+          {!hasNewPayment && (
+            <Typography
+              sx={{
+                userSelect: 'none',
+              }}
+            >
+              No new notifications
+            </Typography>
+          )}
           {hasNewPayment && (
             <MenuItem
               sx={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "5px",
-                width: "100%",
-                alignItems: "flex-start",
-                textWrap: "auto",
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+                width: '100%',
+                alignItems: 'flex-start',
+                textWrap: 'auto',
               }}
-             onClick={() => {
-              setAnchorEl(null)
-                executeEvent('openWalletsApp', {})
+              onClick={() => {
+                setAnchorEl(null);
+                executeEvent('openWalletsApp', {});
               }}
             >
-              <Card sx={{
-                padding: '10px',
-                width: '100%',
-                backgroundColor: "#1F2023",
-                gap: '5px',
-                display: 'flex',
-                flexDirection: 'column'
-              }}>
-              <Box
+              <Card
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "5px",
-                  justifyContent: "space-between",
+                  padding: '10px',
+                  width: '100%',
+                  backgroundColor: '#1F2023',
+                  gap: '5px',
+                  display: 'flex',
+                  flexDirection: 'column',
                 }}
               >
-                <AccountBalanceWalletIcon
+                <Box
                   sx={{
-                    color: "white",
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '5px',
+                    justifyContent: 'space-between',
                   }}
-                />{" "}
-                {formatDate(latestTx?.timestamp)}
-              </Box>
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "5px",
-                  justifyContent: "space-between",
-                }}
-              >
-               
-                <Typography>{latestTx?.amount}</Typography>
-              </Box>
-              <Typography sx={{
-                fontSize: '0.8rem'
-              }}>{nameAddressOfSender.current[latestTx?.creatorAddress] || getNameOrAddressOfSenderMiddle(latestTx?.creatorAddress)}</Typography>
-          
+                >
+                  <AccountBalanceWalletIcon
+                    sx={{
+                      color: 'white',
+                    }}
+                  />{' '}
+                  {formatDate(latestTx?.timestamp)}
+                </Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '5px',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Typography>{latestTx?.amount}</Typography>
+                </Box>
+                <Typography
+                  sx={{
+                    fontSize: '0.8rem',
+                  }}
+                >
+                  {nameAddressOfSender.current[latestTx?.creatorAddress] ||
+                    getNameOrAddressOfSenderMiddle(latestTx?.creatorAddress)}
+                </Typography>
               </Card>
             </MenuItem>
           )}