Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-28 13:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply theme to app pages

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-20 19:33:38 +02:00
parent e8ccfb3d46
commit 8d20f1a6db
7 changed files with 88 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Apps/AppInfo.tsx
View File

@ -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 }) => {
</Avatar>
</AppCircle>
</AppCircleContainer>
<AppInfoSnippetMiddle>
<AppInfoAppName>
{app?.metadata?.title || app?.name}
</AppInfoAppName>
<Spacer height="6px" />
<AppInfoUserName>{app?.name}</AppInfoUserName>
<Spacer height="3px" />
</AppInfoSnippetMiddle>
</AppInfoSnippetLeft>
<AppInfoSnippetRight></AppInfoSnippetRight>
</AppInfoSnippetContainer>
<Spacer height="11px" />
<Box
sx={{
@ -159,11 +163,11 @@ export const AppInfo = ({ app, myName }) => {
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%',
}}
>
<AppDownloadButtonText>
@ -172,6 +176,7 @@ export const AppInfo = ({ app, myName }) => {
: 'Pin to dashboard'}
</AppDownloadButtonText>
</AppDownloadButton>
<AppDownloadButton
onClick={() => {
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%',
}}
>
<AppDownloadButtonText>
@ -191,25 +198,41 @@ export const AppInfo = ({ app, myName }) => {
</AppDownloadButton>
</Box>
</AppsWidthLimiter>
<Spacer height="20px" />
<AppsWidthLimiter>
<AppsCategoryInfo>
<AppRating ratingCountPosition="top" myName={myName} app={app} />
<Spacer width="16px" />
<Spacer height="40px" width="1px" backgroundColor="white" />
<Spacer
backgroundColor={theme.palette.background.paper}
height="40px"
width="1px"
/>
<Spacer width="16px" />
<AppsCategoryInfoSub>
<AppsCategoryInfoLabel>Category:</AppsCategoryInfoLabel>
<Spacer height="4px" />
<AppsCategoryInfoValue>
{app?.metadata?.categoryName || 'none'}
</AppsCategoryInfoValue>
</AppsCategoryInfoSub>
</AppsCategoryInfo>
<Spacer height="30px" />
<AppInfoAppName>About this Q-App</AppInfoAppName>
</AppsWidthLimiter>
<Spacer height="20px" />
<AppsInfoDescription>
{app?.metadata?.description || 'No description'}
</AppsInfoDescription>

17
src/components/Apps/AppInfoSnippet.tsx
View File

@ -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 (
<AppInfoSnippetContainer
sx={{
@ -96,6 +97,7 @@ export const AppInfoSnippet = ({
</AppCircle>
</AppCircleContainer>
</ButtonBase>
<AppInfoSnippetMiddle>
<ButtonBase
onClick={() => {
@ -112,12 +114,17 @@ export const AppInfoSnippet = ({
>
<AppInfoAppName>{app?.metadata?.title || app?.name}</AppInfoAppName>
</ButtonBase>
<Spacer height="6px" />
<AppInfoUserName>{app?.name}</AppInfoUserName>
<Spacer height="3px" />
<AppRating app={app} myName={myName} />
</AppInfoSnippetMiddle>
</AppInfoSnippetLeft>
<AppInfoSnippetRight
sx={{
gap: '10px',
@ -157,7 +164,7 @@ export const AppInfoSnippet = ({
setSettingsLocalLastUpdated(Date.now());
}}
sx={{
backgroundColor: '#359ff7ff',
backgroundColor: theme.palette.background.paper,
opacity: isSelectedAppPinned ? 0.6 : 1,
}}
>
@ -174,7 +181,9 @@ export const AppInfoSnippet = ({
});
}}
sx={{
backgroundColor: isInstalled ? '#0091E1' : '#247C0E',
backgroundColor: isInstalled
? '#0091E1'
: theme.palette.background.paper,
}}
>
<AppDownloadButtonText>

2
src/components/Apps/AppRating.tsx
View File

@ -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}`];

24
src/components/Apps/Apps-styles.tsx
View File

@ -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,

17
src/components/Apps/AppsCategoryDesktop.tsx
View File

@ -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 = ({
<InputBase
value={searchValue}
onChange={(e) => 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',

24
src/components/Apps/AppsDesktop-styles.tsx
View File

@ -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%'
}));

14
src/components/Apps/AppsLibraryDesktop.tsx
View File

@ -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 = ({
<InputBase
value={searchValue}
onChange={(e) => 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',