mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-24 10:41:24 +00:00
Refactor q-app library page
This commit is contained in:
@@ -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 }) => ({
|
||||
|
@@ -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',
|
||||
|
@@ -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}
|
||||
|
Reference in New Issue
Block a user