diff --git a/src/assets/Icons/StarEmpty.tsx b/src/assets/Icons/StarEmpty.tsx index d69ad49..fdd0f0c 100644 --- a/src/assets/Icons/StarEmpty.tsx +++ b/src/assets/Icons/StarEmpty.tsx @@ -1,4 +1,9 @@ +import { useTheme } from '@mui/material'; + export const StarEmptyIcon = () => { + const theme = useTheme(); + + const setColor = theme.palette.text.secondary; return ( { > ); diff --git a/src/assets/Icons/StarFilled.tsx b/src/assets/Icons/StarFilled.tsx index 90cab45..b6645cf 100644 --- a/src/assets/Icons/StarFilled.tsx +++ b/src/assets/Icons/StarFilled.tsx @@ -1,4 +1,9 @@ +import { useTheme } from '@mui/material'; + export const StarFilledIcon = () => { + const theme = useTheme(); + + const setColor = theme.palette.text.primary; return ( { > ); diff --git a/src/assets/svgs/Copy.svg b/src/assets/svgs/Copy.svg deleted file mode 100644 index 0348fc9..0000000 --- a/src/assets/svgs/Copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Forum.svg b/src/assets/svgs/Forum.svg deleted file mode 100644 index 7957b06..0000000 --- a/src/assets/svgs/Forum.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Info.svg b/src/assets/svgs/Info.svg deleted file mode 100644 index 63f9bfc..0000000 --- a/src/assets/svgs/Info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/ModalClose.svg b/src/assets/svgs/ModalClose.svg deleted file mode 100644 index 1a8b18e..0000000 --- a/src/assets/svgs/ModalClose.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Return.svg b/src/assets/svgs/Return.svg deleted file mode 100644 index e4ff9b3..0000000 --- a/src/assets/svgs/Return.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Search.svg b/src/assets/svgs/Search.svg deleted file mode 100644 index b6cb06b..0000000 --- a/src/assets/svgs/Search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index f9e72b3..17f9b7e 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/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', diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx index dfe4ea6..8aaf33d 100644 --- a/src/components/Apps/AppInfoSnippet.tsx +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -183,7 +183,7 @@ export const AppInfoSnippet = ({ }} sx={{ backgroundColor: isInstalled - ? '#0091E1' + ? theme.palette.primary.main : theme.palette.background.paper, }} > diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 40192a3..dd10e36 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/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, diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index f09e7c1..3490e89 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/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', {}); }} - > + > + + Return to Apps Dashboard + diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index c70dbff..49d5150 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/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 = ({ > - + setSearchValue(e.target.value)} diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx index 7dad268..3e2c2be 100644 --- a/src/components/ContextMenuPinnedApps.tsx +++ b/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 }) => { }} > - + - + Unpin app diff --git a/src/components/Group/Forum/DisplayHtml.tsx b/src/components/Group/Forum/DisplayHtml.tsx deleted file mode 100644 index 786672a..0000000 --- a/src/components/Group/Forum/DisplayHtml.tsx +++ /dev/null @@ -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 ( - -
- - ); -}; diff --git a/src/components/Group/Forum/GroupMail.tsx b/src/components/Group/Forum/GroupMail.tsx index fcc0a09..d6a3700 100644 --- a/src/components/Group/Forum/GroupMail.tsx +++ b/src/components/Group/Forum/GroupMail.tsx @@ -681,8 +681,8 @@ export const GroupMail = ({ diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx index 266edb6..a086a0b 100644 --- a/src/components/Group/Forum/Thread.tsx +++ b/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, diff --git a/src/components/Group/WalletsAppWrapper.tsx b/src/components/Group/WalletsAppWrapper.tsx index c569425..82e6660 100644 --- a/src/components/Group/WalletsAppWrapper.tsx +++ b/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 = () => {