mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-05-06 09:47:52 +00:00
Change mail icon with material icon
This commit is contained in:
Nicola Benaglia
parent
905cddf29a
commit
e541cdab61
17
src/App.tsx
17
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={() => {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
25
src/assets/svgs/Mail.svg
Normal file
25
src/assets/svgs/Mail.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
39
src/assets/svgs/Mail.tsx
Normal file
39
src/assets/svgs/Mail.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user