From a5c4a2ae75edf1821074e87e864e6430f4a6ed46 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sun, 20 Apr 2025 18:48:00 +0200 Subject: [PATCH] Refactor q-app library page --- src/assets/Icons/QappDevelopText.tsx | 30 ++++++ src/assets/Icons/QappLibraryText.tsx | 34 ++++++ src/assets/svgs/qappDevelopText.svg | 3 - src/assets/svgs/qappLibraryText.svg | 4 - src/components/Apps/Apps-styles.tsx | 108 ++++++++++---------- src/components/Apps/AppsCategoryDesktop.tsx | 30 +----- src/components/Apps/AppsLibraryDesktop.tsx | 56 +++++----- 7 files changed, 156 insertions(+), 109 deletions(-) create mode 100644 src/assets/Icons/QappDevelopText.tsx create mode 100644 src/assets/Icons/QappLibraryText.tsx delete mode 100644 src/assets/svgs/qappDevelopText.svg delete mode 100644 src/assets/svgs/qappLibraryText.svg diff --git a/src/assets/Icons/QappDevelopText.tsx b/src/assets/Icons/QappDevelopText.tsx new file mode 100644 index 0000000..e0856cf --- /dev/null +++ b/src/assets/Icons/QappDevelopText.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material'; +import { SVGProps } from './interfaces'; + +export const QappDevelopText: React.FC = ({ + color, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + ); +}; diff --git a/src/assets/Icons/QappLibraryText.tsx b/src/assets/Icons/QappLibraryText.tsx new file mode 100644 index 0000000..146717e --- /dev/null +++ b/src/assets/Icons/QappLibraryText.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material'; +import { SVGProps } from './interfaces'; + +export const QappLibraryText: React.FC = ({ + color, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + + ); +}; diff --git a/src/assets/svgs/qappDevelopText.svg b/src/assets/svgs/qappDevelopText.svg deleted file mode 100644 index 3aa786a..0000000 --- a/src/assets/svgs/qappDevelopText.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/qappLibraryText.svg b/src/assets/svgs/qappLibraryText.svg deleted file mode 100644 index 297c466..0000000 --- a/src/assets/svgs/qappLibraryText.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index cc0f299..056308d 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -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 }) => ({ diff --git a/src/components/Apps/AppsCategoryDesktop.tsx b/src/components/Apps/AppsCategoryDesktop.tsx index 754630e..738b561 100644 --- a/src/components/Apps/AppsCategoryDesktop.tsx +++ b/src/components/Apps/AppsCategoryDesktop.tsx @@ -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', diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index b2d170b..3960f25 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -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 = ({ - + Official Apps + + {officialApps?.map((qapp) => { @@ -387,7 +389,7 @@ export const AppsLibraryDesktop = ({ textAlign: 'start', }} > - {hasPublishApp ? 'Update Apps!' : 'Create Apps!'} + {hasPublishApp ? 'Update your app' : 'Publish your app'} @@ -399,11 +401,12 @@ export const AppsLibraryDesktop = ({ > - + - + + Categories + + All + {categories?.map((category) => { return ( {category?.name}