From 8d20f1a6dba0cf9301737fc9c5ba378bef94f9b1 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 19:33:38 +0200 Subject: [PATCH] Apply theme to app pages --- src/components/Apps/AppInfo.tsx | 43 ++++++++++++++++----- src/components/Apps/AppInfoSnippet.tsx | 17 ++++++-- src/components/Apps/AppRating.tsx | 2 + src/components/Apps/Apps-styles.tsx | 24 ++++++++++-- src/components/Apps/AppsCategoryDesktop.tsx | 17 +++++--- src/components/Apps/AppsDesktop-styles.tsx | 24 ------------ src/components/Apps/AppsLibraryDesktop.tsx | 14 ++++--- 7 files changed, 88 insertions(+), 53 deletions(-) delete mode 100644 src/components/Apps/AppsDesktop-styles.tsx diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index aab351d..53a155a 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -7,7 +7,6 @@ import { AppInfoSnippetContainer, AppInfoSnippetLeft, AppInfoSnippetMiddle, - AppInfoSnippetRight, AppInfoUserName, AppsCategoryInfo, AppsCategoryInfoLabel, @@ -17,7 +16,7 @@ import { AppsLibraryContainer, AppsWidthLimiter, } from './Apps-styles'; -import { Avatar, Box } from '@mui/material'; +import { Avatar, Box, useTheme } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import { Spacer } from '../../common/Spacer'; @@ -35,6 +34,7 @@ export const AppInfo = ({ app, myName }) => { const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( sortablePinnedAppsAtom ); + const theme = useTheme(); const isSelectedAppPinned = !!sortablePinnedApps?.find( (item) => item?.name === app?.name && item?.service === app?.service @@ -104,17 +104,21 @@ export const AppInfo = ({ app, myName }) => { + {app?.metadata?.title || app?.name} + + {app?.name} + - + { setSettingsLocalLastUpdated(Date.now()); }} sx={{ - backgroundColor: '#359ff7ff', - width: '100%', - maxWidth: '320px', + backgroundColor: theme.palette.background.paper, height: '29px', + maxWidth: '320px', opacity: isSelectedAppPinned ? 0.6 : 1, + width: '100%', }} > @@ -172,6 +176,7 @@ export const AppInfo = ({ app, myName }) => { : 'Pin to dashboard'} + { executeEvent('addTab', { @@ -179,10 +184,12 @@ export const AppInfo = ({ app, myName }) => { }); }} sx={{ - backgroundColor: isInstalled ? '#0091E1' : '#247C0E', - width: '100%', - maxWidth: '320px', + backgroundColor: isInstalled + ? '#0091E1' + : theme.palette.background.paper, height: '29px', + maxWidth: '320px', + width: '100%', }} > @@ -191,25 +198,41 @@ export const AppInfo = ({ app, myName }) => { + + + - + + + + Category: + + {app?.metadata?.categoryName || 'none'} + + About this Q-App + + {app?.metadata?.description || 'No description'} diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx index 2b3b17c..c877bba 100644 --- a/src/components/Apps/AppInfoSnippet.tsx +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { AppCircle, AppCircleContainer, @@ -11,7 +10,7 @@ import { AppInfoSnippetRight, AppInfoUserName, } from './Apps-styles'; -import { Avatar, ButtonBase } from '@mui/material'; +import { Avatar, ButtonBase, useTheme } from '@mui/material'; import { getBaseApiReact } from '../../App'; import LogoSelected from '../../assets/svgs/LogoSelected.svg'; import { Spacer } from '../../common/Spacer'; @@ -41,6 +40,8 @@ export const AppInfoSnippet = ({ const setSettingsLocalLastUpdated = useSetRecoilState( settingsLocalLastUpdatedAtom ); + const theme = useTheme(); + return ( + { @@ -112,12 +114,17 @@ export const AppInfoSnippet = ({ > {app?.metadata?.title || app?.name} + + {app?.name} + + + @@ -174,7 +181,9 @@ export const AppInfoSnippet = ({ }); }} sx={{ - backgroundColor: isInstalled ? '#0091E1' : '#247C0E', + backgroundColor: isInstalled + ? '#0091E1' + : theme.palette.background.paper, }} > diff --git a/src/components/Apps/AppRating.tsx b/src/components/Apps/AppRating.tsx index abf1bba..191650d 100644 --- a/src/components/Apps/AppRating.tsx +++ b/src/components/Apps/AppRating.tsx @@ -91,6 +91,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => { } } }, []); + useEffect(() => { if (hasCalledRef.current) return; if (!app) return; @@ -108,6 +109,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => { message: `Would you like to rate this app a rating of ${newValue}?. It will create a POLL tx.`, publishFee: fee.fee + ' QORT', }); + if (hasPublishedRating === false) { const pollName = `app-library-${app.service}-rating-${app.name}`; const pollOptions = [`1, 2, 3, 4, 5, initialValue-${newValue}`]; diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 45fd02c..a335810 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -36,6 +36,24 @@ export const AppsContainer = styled(Box)(({ theme }) => ({ width: '90%', })); +export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + display: 'flex', + flexDirection: 'column', + flexShrink: 0, + width: '100%', +})); + +export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + width: '100%', +})); + export const AppsLibraryContainer = styled(Box)(({ theme }) => ({ alignItems: 'center', backgroundColor: theme.palette.background.default, @@ -177,13 +195,11 @@ export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ width: '101px', })); -export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - color: theme.palette.text.primary, +export const AppDownloadButtonText = styled(Typography)({ fontSize: '14px', fontWeight: 500, lineHeight: 1.2, -})); +}); export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 25d7ca3..5103488 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -1,23 +1,21 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { AppLibrarySubTitle, + AppsDesktopLibraryBody, + AppsDesktopLibraryHeader, AppsLibraryContainer, AppsSearchContainer, AppsSearchLeft, AppsSearchRight, AppsWidthLimiter, } from './Apps-styles'; -import { ButtonBase, InputBase, styled } from '@mui/material'; +import { ButtonBase, InputBase, styled, useTheme } from '@mui/material'; import { MyContext } from '../../App'; import SearchIcon from '@mui/icons-material/Search'; import IconClearInput from '../../assets/svgs/ClearInput.svg'; import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; -import { - AppsDesktopLibraryBody, - AppsDesktopLibraryHeader, -} from './AppsDesktop-styles'; const ScrollerStyled = styled('div')({ // Hide scrollbar for WebKit browsers (Chrome, Safari) @@ -60,6 +58,7 @@ export const AppsCategoryDesktop = ({ }) => { const [searchValue, setSearchValue] = useState(''); const virtuosoRef = useRef(); + const theme = useTheme(); const { rootHeight } = useContext(MyContext); const categoryList = useMemo(() => { @@ -148,7 +147,13 @@ export const AppsCategoryDesktop = ({ setSearchValue(e.target.value)} - sx={{ ml: 1, flex: 1 }} + sx={{ + background: theme.palette.background.paper, + borderRadius: '6px', + flex: 1, + ml: 1, + paddingLeft: '12px', + }} placeholder="Search for apps" inputProps={{ 'aria-label': 'Search for apps', diff --git a/src/components/Apps/AppsDesktop-styles.tsx b/src/components/Apps/AppsDesktop-styles.tsx deleted file mode 100644 index 26cb567..0000000 --- a/src/components/Apps/AppsDesktop-styles.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { - AppBar, - Button, - Toolbar, - Typography, - Box, - TextField, - InputLabel, - ButtonBase, - } from "@mui/material"; - import { styled } from "@mui/system"; - - export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: 'column', - flexShrink: 0, - width: '100%' - })); - export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({ - display: "flex", - flexDirection: 'column', - flexGrow: 1, - width: '100%' - })); \ No newline at end of file diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 6d5c3ec..1c6206e 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -5,6 +5,8 @@ import { AppCircleLabel, AppLibrarySubTitle, AppsContainer, + AppsDesktopLibraryBody, + AppsDesktopLibraryHeader, AppsLibraryContainer, AppsSearchContainer, AppsSearchLeft, @@ -37,10 +39,6 @@ import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; import { executeEvent } from '../../utils/events'; -import { - AppsDesktopLibraryBody, - AppsDesktopLibraryHeader, -} from './AppsDesktop-styles'; import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; const officialAppList = [ @@ -204,7 +202,13 @@ export const AppsLibraryDesktop = ({ setSearchValue(e.target.value)} - sx={{ ml: 1, flex: 1 }} + sx={{ + background: theme.palette.background.paper, + borderRadius: '6px', + flex: 1, + ml: 1, + paddingLeft: '12px', + }} placeholder="Search for apps" inputProps={{ 'aria-label': 'Search for apps',