Refactor q-app library page

2025-07-24 10:41:24 +00:00 · 2025-04-20 18:48:00 +02:00
parent 8cd67ddba7
commit a5c4a2ae75
7 changed files with 156 additions and 109 deletions
--- 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 }) => ({
--- 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',
--- 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 = ({
        <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}