Change mail icon with material icon

src/App.tsx

@@ -1654,6 +1654,7 @@ function App() {
                 </Tooltip>
               </>
             )}
+
             <Spacer height="20px" />
 
             <ButtonBase
@@ -1692,7 +1693,9 @@ function App() {
                 <SettingsIcon />
               </Tooltip>
             </ButtonBase>
+
             <Spacer height="20px" />
+
             <ButtonBase
               onClick={() => {
                 setIsOpenDrawerLookup(true);
@@ -1729,7 +1732,9 @@ function App() {
                 <PersonSearchIcon />
               </Tooltip>
             </ButtonBase>
+
             <Spacer height="20px" />
+
             <ButtonBase
               onClick={() => {
                 executeEvent('openWalletsApp', {});
@@ -1811,20 +1816,25 @@ function App() {
             )}
 
             <Spacer height="20px" />
+
             <CoreSyncStatus />
+
             <Spacer height="20px" />
+
             <QMailStatus />
+
             <Spacer height="20px" />
             {extState === 'authenticated' && (
               <GeneralNotifications address={userInfo?.address} />
             )}
           </Box>
+
           <Box
             sx={{
-              width: '100%',
+              alignItems: 'center',
               display: 'flex',
               flexDirection: 'column',
-              alignItems: 'center',
+              width: '100%',
             }}
           >
             {extState === 'authenticated' && isMainWindow && (
@@ -1859,7 +1869,9 @@ function App() {
                 <GlobalActions memberGroups={memberGroups} />
               </MyContext.Provider>
             )}
+
             <Spacer height="20px" />
+
             <ButtonBase
               onClick={async () => {
                 try {
@@ -1911,6 +1923,7 @@ function App() {
             </ButtonBase>
 
             <Spacer height="20px" />
+
             {(desktopViewMode === 'apps' || desktopViewMode === 'home') && (
               <ButtonBase
                 onClick={() => {

src/assets/svgs/Mail.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512"  xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+<g>
+	<path class="st0" d="M510.678,112.275c-2.308-11.626-7.463-22.265-14.662-31.054c-1.518-1.915-3.104-3.63-4.823-5.345
+		c-12.755-12.818-30.657-20.814-50.214-20.814H71.021c-19.557,0-37.395,7.996-50.21,20.814c-1.715,1.715-3.301,3.43-4.823,5.345
+		C8.785,90.009,3.63,100.649,1.386,112.275C0.464,116.762,0,121.399,0,126.087V385.92c0,9.968,2.114,19.55,5.884,28.203
+		c3.497,8.26,8.653,15.734,14.926,22.001c1.59,1.586,3.169,3.044,4.892,4.494c12.286,10.175,28.145,16.32,45.319,16.32h369.958
+		c17.18,0,33.108-6.145,45.323-16.384c1.718-1.386,3.305-2.844,4.891-4.43c6.27-6.267,11.425-13.741,14.994-22.001v-0.064
+		c3.769-8.653,5.812-18.171,5.812-28.138V126.087C512,121.399,511.543,116.762,510.678,112.275z M46.509,101.571
+		c6.345-6.338,14.866-10.175,24.512-10.175h369.958c9.646,0,18.242,3.837,24.512,10.175c1.122,1.129,2.179,2.387,3.112,3.637
+		L274.696,274.203c-5.348,4.687-11.954,7.002-18.696,7.002c-6.674,0-13.276-2.315-18.695-7.002L43.472,105.136
+		C44.33,103.886,45.387,102.7,46.509,101.571z M36.334,385.92V142.735L176.658,265.15L36.405,387.435
+		C36.334,386.971,36.334,386.449,36.334,385.92z M440.979,420.597H71.021c-6.281,0-12.158-1.651-17.174-4.552l147.978-128.959
+		l13.815,12.018c11.561,10.046,26.028,15.134,40.36,15.134c14.406,0,28.872-5.088,40.432-15.134l13.808-12.018l147.92,128.959
+		C453.137,418.946,447.26,420.597,440.979,420.597z M475.666,385.92c0,0.529,0,1.051-0.068,1.515L335.346,265.221L475.666,142.8
+		V385.92z"/>
+</g>
+</svg>

src/assets/svgs/Mail.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from '@mui/material';
+import { SVGProps } from './interfaces';
+
+export const Logout: React.FC<SVGProps> = ({ color, opacity, ...children }) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  const setOpacity = opacity ? opacity : 1;
+
+  return (
+    <svg
+      {...children}
+      fill={setColor}
+      height="20"
+      version="1.1"
+      viewBox="0 0 512 512"
+      width="18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M510.678,112.275c-2.308-11.626-7.463-22.265-14.662-31.054c-1.518-1.915-3.104-3.63-4.823-5.345
+			c-12.755-12.818-30.657-20.814-50.214-20.814H71.021c-19.557,0-37.395,7.996-50.21,20.814c-1.715,1.715-3.301,3.43-4.823,5.345
+			C8.785,90.009,3.63,100.649,1.386,112.275C0.464,116.762,0,121.399,0,126.087V385.92c0,9.968,2.114,19.55,5.884,28.203
+			c3.497,8.26,8.653,15.734,14.926,22.001c1.59,1.586,3.169,3.044,4.892,4.494c12.286,10.175,28.145,16.32,45.319,16.32h369.958
+			c17.18,0,33.108-6.145,45.323-16.384c1.718-1.386,3.305-2.844,4.891-4.43c6.27-6.267,11.425-13.741,14.994-22.001v-0.064
+			c3.769-8.653,5.812-18.171,5.812-28.138V126.087C512,121.399,511.543,116.762,510.678,112.275z M46.509,101.571
+			c6.345-6.338,14.866-10.175,24.512-10.175h369.958c9.646,0,18.242,3.837,24.512,10.175c1.122,1.129,2.179,2.387,3.112,3.637
+			L274.696,274.203c-5.348,4.687-11.954,7.002-18.696,7.002c-6.674,0-13.276-2.315-18.695-7.002L43.472,105.136
+			C44.33,103.886,45.387,102.7,46.509,101.571z M36.334,385.92V142.735L176.658,265.15L36.405,387.435
+			C36.334,386.971,36.334,386.449,36.334,385.92z M440.979,420.597H71.021c-6.281,0-12.158-1.651-17.174-4.552l147.978-128.959
+			l13.815,12.018c11.561,10.046,26.028,15.134,40.36,15.134c14.406,0,28.872-5.088,40.432-15.134l13.808-12.018l147.92,128.959
+			C453.137,418.946,447.26,420.597,440.979,420.597z M475.666,385.92c0,0.529,0,1.051-0.068,1.515L335.346,265.221L475.666,142.8
+			V385.92z"
+        fill={setColor}
+        fill-opacity={setOpacity}
+      />
+    </svg>
+  );
+};

src/components/QMailStatus.tsx

@@ -1,12 +1,15 @@
 import { useMemo } from 'react';
-import QMailLogo from '../assets/QMailLogo.png';
+import EmailIcon from '@mui/icons-material/Email';
 import { useRecoilState } from 'recoil';
 import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
 import { isLessThanOneWeekOld } from './Group/QMailMessages';
-import { ButtonBase, Tooltip } from '@mui/material';
+import { ButtonBase, Tooltip, useTheme } from '@mui/material';
 import { executeEvent } from '../utils/events';
+import { Mail } from '@mui/icons-material';
 
 export const QMailStatus = () => {
+  const theme = useTheme();
+
   const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
     qMailLastEnteredTimestampAtom
   );
@@ -39,21 +42,27 @@ export const QMailStatus = () => {
       {hasNewMail && (
         <div
           style={{
-            position: 'absolute',
-            zIndex: 1,
-            top: '-7px',
-            right: '-7px',
             backgroundColor: 'var(--unread)',
-            height: '15px',
-            width: '15px',
             borderRadius: '50%',
+            height: '15px',
             outline: '1px solid white',
+            position: 'absolute',
+            right: '-7px',
+            top: '-7px',
+            width: '15px',
+            zIndex: 1,
           }}
         />
       )}
       <Tooltip
         title={
-          <span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
+          <span
+            style={{
+              color: theme.palette.text.primary,
+              fontSize: '14px',
+              fontWeight: 700,
+            }}
+          >
             Q-MAIL
           </span>
         }
@@ -63,18 +72,18 @@ export const QMailStatus = () => {
         slotProps={{
           tooltip: {
             sx: {
-              color: '#ffffff',
+              color: theme.palette.text.primary,
-              backgroundColor: '#444444',
+              backgroundColor: theme.palette.background.default,
             },
           },
           arrow: {
             sx: {
-              color: '#444444',
+              color: theme.palette.text.primary,
             },
           },
         }}
       >
-        <img style={{ width: '24px', height: 'auto' }} src={QMailLogo} />
+        <Mail />
       </Tooltip>
     </ButtonBase>
   );