more color changes

src/components/Apps/AppInfo.tsx

@@ -186,7 +186,7 @@ export const AppInfo = ({ app, myName }) => {
               }}
               sx={{
                 backgroundColor: isInstalled
-                  ? '#0091E1'
+                  ? theme.palette.primary.main
                   : theme.palette.background.paper,
                 height: '29px',
                 maxWidth: '320px',

src/components/Apps/AppInfoSnippet.tsx

@@ -183,7 +183,7 @@ export const AppInfoSnippet = ({
           }}
           sx={{
             backgroundColor: isInstalled
-              ? '#0091E1'
+              ? theme.palette.primary.main
               : theme.palette.background.paper,
           }}
         >

src/components/Apps/Apps-styles.tsx

@@ -75,7 +75,7 @@ export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
 
 export const AppsSearchContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   borderRadius: '8px',
   color: theme.palette.text.primary,
   display: 'flex',
@@ -87,7 +87,7 @@ export const AppsSearchContainer = styled(Box)(({ theme }) => ({
 
 export const AppsSearchLeft = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   flexGrow: 1,
@@ -99,7 +99,7 @@ export const AppsSearchLeft = styled(Box)(({ theme }) => ({
 
 export const AppsSearchRight = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   flexShrink: 1,

src/components/Apps/AppsLibraryDesktop.tsx

@@ -39,7 +39,8 @@ import { Spacer } from '../../common/Spacer';
 import { AppInfoSnippet } from './AppInfoSnippet';
 import { Virtuoso } from 'react-virtuoso';
 import { executeEvent } from '../../utils/events';
-import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles';
+import { ComposeP, ShowMessageReturnButton } from '../Group/Forum/Mail-styles';
+import { ReturnIcon } from '../../assets/Icons/ReturnIcon.tsx';
 
 const officialAppList = [
   'q-tube',
@@ -273,7 +274,10 @@ export const AppsLibraryDesktop = ({
             onClick={() => {
               executeEvent('navigateBack', {});
             }}
-          ></ShowMessageReturnButton>
+          >
+            <ReturnIcon />
+            <ComposeP>Return to Apps Dashboard</ComposeP>
+          </ShowMessageReturnButton>
 
           <Spacer height="20px" />
 

src/components/Chat/ChatOptions.tsx

@@ -24,7 +24,7 @@ import {
   AppsSearchLeft,
   AppsSearchRight,
 } from '../Apps/Apps-styles';
-import IconSearch from '../../assets/svgs/Search.svg';
+
 import IconClearInput from '../../assets/svgs/ClearInput.svg';
 import { CellMeasurerCache } from 'react-virtualized';
 import { getBaseApiReact } from '../../App';
@@ -398,7 +398,11 @@ export const ChatOptions = ({
         >
           <AppsSearchContainer>
             <AppsSearchLeft>
-              <img src={IconSearch} />
+              <SearchIcon
+                sx={{
+                  color: theme.palette.text.primary,
+                }}
+              />
               <InputBase
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}

src/components/ContextMenuPinnedApps.tsx

@@ -5,6 +5,7 @@ import {
   MenuItem,
   Typography,
   styled,
+  useTheme,
 } from '@mui/material';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import { saveToLocalStorage } from './Apps/AppsNavBarDesktop';
@@ -13,7 +14,6 @@ import { sortablePinnedAppsAtom } from '../atoms/global';
 
 const CustomStyledMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
-    backgroundColor: '#f9f9f9',
     borderRadius: '12px',
     padding: theme.spacing(1),
     boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
@@ -23,7 +23,7 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
     color: '#444',
     transition: '0.3s background-color',
     '&:hover': {
-      backgroundColor: '#f0f0f0',
+      backgroundColor: theme.palette.action.hover,
     },
   },
 }));
@@ -37,6 +37,7 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
   const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(
     sortablePinnedAppsAtom
   );
+  const theme = useTheme();
 
   const handleContextMenu = (event) => {
     if (isMine) return;
@@ -170,9 +171,14 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
           }}
         >
           <ListItemIcon sx={{ minWidth: '32px' }}>
-            <PushPinIcon fontSize="small" />
+            <PushPinIcon
+              sx={{
+                color: theme.palette.text.primary,
+              }}
+              fontSize="small"
+            />
           </ListItemIcon>
-          <Typography variant="inherit" sx={{ fontSize: '14px' }}>
+          <Typography sx={{ fontSize: '14px' }} color="text.primary">
             Unpin app
           </Typography>
         </MenuItem>

src/components/Group/Forum/DisplayHtml.tsx

@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-import DOMPurify from 'dompurify';
-import 'react-quill/dist/quill.snow.css';
-import 'react-quill/dist/quill.core.css';
-import 'react-quill/dist/quill.bubble.css';
-import { Box, styled } from '@mui/material';
-import { convertQortalLinks } from '../../../utils/qortalLink';
-
-const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  fontFamily: 'Mulish',
-  fontSize: '19px',
-  fontWeight: 400,
-  letterSpacing: 0,
-  color: theme.palette.text.primary,
-  width: '100%',
-}));
-
-export const DisplayHtml = ({ html, textColor }: any) => {
-  const cleanContent = useMemo(() => {
-    if (!html) return null;
-
-    const sanitize: string = DOMPurify.sanitize(html, {
-      USE_PROFILES: { html: true },
-    });
-    const anchorQortal = convertQortalLinks(sanitize);
-    return anchorQortal;
-  }, [html]);
-
-  if (!cleanContent) return null;
-
-  return (
-    <CrowdfundInlineContent>
-      <div
-        className="ql-editor-display"
-        style={{
-          color: textColor || 'white',
-          fontWeight: 400,
-          fontSize: '16px',
-        }}
-        dangerouslySetInnerHTML={{ __html: cleanContent }}
-      />
-    </CrowdfundInlineContent>
-  );
-};

src/components/Group/Forum/GroupMail.tsx

@@ -681,8 +681,8 @@ export const GroupMail = ({
             <RefreshIcon
               onClick={refetchThreadsLists}
               sx={{
-                color: 'white',
                 cursor: 'pointer',
+                color: theme.palette.text.primary,
               }}
             />
           </Box>

src/components/Group/Forum/Thread.tsx

@@ -29,7 +29,6 @@ import {
 } from './Mail-styles';
 import { Spacer } from '../../../common/Spacer';
 import { threadIdentifier } from './GroupMail';
-import ReturnSVG from '../../../assets/svgs/Return.svg';
 import { NewThread } from './NewThread';
 import {
   decryptPublishes,

src/components/Group/WalletsAppWrapper.tsx

@@ -1,4 +1,4 @@
-import { Box, ButtonBase, Divider, Typography } from '@mui/material';
+import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import AppViewerContainer from '../Apps/AppViewerContainer';
@@ -25,7 +25,7 @@ export const WalletsAppWrapper = () => {
     service: 'APP',
     path: 'qortal?authOnMount=true',
   });
-
+  const theme = useTheme();
   const isDisableBackButton = useMemo(() => {
     if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack)
       return false;
@@ -62,7 +62,7 @@ export const WalletsAppWrapper = () => {
             position: 'fixed',
             height: '100vh',
             width: '100vw',
-            backgroundColor: '#27282c', // TODO: set color theme
+            backgroundColor: theme.palette.background.paper, // TODO: set color theme
             zIndex: 100,
             bottom: 0,
             right: 0,
@@ -92,7 +92,7 @@ export const WalletsAppWrapper = () => {
               <ButtonBase onClick={handleClose}>
                 <CloseIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   }}
                 />
               </ButtonBase>