Refactor q-app library component style

src/components/Apps/Apps-styles.tsx

@@ -38,7 +38,7 @@ export const AppsContainer = styled(Box)(({ theme }) => ({
 
 export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-start',
@@ -114,7 +114,7 @@ export const AppCircleLabel = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   fontSize: '16px',
   fontWeight: 500,

src/components/Apps/AppsCategoryDesktop.tsx

@@ -9,7 +9,7 @@ import {
 } from './Apps-styles';
 import { ButtonBase, InputBase, styled } from '@mui/material';
 import { MyContext } from '../../App';
-import IconSearch from '../../assets/svgs/Search.svg';
+import SearchIcon from '@mui/icons-material/Search';
 import IconClearInput from '../../assets/svgs/ClearInput.svg';
 import { Spacer } from '../../common/Spacer';
 import { AppInfoSnippet } from './AppInfoSnippet';
@@ -19,22 +19,6 @@ import {
   AppsDesktopLibraryHeader,
 } from './AppsDesktop-styles';
 
-const officialAppList = [
-  'q-tube',
-  'q-blog',
-  'q-share',
-  'q-support',
-  'q-mail',
-  'q-fund',
-  'q-shop',
-  'q-trade',
-  'q-support',
-  'q-manager',
-  'q-wallets',
-  'q-search',
-  'q-nodecontrol',
-];
-
 const ScrollerStyled = styled('div')({
   // Hide scrollbar for WebKit browsers (Chrome, Safari)
   '::-webkit-scrollbar': {
@@ -136,15 +120,15 @@ export const AppsCategoryDesktop = ({
     <AppsLibraryContainer
       sx={{
         display: !isShow && 'none',
-        padding: '0px',
         height: '100vh',
         overflow: 'hidden',
+        padding: '0px',
         paddingTop: '30px',
       }}
     >
       <AppsDesktopLibraryHeader
         sx={{
-          maxWidth: '1500px',
+          maxWidth: '1200px',
           width: '90%',
         }}
       >
@@ -159,7 +143,8 @@ export const AppsCategoryDesktop = ({
             }}
           >
             <AppsSearchLeft>
-              <img src={IconSearch} />
+              <SearchIcon />
+
               <InputBase
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
@@ -172,6 +157,7 @@ export const AppsCategoryDesktop = ({
                 }}
               />
             </AppsSearchLeft>
+
             <AppsSearchRight>
               {searchValue && (
                 <ButtonBase
@@ -186,20 +172,24 @@ export const AppsCategoryDesktop = ({
           </AppsSearchContainer>
         </AppsWidthLimiter>
       </AppsDesktopLibraryHeader>
+
       <AppsDesktopLibraryBody
         sx={{
+          alignItems: 'center',
           height: `calc(100vh - 36px)`,
           overflow: 'auto',
           padding: '0px',
-          alignItems: 'center',
+          width: '70%',
         }}
       >
         <Spacer height="25px" />
+
         <AppsWidthLimiter>
           <AppLibrarySubTitle>{`Category: ${category?.name}`}</AppLibrarySubTitle>
 
           <Spacer height="25px" />
         </AppsWidthLimiter>
+
         <AppsWidthLimiter>
           <StyledVirtuosoContainer
             sx={{

src/components/Apps/AppsDesktop.tsx

@@ -478,13 +478,13 @@ export const AppsDesktop = ({
       )}
 
       <AppsLibraryDesktop
-        isShow={mode === 'library' && !selectedTab}
         availableQapps={availableQapps}
-        setMode={setMode}
-        myName={myName}
-        hasPublishApp={!!(myApp || myWebsite)}
         categories={categories}
         getQapps={getQapps}
+        hasPublishApp={!!(myApp || myWebsite)}
+        isShow={mode === 'library' && !selectedTab}
+        myName={myName}
+        setMode={setMode}
       />
 
       {mode === 'appInfo' && !selectedTab && (

src/components/Apps/AppsLibraryDesktop.tsx

@@ -42,7 +42,6 @@ import {
   AppsDesktopLibraryHeader,
 } from './AppsDesktop-styles';
 import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles';
-import { Theme } from 'emoji-picker-react';
 
 const officialAppList = [
   'q-tube',