From 7a56f3c8033e4193977a6974ed872ff0cf365861 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Sun, 29 Dec 2024 12:25:51 +0200
Subject: [PATCH] batch of updates 5

---
 src/App.tsx                                   | 167 +++++++++++++-----
 src/background.ts                             |   6 +-
 src/common/BoundedNumericTextField.tsx        | 158 +++++++++++++++++
 src/common/numberFunctions.ts                 |  63 +++++++
 src/components/Apps/AppsDesktop.tsx           |  11 +-
 src/components/Group/AddGroupList.tsx         |   2 +-
 src/components/Group/Forum/NewThread.tsx      |   2 -
 src/components/Group/Group.tsx                |  15 +-
 .../Group/ListOfGroupPromotions.tsx           |   2 +-
 src/components/Group/UserListOfInvites.tsx    |   2 +-
 src/index.css                                 |   3 +-
 11 files changed, 367 insertions(+), 64 deletions(-)
 create mode 100644 src/common/BoundedNumericTextField.tsx
 create mode 100644 src/common/numberFunctions.ts

diff --git a/src/App.tsx b/src/App.tsx
index 94a4333..0f74145 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,6 +45,8 @@ import Info from "./assets/svgs/Info.svg";
 import CloseIcon from "@mui/icons-material/Close";
 import { JsonView, allExpanded, darkStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
+import HelpIcon from '@mui/icons-material/Help';
+
 import {
   createAccount,
   generateRandomSentence,
@@ -112,6 +114,7 @@ import { useFetchResources } from "./common/useFetchResources";
 import { Tutorials } from "./components/Tutorials/Tutorials";
 import { useHandleTutorials } from "./components/Tutorials/useHandleTutorials";
 import { CoreSyncStatus } from "./components/CoreSyncStatus";
+import BoundedNumericTextField from "./common/BoundedNumericTextField";
 
 type extStates =
   | "not-authenticated"
@@ -447,7 +450,16 @@ function App() {
     isFocusedRef.current = isFocused;
   }, [isFocused]);
 
- 
+  useEffect(()=> {
+    if(!shownTutorialsInitiated) return
+    if(extState === 'not-authenticated'){
+      showTutorial('create-account')
+    } else if(extState === "create-wallet" && walletToBeDownloaded){
+      showTutorial('important-information')
+    } else if(extState === "authenticated"){
+      showTutorial('getting-started')
+    }
+  }, [extState, walletToBeDownloaded, shownTutorialsInitiated])
 
   // const checkIfUserHasLocalNode = useCallback(async () => {
   //   try {
@@ -532,7 +544,7 @@ function App() {
     let wallet = structuredClone(rawWallet);
 
     const res = await decryptStoredWallet(password, wallet);
-    const wallet2 = new PhraseWallet(res, walletVersion);
+    const wallet2 = new PhraseWallet(res, wallet?.version || walletVersion);
     wallet = await wallet2.generateSaveWalletData(
       password,
       crypto.kdfThreads,
@@ -588,43 +600,54 @@ function App() {
       setLtcBalanceLoading(false);
     });
   };
-  const sendCoinFunc = () => {
-    setSendPaymentError("");
-    setSendPaymentSuccess("");
-    if (!paymentTo) {
-      setSendPaymentError("Please enter a recipient");
-      return;
-    }
-    if (!paymentAmount) {
-      setSendPaymentError("Please enter an amount greater than 0");
-      return;
-    }
-    if (!paymentPassword) {
-      setSendPaymentError("Please enter your wallet password");
-      return;
-    }
-    setIsLoading(true);
-    chrome?.runtime?.sendMessage(
-      {
-        action: "sendCoin",
-        payload: {
-          amount: Number(paymentAmount),
-          receiver: paymentTo.trim(),
-          password: paymentPassword,
-        },
-      },
-      (response) => {
-        if (response?.error) {
-          setSendPaymentError(response.error);
-        } else {
-          setIsOpenSendQort(false);
-          setIsOpenSendQortSuccess(true);
-          // setExtstate("transfer-success-regular");
-          // setSendPaymentSuccess("Payment successfully sent");
-        }
-        setIsLoading(false);
+  const sendCoinFunc = async () => {
+    try {
+      setSendPaymentError("");
+      setSendPaymentSuccess("");
+      if (!paymentTo) {
+        setSendPaymentError("Please enter a recipient");
+        return;
       }
-    );
+      if (!paymentAmount) {
+        setSendPaymentError("Please enter an amount greater than 0");
+        return;
+      }
+      if (!paymentPassword) {
+        setSendPaymentError("Please enter your wallet password");
+        return;
+      }
+      const fee = await getFee('PAYMENT')
+  
+      await show({
+        message: `Would you like to transfer ${Number(paymentAmount)} QORT?` ,
+        paymentFee: fee.fee + ' QORT'
+      })
+      setIsLoading(true);
+      chrome?.runtime?.sendMessage(
+        {
+          action: "sendCoin",
+          payload: {
+            amount: Number(paymentAmount),
+            receiver: paymentTo.trim(),
+            password: paymentPassword,
+          },
+        },
+        (response) => {
+          if (response?.error) {
+            setSendPaymentError(response.error);
+          } else {
+            setIsOpenSendQort(false);
+            setIsOpenSendQortSuccess(true);
+            // setExtstate("transfer-success-regular");
+            // setSendPaymentSuccess("Payment successfully sent");
+          }
+          setIsLoading(false);
+        }
+      );
+    } catch (error) {
+      //error
+    }
+  
   };
 
   const clearAllStates = () => {
@@ -1046,6 +1069,11 @@ function App() {
     try {
       if(hasSettingsChanged){
         await showUnsavedChanges({message: 'Your settings have changed. If you logout you will lose your changes. Click on the save button in the header to keep your changed settings.'})
+      } if(extState === 'authenticated') {
+        await showUnsavedChanges({
+          message:
+            "Are you sure you would like to logout?",
+        });
       }
       chrome?.runtime?.sendMessage({ action: "logout" }, (response) => {
         if (response) {
@@ -1580,6 +1608,23 @@ function App() {
               alignItems: 'center'
             }}
           >
+             {(desktopViewMode === "apps" || desktopViewMode === "home") && (
+               <ButtonBase onClick={()=> {
+                if(desktopViewMode === "apps"){
+                  showTutorial('qapps', true)
+  
+                } else {
+                  showTutorial('create-account', true)
+  
+                }
+                }} >
+                  <HelpIcon sx={{
+                color: 'var(--unread)'
+                 }} />
+                </ButtonBase>
+              )}
+            
+        <Spacer height="20px" />
           <img
             onClick={() => {
               setExtstate("download-wallet");
@@ -1767,12 +1812,14 @@ function App() {
               Amount
             </CustomLabel>
             <Spacer height="5px" />
-            <CustomInput
-              id="standard-adornment-amount"
-              type="number"
+            <BoundedNumericTextField
               value={paymentAmount}
-              onChange={(e) => setPaymentAmount(+e.target.value)}
-              autoComplete="off"
+              minValue={0}
+               maxValue={+balance}
+                allowDecimals={true}
+                initialValue={'0'}
+                allowNegatives={false}
+                afterChange={(e: string) => setPaymentAmount(+e)}
             />
             <Spacer height="6px" />
             <CustomLabel htmlFor="standard-adornment-password">
@@ -2648,19 +2695,27 @@ function App() {
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
         >
-          <DialogTitle id="alert-dialog-title">{"Publish"}</DialogTitle>
+          <DialogTitle id="alert-dialog-title">{message.paymentFee ? "Payment"  : "Publish"}</DialogTitle>
           <DialogContent>
             <DialogContentText id="alert-dialog-description">
               {message.message}
             </DialogContentText>
-            <DialogContentText id="alert-dialog-description2">
-              publish fee: {message.publishFee}
-            </DialogContentText>
+            {message?.paymentFee && (
+               <DialogContentText id="alert-dialog-description2">
+               payment fee: {message.paymentFee}
+             </DialogContentText>
+            )}
+           {message?.publishFee && (
+             <DialogContentText id="alert-dialog-description2">
+             publish fee: {message.publishFee}
+           </DialogContentText>
+           )}
           </DialogContent>
           <DialogActions>
           <Button sx={{
                   backgroundColor: 'var(--green)',
                   color: 'black',
+                  fontWeight: 'bold',
                   opacity: 0.7,
                   '&:hover': {
                     backgroundColor: 'var(--green)',
@@ -2671,11 +2726,12 @@ function App() {
               accept
             </Button>
             <Button 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
                   },
@@ -3038,6 +3094,19 @@ function App() {
         {renderProfile()}
       </DrawerComponent>
       </GlobalContext.Provider>
+      {extState === "create-wallet" && walletToBeDownloaded && (
+         <ButtonBase onClick={()=> {
+          showTutorial('important-information', true)
+       }} sx={{
+         position: 'fixed',
+         bottom: '25px',
+         right: '25px'
+       }}>
+         <HelpIcon sx={{
+           color: 'var(--unread)'
+         }} />
+         </ButtonBase>
+      )}
     </AppContainer>
   );
 }
diff --git a/src/background.ts b/src/background.ts
index d194e7e..2892114 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -2601,14 +2601,14 @@ export async function sendCoin({ password, amount, receiver }, skipConfirmPasswo
       };
     } else {
       const response = await decryptStoredWallet(password, wallet);
-      const wallet2 = new PhraseWallet(response, walletVersion);
+      const wallet2 = new PhraseWallet(response, wallet?.version || walletVersion);
 
       keyPair = wallet2._addresses[0].keyPair;
     }
 
     const lastRef = await getLastRef();
     const fee = await sendQortFee();
-    const validApi = await findUsableApi();
+    const validApi = null;
 
     const res = await makeTransactionRequest(
       confirmReceiver,
@@ -3254,7 +3254,7 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
           decryptWallet({
             password,
             wallet,
-            walletVersion,
+            walletVersion: wallet?.version || walletVersion,
           })
             .then((hasDecrypted) => {
               sendResponse(hasDecrypted);
diff --git a/src/common/BoundedNumericTextField.tsx b/src/common/BoundedNumericTextField.tsx
new file mode 100644
index 0000000..c997f8a
--- /dev/null
+++ b/src/common/BoundedNumericTextField.tsx
@@ -0,0 +1,158 @@
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+} from "@mui/material";
+import React, { useRef, useState } from "react";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import {
+  removeTrailingZeros,
+  setNumberWithinBounds,
+} from "./numberFunctions.ts";
+import { CustomInput } from "../App-styles.ts";
+
+type eventType = React.ChangeEvent<HTMLInputElement>;
+type BoundedNumericTextFieldProps = {
+  minValue: number;
+  maxValue: number;
+  addIconButtons?: boolean;
+  allowDecimals?: boolean;
+  allowNegatives?: boolean;
+  afterChange?: (s: string) => void;
+  initialValue?: string;
+  maxSigDigits?: number;
+} & TextFieldProps;
+
+export const BoundedNumericTextField = ({
+  minValue,
+  maxValue,
+  addIconButtons = true,
+  allowDecimals = true,
+  allowNegatives = false,
+  afterChange,
+  initialValue,
+  maxSigDigits = 6,
+  ...props
+}: BoundedNumericTextFieldProps) => {
+  const [textFieldValue, setTextFieldValue] = useState<string>(
+    initialValue || ""
+  );
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  const stringIsEmpty = (value: string) => {
+    return value === "";
+  };
+  const isAllZerosNum = /^0*\.?0*$/;
+  const isFloatNum = /^-?[0-9]*\.?[0-9]*$/;
+  const isIntegerNum = /^-?[0-9]+$/;
+  const skipMinMaxCheck = (value: string) => {
+    const lastIndexIsDecimal = value.charAt(value.length - 1) === ".";
+    const isEmpty = stringIsEmpty(value);
+    const isAllZeros = isAllZerosNum.test(value);
+    const isInteger = isIntegerNum.test(value);
+    // skipping minMax on all 0s allows values less than 1 to be entered
+
+    return lastIndexIsDecimal || isEmpty || (isAllZeros && !isInteger);
+  };
+
+  const setMinMaxValue = (value: string): string => {
+    if (skipMinMaxCheck(value)) return value;
+    const valueNum = Number(value);
+
+    const boundedNum = setNumberWithinBounds(valueNum, minValue, maxValue);
+
+    const numberInBounds = boundedNum === valueNum;
+    return numberInBounds ? value : boundedNum.toString();
+  };
+
+  const getSigDigits = (number: string) => {
+    if (isIntegerNum.test(number)) return 0;
+    const decimalSplit = number.split(".");
+    return decimalSplit[decimalSplit.length - 1].length;
+  };
+
+  const sigDigitsExceeded = (number: string, sigDigits: number) => {
+    return getSigDigits(number) > sigDigits;
+  };
+
+  const filterTypes = (value: string) => {
+    if (allowDecimals === false) value = value.replace(".", "");
+    if (allowNegatives === false) value = value.replace("-", "");
+    if (sigDigitsExceeded(value, maxSigDigits)) {
+      value = value.substring(0, value.length - 1);
+    }
+    return value;
+  };
+  const filterValue = (value: string) => {
+    if (stringIsEmpty(value)) return "";
+    value = filterTypes(value);
+    if (isFloatNum.test(value)) {
+      return setMinMaxValue(value);
+    }
+    return textFieldValue;
+  };
+
+  const listeners = (e: eventType) => {
+    const newValue = filterValue(e.target.value);
+    setTextFieldValue(newValue);
+    if (afterChange) afterChange(newValue);
+  };
+
+  const changeValueWithIncDecButton = (changeAmount: number) => {
+    const changedValue = (+textFieldValue + changeAmount).toString();
+    const inBoundsValue = setMinMaxValue(changedValue);
+    setTextFieldValue(inBoundsValue);
+    if (afterChange) afterChange(inBoundsValue);
+  };
+
+  const formatValueOnBlur = (e: eventType) => {
+    let value = e.target.value;
+    if (stringIsEmpty(value) || value === ".") {
+      setTextFieldValue("");
+      return;
+    }
+
+    value = setMinMaxValue(value);
+    value = removeTrailingZeros(value);
+    if (isAllZerosNum.test(value)) value = minValue.toString();
+
+    setTextFieldValue(value);
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onChange, ...noChangeProps } = { ...props };
+  return (
+    <CustomInput
+      {...noChangeProps}
+      InputProps={{
+        ...props?.InputProps,
+        endAdornment: addIconButtons ? (
+          <InputAdornment position="end">
+            <IconButton size="small" onClick={() => changeValueWithIncDecButton(1)}>
+              <AddIcon sx={{
+                color: 'white'
+              }} />{" "}
+            </IconButton>
+            <IconButton size="small" onClick={() => changeValueWithIncDecButton(-1)}>
+              <RemoveIcon sx={{
+                color: 'white'
+              }} />{" "}
+            </IconButton>
+          </InputAdornment>
+        ) : (
+          <></>
+        ),
+      }}
+      onChange={e => listeners(e as eventType)}
+      onBlur={e => {
+        formatValueOnBlur(e as eventType);
+      }}
+      autoComplete="off"
+      value={textFieldValue}
+      inputRef={ref}
+    />
+  );
+};
+
+export default BoundedNumericTextField;
diff --git a/src/common/numberFunctions.ts b/src/common/numberFunctions.ts
new file mode 100644
index 0000000..583196c
--- /dev/null
+++ b/src/common/numberFunctions.ts
@@ -0,0 +1,63 @@
+export const truncateNumber = (value: string | number, sigDigits: number) => {
+  return Number(value).toFixed(sigDigits);
+};
+
+export const removeTrailingZeros = (s: string) => {
+  return Number(s).toString();
+};
+
+export const setNumberWithinBounds = (
+  num: number,
+  minValue: number,
+  maxValue: number
+) => {
+  if (num > maxValue) return maxValue;
+  if (num < minValue) return minValue;
+  return num;
+};
+
+export const numberToInt = (num: number) => {
+  return Math.floor(num);
+};
+
+type ByteFormat = "Decimal" | "Binary";
+export function formatBytes(
+  bytes: number,
+  decimals = 2,
+  format: ByteFormat = "Binary"
+) {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = format === "Binary" ? 1024 : 1000;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
+export function formatTime(seconds: number): string {
+  seconds = Math.floor(seconds);
+  const minutes: number | string = Math.floor(seconds / 60);
+  let hours: number | string = Math.floor(minutes / 60);
+
+  let remainingSeconds: number | string = seconds % 60;
+  let remainingMinutes: number | string = minutes % 60;
+
+  if (remainingSeconds < 10) {
+    remainingSeconds = "0" + remainingSeconds;
+  }
+
+  if (remainingMinutes < 10) {
+    remainingMinutes = "0" + remainingMinutes;
+  }
+
+  if (hours === 0) {
+    hours = "";
+  } else {
+    hours = hours + ":";
+  }
+
+  return hours + remainingMinutes + ":" + remainingSeconds;
+}
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index 8d01024..22f514a 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AppsHomeDesktop } from "./AppsHomeDesktop";
 import { Spacer } from "../../common/Spacer";
-import { MyContext, getBaseApiReact } from "../../App";
+import { GlobalContext, MyContext, getBaseApiReact } from "../../App";
 import { AppInfo } from "./AppInfo";
 import {
   executeEvent,
@@ -32,6 +32,8 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
   const [isNewTabWindow, setIsNewTabWindow] = useState(false);
   const [categories, setCategories] = useState([])
   const iframeRefs = useRef({});
+  const { showTutorial } = useContext(GlobalContext);
+
   const myApp = useMemo(()=> {
    
    return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
@@ -53,6 +55,13 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
     }, 100);
   }, [show, tabs, selectedTab, isNewTabWindow]);
 
+  useEffect(()=> {
+    if(show){
+      showTutorial('qapps')
+    }
+  }, [show])
+
+
   const getCategories = React.useCallback(async () => {
     try {
       const url = `${getBaseApiReact()}/arbitrary/categories`;
diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx
index 18dd67f..a358c58 100644
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -230,7 +230,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
         )}
         {group?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
         <Spacer width="15px" />
diff --git a/src/components/Group/Forum/NewThread.tsx b/src/components/Group/Forum/NewThread.tsx
index cb3db62..738cfb1 100644
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@@ -538,14 +538,12 @@ export const NewThread = ({
             </NewMessageSendP>
             {isMessage ? (
               <SendNewMessage
-                color="red"
                 opacity={1}
                 height="25px"
                 width="25px"
               />
             ) : (
               <CreateThreadIcon
-                color="red"
                 opacity={1}
                 height="25px"
                 width="25px"
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index e3dc8f4..9f564fb 100644
--- 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;
@@ -1318,6 +1318,7 @@ export const Group = ({
     setSecretKeyDetails(null);
     setNewEncryptionNotification(null);
     setMemberCountFromSecretKeyData(null);
+    setIsForceShowCreationKeyPopup(false)
     setSelectedGroup(null);
     setSelectedDirect(null);
     setGroups([]);
@@ -1384,6 +1385,7 @@ export const Group = ({
     setAdminsWithNames([]);
     setMembers([]);
     setMemberCountFromSecretKeyData(null);
+    setIsForceShowCreationKeyPopup(false)
     setTriedToFetchSecretKey(false);
     setFirstSecretKeyInCreation(false);
     setIsOpenSideViewDirects(false)
@@ -1439,6 +1441,7 @@ export const Group = ({
       setAdminsWithNames([]);
       setMembers([]);
       setMemberCountFromSecretKeyData(null);
+      setIsForceShowCreationKeyPopup(false)
       setTriedToFetchSecretKey(false);
       setFirstSecretKeyInCreation(false);
       setGroupSection("chat");
@@ -1490,6 +1493,7 @@ export const Group = ({
       setAdminsWithNames([]);
       setMembers([]);
       setMemberCountFromSecretKeyData(null);
+      setIsForceShowCreationKeyPopup(false)
       setTriedToFetchSecretKey(false);
       setFirstSecretKeyInCreation(false);
       setGroupSection("announcement");
@@ -1551,6 +1555,7 @@ export const Group = ({
       setAdminsWithNames([]);
       setMembers([]);
       setMemberCountFromSecretKeyData(null);
+      setIsForceShowCreationKeyPopup(false)
       setTriedToFetchSecretKey(false);
       setFirstSecretKeyInCreation(false);
       setGroupSection("forum");
@@ -1607,6 +1612,7 @@ export const Group = ({
     setAdminsWithNames([]);
     setMembers([]);
     setMemberCountFromSecretKeyData(null);
+    setIsForceShowCreationKeyPopup(false)
     setTriedToFetchSecretKey(false);
     setFirstSecretKeyInCreation(false);
     setIsOpenSideViewDirects(false)
@@ -1843,7 +1849,7 @@ export const Group = ({
                         direct?.timestamp) && (
                       <MarkChatUnreadIcon
                         sx={{
-                          color: "red",
+                          color: "var(--unread)",
                         }}
                       />
                     )}
@@ -2105,6 +2111,7 @@ export const Group = ({
                   setGroupOwner(null)
                   setMembers([]);
                   setMemberCountFromSecretKeyData(null);
+                  setIsForceShowCreationKeyPopup(false)
                   setHideCommonKeyPopup(false);
                   setFirstSecretKeyInCreation(false);
                   // setGroupSection("announcement");
@@ -2226,7 +2233,7 @@ export const Group = ({
                       !groupAnnouncements[group?.groupId]?.seentimestamp && (
                         <CampaignIcon
                           sx={{
-                            color: "red",
+                             color: "var(--unread)",
                             marginRight: "5px",
                           }}
                         />
@@ -2242,7 +2249,7 @@ export const Group = ({
                           group?.timestamp) && (
                         <MarkChatUnreadIcon
                           sx={{
-                            color: "red",
+                             color: "var(--unread)",
                           }}
                         />
                       )}
diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx
index 9674730..84aca1c 100644
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@@ -499,7 +499,7 @@ export const ListOfGroupPromotions = () => {
         )}
         {promotion?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
          <Typography
diff --git a/src/components/Group/UserListOfInvites.tsx b/src/components/Group/UserListOfInvites.tsx
index 173aae0..9c98358 100644
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@@ -182,7 +182,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
         )}
         {invite?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
         <Spacer width="15px" />
diff --git a/src/index.css b/src/index.css
index 01919fc..e7acaf6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,11 +34,10 @@
   --bg-primary : rgba(31, 32, 35, 1);
   --bg-2: #27282c;
   --bg-3: rgba(0, 0, 0, 0.1);
-  --unread: #B14646;
+  --unread: #4297e2;
   --apps-circle: #1F2023;
   --green: #5EB049;
   --danger: #B14646;
-
 }
 
 body {