Refactor q-app library page

This commit is contained in:
Nicola Benaglia
2025-04-20 18:48:00 +02:00
parent 8cd67ddba7
commit a5c4a2ae75
7 changed files with 156 additions and 109 deletions

View File

@@ -114,7 +114,7 @@ export const AppCircleLabel = styled(Typography)(({ theme }) => ({
}));
export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
fontSize: '16px',
fontWeight: 500,
@@ -158,148 +158,150 @@ export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
}));
export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-end',
}));
export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
backgroundColor: '#247C0E',
color: theme.palette.text.primary,
width: '101px',
height: '29px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '25px',
alignSelf: 'center',
backgroundColor: theme.palette.background.default,
borderRadius: '25px',
color: theme.palette.text.primary,
display: 'flex',
height: '29px',
justifyContent: 'center',
width: '101px',
}));
export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontSize: '14px',
fontWeight: 500,
lineHeight: 1.2,
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
gap: '10px',
flexWrap: 'wrap',
justifyContent: 'flex-start',
width: '100%',
display: 'flex',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
flexWrap: 'wrap',
gap: '10px',
justifyContent: 'flex-start',
width: '100%',
}));
export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
alignItems: 'flex-start',
backgroundColor: theme.palette.background.default,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppInfoAppName = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontSize: '16px',
fontWeight: 500,
lineHeight: 1.2,
textAlign: 'start',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppInfoUserName = styled(Typography)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontSize: '13px',
fontWeight: 400,
lineHeight: 1.2,
textAlign: 'start',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsNavBarParent = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: theme.palette.background.default,
bottom: 0,
color: theme.palette.text.primary,
display: 'flex',
height: '60px',
justifyContent: 'space-between',
padding: '0px 10px',
position: 'fixed',
bottom: 0,
width: '100%',
zIndex: 1,
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexGrow: 1,
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
flexGrow: 1,
justifyContent: 'flex-start',
}));
export const AppsNavBarRight = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-end',
}));
export const TabParent = styled(Box)(({ theme }) => ({
height: '36px',
width: '36px',
position: 'relative',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.palette.background.default,
borderRadius: '50%',
color: theme.palette.text.primary,
display: 'flex',
height: '36px',
justifyContent: 'center',
position: 'relative',
width: '36px',
}));
export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'space-between',
width: '100%',
}));
export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-start',
}));
export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
justifyContent: 'flex-end',
}));
export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
width: '101px',
height: '29px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
borderColor: theme.palette.background.default,
borderRadius: '25px',
border: '1px solid #FFFFFF',
backgroundColor: theme.palette.background.default,
borderStyle: 'solid',
borderWidth: '1px',
color: theme.palette.text.primary,
display: 'flex',
height: '29px',
justifyContent: 'center',
width: '101px',
}));
export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({

View File

@@ -1,46 +1,24 @@
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import {
AppCircle,
AppCircleContainer,
AppCircleLabel,
AppLibrarySubTitle,
AppsContainer,
AppsLibraryContainer,
AppsParent,
AppsSearchContainer,
AppsSearchLeft,
AppsSearchRight,
AppsWidthLimiter,
PublishQAppCTAButton,
PublishQAppCTALeft,
PublishQAppCTAParent,
PublishQAppCTARight,
PublishQAppDotsBG,
} from './Apps-styles';
import { Avatar, Box, ButtonBase, InputBase, styled } from '@mui/material';
import { Add } from '@mui/icons-material';
import { MyContext, getBaseApiReact } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import { ButtonBase, InputBase, styled } from '@mui/material';
import { MyContext } from '../../App';
import IconSearch from '../../assets/svgs/Search.svg';
import IconClearInput from '../../assets/svgs/ClearInput.svg';
import qappDevelopText from '../../assets/svgs/qappDevelopText.svg';
import qappDots from '../../assets/svgs/qappDots.svg';
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';
const officialAppList = [
'q-tube',
'q-blog',

View File

@@ -23,15 +23,16 @@ import {
InputBase,
Typography,
styled,
useTheme,
} from '@mui/material';
import { getBaseApiReact } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import SearchIcon from '@mui/icons-material/Search';
import IconClearInput from '../../assets/svgs/ClearInput.svg';
import qappDevelopText from '../../assets/svgs/qappDevelopText.svg';
import qappLibraryText from '../../assets/svgs/qappLibraryText.svg';
import { QappDevelopText } from '../../assets/Icons/QappDevelopText.tsx';
import { QappLibraryText } from '../../assets/Icons/QappLibraryText.tsx';
import RefreshIcon from '@mui/icons-material/Refresh';
import qappDots from '../../assets/svgs/qappDots.svg';
import AppsIcon from '@mui/icons-material/Apps';
import { Spacer } from '../../common/Spacer';
import { AppInfoSnippet } from './AppInfoSnippet';
import { Virtuoso } from 'react-virtuoso';
@@ -40,11 +41,8 @@ import {
AppsDesktopLibraryBody,
AppsDesktopLibraryHeader,
} from './AppsDesktop-styles';
import {
ComposeP,
MailIconImg,
ShowMessageReturnButton,
} from '../Group/Forum/Mail-styles';
import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles';
import { Theme } from 'emoji-picker-react';
const officialAppList = [
'q-tube',
@@ -107,6 +105,7 @@ export const AppsLibraryDesktop = ({
}) => {
const [searchValue, setSearchValue] = useState('');
const virtuosoRef = useRef();
const theme = useTheme();
const officialApps = useMemo(() => {
return availableQapps.filter(
@@ -181,17 +180,18 @@ export const AppsLibraryDesktop = ({
<AppsWidthLimiter>
<Box
sx={{
alignItems: 'center',
display: 'flex',
width: '100%',
justifyContent: 'space-between',
width: '100%',
}}
>
<img src={qappLibraryText} />
<QappLibraryText />
<Box
sx={{
alignItems: 'center',
display: 'flex',
gap: '20px',
alignItems: 'center',
}}
>
<AppsSearchContainer
@@ -247,10 +247,10 @@ export const AppsLibraryDesktop = ({
<AppsDesktopLibraryBody
sx={{
alignItems: 'center',
height: `calc(100vh - 36px)`,
overflow: 'auto',
padding: '0px',
alignItems: 'center',
}}
>
<AppsDesktopLibraryBody
@@ -306,11 +306,13 @@ export const AppsLibraryDesktop = ({
>
Official Apps
</AppLibrarySubTitle>
<Spacer height="45px" />
<AppsContainer
sx={{
gap: '50px',
justifyContent: 'flex-start',
gap: '15px',
justifyContent: 'center',
}}
>
{officialApps?.map((qapp) => {
@@ -387,7 +389,7 @@ export const AppsLibraryDesktop = ({
textAlign: 'start',
}}
>
{hasPublishApp ? 'Update Apps!' : 'Create Apps!'}
{hasPublishApp ? 'Update your app' : 'Publish your app'}
</AppLibrarySubTitle>
<Spacer height="18px" />
@@ -399,11 +401,12 @@ export const AppsLibraryDesktop = ({
>
<PublishQAppCTALeft>
<PublishQAppDotsBG>
<img src={qappDots} />
<AppsIcon fontSize="large" />
</PublishQAppDotsBG>
<Spacer width="29px" />
<img src={qappDevelopText} />
<QappDevelopText />
</PublishQAppCTALeft>
<PublishQAppCTARight
@@ -433,7 +436,9 @@ export const AppsLibraryDesktop = ({
>
Categories
</AppLibrarySubTitle>
<Spacer height="18px" />
<Box
sx={{
display: 'flex',
@@ -455,18 +460,21 @@ export const AppsLibraryDesktop = ({
<Box
sx={{
alignItems: 'center',
border: '4px solid #10242F',
borderColor: theme.palette.background.paper,
borderRadius: '6px',
borderStyle: 'solid',
borderWidth: '4px',
boxShadow: '2px 4px 0px 0px #000000',
display: 'flex',
height: '60px',
height: '50px',
justifyContent: 'center',
padding: '0px 24px',
padding: '0px 20px',
}}
>
All
</Box>
</ButtonBase>
{categories?.map((category) => {
return (
<ButtonBase
@@ -480,13 +488,15 @@ export const AppsLibraryDesktop = ({
<Box
sx={{
alignItems: 'center',
border: '4px solid #10242F',
borderColor: theme.palette.background.paper,
borderRadius: '6px',
borderStyle: 'solid',
borderWidth: '4px',
boxShadow: '2px 4px 0px 0px #000000',
display: 'flex',
height: '60px',
height: '50px',
justifyContent: 'center',
padding: '0px 24px',
padding: '0px 20px',
}}
>
{category?.name}