mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-11 10:46:58 +00:00
Set background to notification icon
This commit is contained in:
Nicola Benaglia
parent
ec2b1116ab
commit
9b675f470d
@ -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>
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user