change unread color

2025-03-14 20:02:33 +00:00 · 2024-12-17 06:37:34 +02:00 · 2024-12-17 06:37:34 +02:00 · f97c91fe35
commit f97c91fe35
parent 7e2a1db62b
17 changed files with 35 additions and 31 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -2874,6 +2874,7 @@ await showInfo({
                  backgroundColor: 'var(--green)',
                  color: 'black',
                  opacity: 0.7,
+                  fontWeight: 'bold',
                  '&:hover': {
                    backgroundColor: 'var(--green)',
                  color: 'black',
@ -2883,11 +2884,12 @@ await showInfo({
              accept
            </Button>
            <Button sx={{
-                  backgroundColor: 'var(--unread)',
+                  backgroundColor: 'var(--danger)',
                  color: 'black',
                  opacity: 0.7,
+                  fontWeight: 'bold',
                  '&:hover': {
-                    backgroundColor: 'var(--unread)',
+                    backgroundColor: 'var(--danger)',
                  color: 'black',
                  opacity: 1
                  },
@ -3175,7 +3177,7 @@ await showInfo({
              </CustomButtonAccept>
              <CustomButtonAccept
               color="black"
-               bgColor="var(--unread)"
+               bgColor="var(--danger)"
                sx={{
                  minWidth: "102px",
                }}
--- a/src/Wallets.tsx
+++ b/src/Wallets.tsx
@ -541,12 +541,12 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
            </Button>
            <Button
              sx={{
-                backgroundColor: "var(--unread)",
+                backgroundColor: "var(--danger)",
                "&:hover": {
-                  backgroundColor: "var(--unread)",
+                  backgroundColor: "var(--danger)",
                },
                "&:focus": {
-                  backgroundColor: "var(--unread)",
+                  backgroundColor: "var(--danger)",
                },
              }}
              size="small"
--- a/src/components/Apps/AppsNavBar.tsx
+++ b/src/components/Apps/AppsNavBar.tsx
@ -297,7 +297,7 @@ export const AppsNavBar = ({appsMode}) => {
            <PushPinIcon
              height={20}
              sx={{
-                color: isSelectedAppPinned ? "red" : "rgba(250, 250, 250, 0.5)",
+                color: isSelectedAppPinned ? "var(--danger)" : "rgba(250, 250, 250, 0.5)",
              }}
            />
          </ListItemIcon>
@ -306,7 +306,7 @@ export const AppsNavBar = ({appsMode}) => {
              "& .MuiTypography-root": {
                fontSize: "12px",
                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"}`}
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@ -712,7 +712,7 @@ const sendMessage = async ()=> {
        }}>
                <Typography sx={{
                  fontSize: '12px',
-                  color: messageSize > 4000 ? 'var(--unread)' : 'unset'
+                  color: messageSize > 4000 ? 'var(--danger)' : 'unset'
                }}>{`size ${messageSize} of 4000`}</Typography>

          </Box>
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@ -1010,7 +1010,7 @@ const sendMessage = async ()=> {
        }}>
                <Typography sx={{
                  fontSize: '12px',
-                  color: messageSize > 4000 ? 'var(--unread)' : 'unset'
+                  color: messageSize > 4000 ? 'var(--danger)' : 'unset'
                }}>{`size ${messageSize} of 4000`}</Typography>

          </Box>
--- a/src/components/Chat/ChatList.tsx
+++ b/src/components/Chat/ChatList.tsx
@ -369,7 +369,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
          bottom: 20,
          right: 20,
          backgroundColor: 'var(--unread)',
-          color: 'white',
+          color: 'black',
          padding: '10px 20px',
          borderRadius: '20px',
          cursor: 'pointer',
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@ -646,7 +646,7 @@ export const GroupAnnouncements = ({
                  marginTop: "auto",
                  alignSelf: "center",
                  cursor: isSending ? "default" : "pointer",
-                  background: "red",
+                  background: "var(--danger)",
                  flexShrink: 0,
                  padding: isMobile && "5px",
                  fontSize: isMobile && "14px",
--- a/src/components/Embeds/AttachmentEmbed.tsx
+++ b/src/components/Embeds/AttachmentEmbed.tsx
@ -253,7 +253,7 @@ export const AttachmentCard = ({
              <Typography
                sx={{
                  fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                }}
              >
                {errorMsg}
--- a/src/components/Embeds/ImageEmbed.tsx
+++ b/src/components/Embeds/ImageEmbed.tsx
@ -161,7 +161,7 @@ export const ImageCard = ({
              <Typography
                sx={{
                  fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                }}
              >
                {errorMsg}
--- a/src/components/Embeds/PollEmbed.tsx
+++ b/src/components/Embeds/PollEmbed.tsx
@ -221,7 +221,7 @@ export const PollCard = ({
              <Typography
                sx={{
                  fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                }}
              >
                {errorMsg}
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@ -240,7 +240,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
        )}
        {group?.isOpen === true && (
          <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
          }} />
        )}
        <Spacer width="15px" />
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@ -534,14 +534,12 @@ export const NewThread = ({
            </NewMessageSendP>
            {isMessage ? (
              <SendNewMessage
-                color="red"
                opacity={1}
                height="25px"
                width="25px"
              />
            ) : (
              <CreateThreadIcon
-                color="red"
                opacity={1}
                height="25px"
                width="25px"
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@ -718,7 +718,7 @@ export const Group = ({
      }
    });
    return hasUnread;
-  }, [timestampEnterData, groups, myAddress]);
+  }, [timestampEnterData, groups, myAddress, groupChatTimestamps]);

  const groupsAnnHasUnread = useMemo(() => {
    let hasUnread = false;
@ -1851,7 +1851,7 @@ export const Group = ({
                        direct?.timestamp) && (
                      <MarkChatUnreadIcon
                        sx={{
-                          color: "red",
+                          color: "var(--unread)",
                        }}
                      />
                    )}
@ -2023,7 +2023,7 @@ export const Group = ({
                          justifyContent: 'center'
                        }}>
                        <NoEncryptionGmailerrorredIcon sx={{
-                          color: 'var(--unread)'
+                          color: 'var(--danger)'
                        }} />
                        </Box>
                    
@ -2058,7 +2058,7 @@ export const Group = ({
                      !groupAnnouncements[group?.groupId]?.seentimestamp && (
                        <CampaignIcon
                          sx={{
-                            color: "red",
+                            color: "var(--unread)",
                            marginRight: "5px",
                          }}
                        />
@ -2074,7 +2074,7 @@ export const Group = ({
                          group?.timestamp) && (
                        <MarkChatUnreadIcon
                          sx={{
-                            color: "red",
+                            color: "var(--unread)",
                          }}
                        />
                      )}
@ -2377,7 +2377,7 @@ export const Group = ({
        )}
        {isPrivate === false && (
          <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
          }} />
        )}
                   {/* <ExitIcon /> */}
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@ -556,7 +556,7 @@ export const ListOfGroupPromotions = () => {
        )}
        {promotion?.isOpen === true && (
          <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
          }} />
        )}
         <Typography
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@ -192,7 +192,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
        )}
        {invite?.isOpen === true && (
          <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
          }} />
        )}
        <Spacer width="15px" />
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@ -269,6 +269,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                  backgroundColor: "var(--green)",
                  color: "black",
                  opacity: 0.7,
+                  fontWeight: 'bold',
                  "&:hover": {
                    backgroundColor: "var(--green)",
                    color: "black",
@ -300,11 +301,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                    onClick={revertChanges}
                    variant="contained"
                    sx={{
-                      backgroundColor: "var(--unread)",
+                      backgroundColor: "var(--danger)",
                      color: "black",
+                      fontWeight: 'bold',
                      opacity: 0.7,
                      "&:hover": {
-                        backgroundColor: "var(--unread)",
+                        backgroundColor: "var(--danger)",
                        color: "black",
                        opacity: 1,
                      },
@ -360,11 +362,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                onClick={saveToQdn}
                variant="contained"
                sx={{
-                  backgroundColor: "var(--unread)",
+                  backgroundColor: "var(--danger)",
                  color: "black",
+                  fontWeight: 'bold',
                  opacity: 0.7,
                  "&:hover": {
-                    backgroundColor: "var(--unread)",
+                    backgroundColor: "var(--danger)",
                    color: "black",
                    opacity: 1,
                  },
--- a/src/index.css
+++ b/src/index.css
@ -34,7 +34,8 @@
  --bg-primary : rgba(31, 32, 35, 1);
  --bg-2: #27282c;
  --bg-3: rgba(0, 0, 0, 0.1);
-  --unread: #B14646;
+  --unread: #4297e2; 
+  --danger: #B14646;
  --apps-circle: #1F2023;
  --green: #5EB049;
 }