change unread color

This commit is contained in:
PhilReact 2024-12-17 04:03:37 +02:00
parent ac7b00662f
commit 0f95f947ec
24 changed files with 56 additions and 57 deletions

View File

@ -2793,11 +2793,11 @@ function App() {
accept accept
</Button> </Button>
<Button sx={{ <Button sx={{
backgroundColor: 'var(--unread)', backgroundColor: 'var(--danger)',
color: 'black', color: 'black',
opacity: 0.7, opacity: 0.7,
'&:hover': { '&:hover': {
backgroundColor: 'var(--unread)', backgroundColor: 'var(--danger)',
color: 'black', color: 'black',
opacity: 1 opacity: 1
}, },
@ -3093,7 +3093,7 @@ function App() {
</CustomButtonAccept> </CustomButtonAccept>
<CustomButtonAccept <CustomButtonAccept
color="black" color="black"
bgColor="var(--unread)" bgColor="var(--danger)"
sx={{ sx={{
minWidth: "102px", minWidth: "102px",
}} }}

View File

@ -434,12 +434,12 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
</Button> </Button>
<Button <Button
sx={{ sx={{
backgroundColor: 'var(--unread)', backgroundColor: 'var(--danger)',
"&:hover": { "&:hover": {
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
}, },
"&:focus": { "&:focus": {
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
}, },
}} }}
size="small" size="small"

View File

@ -381,7 +381,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
height={30} height={30}
color={ color={
hasUnreadDirects hasUnreadDirects
? "var(--unread)" ? "var(--danger)"
: isDirects : isDirects
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"
@ -399,7 +399,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
height={30} height={30}
color={ color={
hasUnreadGroups hasUnreadGroups
? "var(--unread)" ? "var(--danger)"
: isGroups : isGroups
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"

View File

@ -321,7 +321,7 @@ export const AppsNavBarDesktop = ({disableBack}) => {
<PushPinIcon <PushPinIcon
height={20} height={20}
sx={{ sx={{
color: isSelectedAppPinned ? "red" : "rgba(250, 250, 250, 0.5)", color: isSelectedAppPinned ? "var(--danger)" : "rgba(250, 250, 250, 0.5)",
}} }}
/> />
</ListItemIcon> </ListItemIcon>
@ -330,7 +330,7 @@ export const AppsNavBarDesktop = ({disableBack}) => {
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: isSelectedAppPinned ? "red" : "rgba(250, 250, 250, 0.5)", color: isSelectedAppPinned ? "var(--danger)" : "rgba(250, 250, 250, 0.5)",
}, },
}} }}
primary={`${isSelectedAppPinned ? "Unpin app" : "Pin app"}`} primary={`${isSelectedAppPinned ? "Unpin app" : "Pin app"}`}

View File

@ -656,7 +656,7 @@ useEffect(() => {
}}> }}>
<Typography sx={{ <Typography sx={{
fontSize: '12px', fontSize: '12px',
color: messageSize > 4000 ? 'var(--unread)' : 'unset' color: messageSize > 4000 ? 'var(--danger)' : 'unset'
}}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography> }}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
</Box> </Box>

View File

@ -873,7 +873,7 @@ const clearEditorContent = () => {
}}> }}>
<Typography sx={{ <Typography sx={{
fontSize: '12px', fontSize: '12px',
color: messageSize > 4000 ? 'var(--unread)' : 'unset' color: messageSize > 4000 ? 'var(--danger)' : 'unset'
}}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography> }}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
</Box> </Box>

View File

@ -377,7 +377,7 @@ export const ChatList = ({
position: "absolute", position: "absolute",
right: 20, right: 20,
backgroundColor: "var(--unread)", backgroundColor: "var(--unread)",
color: "white", color: "black",
padding: "10px 20px", padding: "10px 20px",
borderRadius: "20px", borderRadius: "20px",
cursor: "pointer", cursor: "pointer",

View File

@ -647,7 +647,7 @@ export const GroupAnnouncements = ({
marginTop: "auto", marginTop: "auto",
alignSelf: "center", alignSelf: "center",
cursor: isSending ? "default" : "pointer", cursor: isSending ? "default" : "pointer",
background: "red", background: "var(--danger)",
flexShrink: 0, flexShrink: 0,
padding: isMobile && "5px", padding: isMobile && "5px",
fontSize: isMobile && "14px", fontSize: isMobile && "14px",

View File

@ -150,7 +150,7 @@ export const DesktopFooter = ({
height={30} height={30}
color={ color={
hasUnreadGroups hasUnreadGroups
? "var(--unread)" ? "var(--danger)"
: isGroups : isGroups
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"
@ -172,7 +172,7 @@ export const DesktopFooter = ({
height={30} height={30}
color={ color={
hasUnreadDirects hasUnreadDirects
? "var(--unread)" ? "var(--danger)"
: isDirects : isDirects
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"

View File

@ -109,7 +109,7 @@ export const DesktopHeader = ({
)} )}
{isPrivate === false && ( {isPrivate === false && (
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon sx={{
color: 'var(--unread)' color: 'var(--danger)'
}} /> }} />
)} )}
<Typography <Typography
@ -158,7 +158,7 @@ export const DesktopHeader = ({
height={25} height={25}
color={ color={
hasUnreadGroups hasUnreadGroups
? "var(--unread)" ? "var(--danger)"
: isGroups : isGroups
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"
@ -180,7 +180,7 @@ export const DesktopHeader = ({
height={25} height={25}
color={ color={
hasUnreadDirects hasUnreadDirects
? "var(--unread)" ? "var(--danger)"
: isDirects : isDirects
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"

View File

@ -90,7 +90,7 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire
height={30} height={30}
color={ color={
hasUnreadGroups hasUnreadGroups
? "var(--unread)" ? "var(--danger)"
: isGroups : isGroups
? "white" ? "white"
: "rgba(250, 250, 250, 0.5)" : "rgba(250, 250, 250, 0.5)"

View File

@ -228,7 +228,7 @@ export const AttachmentCard = ({
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: "var(--unread)", color: "var(--danger)",
}} }}
> >
{errorMsg} {errorMsg}

View File

@ -159,7 +159,7 @@ export const ImageCard = ({
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: "var(--unread)", color: "var(--danger)",
}} }}
> >
{errorMsg} {errorMsg}

View File

@ -221,7 +221,7 @@ export const PollCard = ({
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
color: "var(--unread)", color: "var(--danger)",
}} }}
> >
{errorMsg} {errorMsg}

View File

@ -240,7 +240,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
)} )}
{group?.isOpen === true && ( {group?.isOpen === true && (
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon sx={{
color: 'var(--unread)' color: 'var(--danger)'
}} /> }} />
)} )}
<Spacer width="15px" /> <Spacer width="15px" />

View File

@ -534,14 +534,12 @@ export const NewThread = ({
</NewMessageSendP> </NewMessageSendP>
{isMessage ? ( {isMessage ? (
<SendNewMessage <SendNewMessage
color="red"
opacity={1} opacity={1}
height="25px" height="25px"
width="25px" width="25px"
/> />
) : ( ) : (
<CreateThreadIcon <CreateThreadIcon
color="red"
opacity={1} opacity={1}
height="25px" height="25px"
width="25px" width="25px"

View File

@ -1687,7 +1687,7 @@ export const Group = ({
direct?.timestamp) && ( direct?.timestamp) && (
<MarkChatUnreadIcon <MarkChatUnreadIcon
sx={{ sx={{
color: "red", color: "var(--unread)",
}} }}
/> />
)} )}
@ -1897,7 +1897,7 @@ export const Group = ({
justifyContent: 'center' justifyContent: 'center'
}}> }}>
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon sx={{
color: 'var(--unread)' color: 'var(--danger)'
}} /> }} />
</Box> </Box>
// <Avatar // <Avatar
@ -1940,7 +1940,7 @@ export const Group = ({
!groupAnnouncements[group?.groupId]?.seentimestamp && ( !groupAnnouncements[group?.groupId]?.seentimestamp && (
<CampaignIcon <CampaignIcon
sx={{ sx={{
color: "red", color: "var(--unread)",
marginRight: "5px", marginRight: "5px",
}} }}
/> />
@ -1956,7 +1956,7 @@ export const Group = ({
group?.timestamp) && ( group?.timestamp) && (
<MarkChatUnreadIcon <MarkChatUnreadIcon
sx={{ sx={{
color: "red", color: "var(--unread)",
}} }}
/> />
)} )}

View File

@ -73,13 +73,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
}} }}
> >
{groupSection === "announcement" &&( {groupSection === "announcement" &&(
<> <NotificationIcon2 color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'} /> {" Announcements"}</> <> <NotificationIcon2 color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'} /> {" Announcements"}</>
)} )}
{groupSection === "chat" &&( {groupSection === "chat" &&(
<> <ChatIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'} /> {" Group Chats"}</> <> <ChatIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'} /> {" Group Chats"}</>
)} )}
{groupSection === "forum" &&( {groupSection === "forum" &&(
<> <ThreadsIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'} /> {" Threads"}</> <> <ThreadsIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'} /> {" Threads"}</>
)} )}
</Box> </Box>
<ArrowDownIcon color="white" /> <ArrowDownIcon color="white" />
@ -128,13 +128,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<ChatIcon color={hasUnreadChat ? 'var(--unread)' : "#fff"} /> <ChatIcon color={hasUnreadChat ? 'var(--danger)' : "#fff"} />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadChat ? "var(--unread)" :"#fff" color: hasUnreadChat ? "var(--danger)" :"#fff"
}, },
}} primary="Chat" /> }} primary="Chat" />
</MenuItem> </MenuItem>
@ -148,13 +148,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<NotificationIcon2 color={hasUnreadAnnouncements ? 'var(--unread)' : "#fff" } /> <NotificationIcon2 color={hasUnreadAnnouncements ? 'var(--danger)' : "#fff" } />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadAnnouncements ? "var(--unread)" :"#fff" color: hasUnreadAnnouncements ? "var(--danger)" :"#fff"
}, },
}} primary="Announcements" /> }} primary="Announcements" />
</MenuItem> </MenuItem>

View File

@ -555,7 +555,7 @@ export const ListOfGroupPromotions = () => {
)} )}
{promotion?.isOpen === true && ( {promotion?.isOpen === true && (
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon sx={{
color: 'var(--unread)' color: 'var(--danger)'
}} /> }} />
)} )}
<Typography <Typography

View File

@ -192,7 +192,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
)} )}
{invite?.isOpen === true && ( {invite?.isOpen === true && (
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon sx={{
color: 'var(--unread)' color: 'var(--danger)'
}} /> }} />
)} )}
<Spacer width="15px" /> <Spacer width="15px" />

View File

@ -108,7 +108,7 @@ export const MobileFooter = ({
}} }}
icon={ icon={
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Groups"> <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Groups">
<HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} /> <HubsIcon color={hasUnreadGroups ? "var(--danger)" : "rgba(250, 250, 250, 0.5)"} />
</IconWrapper> </IconWrapper>
} }
sx={{ sx={{
@ -175,7 +175,7 @@ export const MobileFooter = ({
}} }}
icon={ icon={
<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)"> <IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
<MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} /> <MessagingIcon color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
</IconWrapper> </IconWrapper>
} }
sx={{ sx={{

View File

@ -92,7 +92,7 @@ const Header = ({
onClick={handleClick} onClick={handleClick}
> >
<NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(145, 145, 147, 1)"} /> <NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(145, 145, 147, 1)"} />
</ButtonBase> </ButtonBase>
{fullScreen && ( {fullScreen && (
<ButtonBase onClick={()=> { <ButtonBase onClick={()=> {
@ -135,7 +135,7 @@ const Header = ({
setMobileViewModeKeepOpen("messaging"); setMobileViewModeKeepOpen("messaging");
}} }}
> >
<MessagingIcon2 height={20} color={hasUnreadDirects ? "var(--unread)" : "rgba(145, 145, 147, 1)"} <MessagingIcon2 height={20} color={hasUnreadDirects ? "var(--danger)" : "rgba(145, 145, 147, 1)"}
/> />
</ButtonBase> </ButtonBase>
@ -197,13 +197,13 @@ const Header = ({
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} /> <HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)" color: hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
}, },
}} primary="Groups" /> }} primary="Groups" />
</MenuItem> </MenuItem>
@ -218,13 +218,13 @@ const Header = ({
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} /> <MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)" color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
}, },
}} primary="Messaging" /> }} primary="Messaging" />
</MenuItem> </MenuItem>
@ -358,7 +358,7 @@ const Header = ({
}} }}
> >
<IconButton onClick={handleClick} color="inherit"> <IconButton onClick={handleClick} color="inherit">
<NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(255, 255, 255, 1)"} /> <NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(255, 255, 255, 1)"} />
</IconButton> </IconButton>
</Box> </Box>
@ -433,13 +433,13 @@ const Header = ({
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} /> <HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)" color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
}, },
}} primary="Groups" /> }} primary="Groups" />
</MenuItem> </MenuItem>
@ -454,13 +454,13 @@ const Header = ({
minWidth: '24px !important' minWidth: '24px !important'
}}> }}>
<MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} /> <MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
</ListItemIcon> </ListItemIcon>
<ListItemText sx={{ <ListItemText sx={{
"& .MuiTypography-root": { "& .MuiTypography-root": {
fontSize: "12px", fontSize: "12px",
fontWeight: 600, fontWeight: 600,
color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)" color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
}, },
}} primary="Messaging" /> }} primary="Messaging" />
</MenuItem> </MenuItem>

View File

@ -300,11 +300,11 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
onClick={revertChanges} onClick={revertChanges}
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
color: "black", color: "black",
opacity: 0.7, opacity: 0.7,
"&:hover": { "&:hover": {
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
color: "black", color: "black",
opacity: 1, opacity: 1,
}, },
@ -360,11 +360,11 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
onClick={saveToQdn} onClick={saveToQdn}
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
color: "black", color: "black",
opacity: 0.7, opacity: 0.7,
"&:hover": { "&:hover": {
backgroundColor: "var(--unread)", backgroundColor: "var(--danger)",
color: "black", color: "black",
opacity: 1, opacity: 1,
}, },

View File

@ -34,7 +34,8 @@
--bg-primary : rgba(31, 32, 35, 1); --bg-primary : rgba(31, 32, 35, 1);
--bg-2: #27282c; --bg-2: #27282c;
--bg-3: rgba(0, 0, 0, 0.1); --bg-3: rgba(0, 0, 0, 0.1);
--unread: #B14646; --unread: #4297e2;
--danger: #B14646;
--apps-circle: #1F2023; --apps-circle: #1F2023;
--green: #5EB049; --green: #5EB049;
} }