Apply theme to app pages

src/components/Apps/AppInfo.tsx

@@ -7,7 +7,6 @@ import {
   AppInfoSnippetContainer,
   AppInfoSnippetLeft,
   AppInfoSnippetMiddle,
-  AppInfoSnippetRight,
   AppInfoUserName,
   AppsCategoryInfo,
   AppsCategoryInfoLabel,
@@ -17,7 +16,7 @@ import {
   AppsLibraryContainer,
   AppsWidthLimiter,
 } from './Apps-styles';
-import { Avatar, Box } from '@mui/material';
+import { Avatar, Box, useTheme } from '@mui/material';
 import { getBaseApiReact } from '../../App';
 import LogoSelected from '../../assets/svgs/LogoSelected.svg';
 import { Spacer } from '../../common/Spacer';
@@ -35,6 +34,7 @@ export const AppInfo = ({ app, myName }) => {
   const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(
     sortablePinnedAppsAtom
   );
+  const theme = useTheme();
 
   const isSelectedAppPinned = !!sortablePinnedApps?.find(
     (item) => item?.name === app?.name && item?.service === app?.service
@@ -104,17 +104,21 @@ export const AppInfo = ({ app, myName }) => {
                   </Avatar>
                 </AppCircle>
               </AppCircleContainer>
+
               <AppInfoSnippetMiddle>
                 <AppInfoAppName>
                   {app?.metadata?.title || app?.name}
                 </AppInfoAppName>
+
                 <Spacer height="6px" />
+
                 <AppInfoUserName>{app?.name}</AppInfoUserName>
+
                 <Spacer height="3px" />
               </AppInfoSnippetMiddle>
             </AppInfoSnippetLeft>
-            <AppInfoSnippetRight></AppInfoSnippetRight>
           </AppInfoSnippetContainer>
+
           <Spacer height="11px" />
           <Box
             sx={{
@@ -159,11 +163,11 @@ export const AppInfo = ({ app, myName }) => {
                 setSettingsLocalLastUpdated(Date.now());
               }}
               sx={{
-                backgroundColor: '#359ff7ff',
+                backgroundColor: theme.palette.background.paper,
-                width: '100%',
-                maxWidth: '320px',
                 height: '29px',
+                maxWidth: '320px',
                 opacity: isSelectedAppPinned ? 0.6 : 1,
+                width: '100%',
               }}
             >
               <AppDownloadButtonText>
@@ -172,6 +176,7 @@ export const AppInfo = ({ app, myName }) => {
                   : 'Pin to dashboard'}
               </AppDownloadButtonText>
             </AppDownloadButton>
+
             <AppDownloadButton
               onClick={() => {
                 executeEvent('addTab', {
@@ -179,10 +184,12 @@ export const AppInfo = ({ app, myName }) => {
                 });
               }}
               sx={{
-                backgroundColor: isInstalled ? '#0091E1' : '#247C0E',
+                backgroundColor: isInstalled
-                width: '100%',
+                  ? '#0091E1'
-                maxWidth: '320px',
+                  : theme.palette.background.paper,
                 height: '29px',
+                maxWidth: '320px',
+                width: '100%',
               }}
             >
               <AppDownloadButtonText>
@@ -191,25 +198,41 @@ export const AppInfo = ({ app, myName }) => {
             </AppDownloadButton>
           </Box>
         </AppsWidthLimiter>
+
         <Spacer height="20px" />
+
         <AppsWidthLimiter>
           <AppsCategoryInfo>
             <AppRating ratingCountPosition="top" myName={myName} app={app} />
+
             <Spacer width="16px" />
-            <Spacer height="40px" width="1px" backgroundColor="white" />
+
+            <Spacer
+              backgroundColor={theme.palette.background.paper}
+              height="40px"
+              width="1px"
+            />
+
             <Spacer width="16px" />
+
             <AppsCategoryInfoSub>
               <AppsCategoryInfoLabel>Category:</AppsCategoryInfoLabel>
+
               <Spacer height="4px" />
+
               <AppsCategoryInfoValue>
                 {app?.metadata?.categoryName || 'none'}
               </AppsCategoryInfoValue>
             </AppsCategoryInfoSub>
           </AppsCategoryInfo>
+
           <Spacer height="30px" />
+
           <AppInfoAppName>About this Q-App</AppInfoAppName>
         </AppsWidthLimiter>
+
         <Spacer height="20px" />
+
         <AppsInfoDescription>
           {app?.metadata?.description || 'No description'}
         </AppsInfoDescription>

src/components/Apps/AppInfoSnippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -11,7 +10,7 @@ import {
   AppInfoSnippetRight,
   AppInfoUserName,
 } from './Apps-styles';
-import { Avatar, ButtonBase } from '@mui/material';
+import { Avatar, ButtonBase, useTheme } from '@mui/material';
 import { getBaseApiReact } from '../../App';
 import LogoSelected from '../../assets/svgs/LogoSelected.svg';
 import { Spacer } from '../../common/Spacer';
@@ -41,6 +40,8 @@ export const AppInfoSnippet = ({
   const setSettingsLocalLastUpdated = useSetRecoilState(
     settingsLocalLastUpdatedAtom
   );
+  const theme = useTheme();
+
   return (
     <AppInfoSnippetContainer
       sx={{
@@ -96,6 +97,7 @@ export const AppInfoSnippet = ({
             </AppCircle>
           </AppCircleContainer>
         </ButtonBase>
+
         <AppInfoSnippetMiddle>
           <ButtonBase
             onClick={() => {
@@ -112,12 +114,17 @@ export const AppInfoSnippet = ({
           >
             <AppInfoAppName>{app?.metadata?.title || app?.name}</AppInfoAppName>
           </ButtonBase>
+
           <Spacer height="6px" />
+
           <AppInfoUserName>{app?.name}</AppInfoUserName>
+
           <Spacer height="3px" />
+
           <AppRating app={app} myName={myName} />
         </AppInfoSnippetMiddle>
       </AppInfoSnippetLeft>
+
       <AppInfoSnippetRight
         sx={{
           gap: '10px',
@@ -157,7 +164,7 @@ export const AppInfoSnippet = ({
             setSettingsLocalLastUpdated(Date.now());
           }}
           sx={{
-            backgroundColor: '#359ff7ff',
+            backgroundColor: theme.palette.background.paper,
             opacity: isSelectedAppPinned ? 0.6 : 1,
           }}
         >
@@ -174,7 +181,9 @@ export const AppInfoSnippet = ({
             });
           }}
           sx={{
-            backgroundColor: isInstalled ? '#0091E1' : '#247C0E',
+            backgroundColor: isInstalled
+              ? '#0091E1'
+              : theme.palette.background.paper,
           }}
         >
           <AppDownloadButtonText>

src/components/Apps/AppRating.tsx

@@ -91,6 +91,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => {
       }
     }
   }, []);
+
   useEffect(() => {
     if (hasCalledRef.current) return;
     if (!app) return;
@@ -108,6 +109,7 @@ export const AppRating = ({ app, myName, ratingCountPosition = 'right' }) => {
         message: `Would you like to rate this app a rating of ${newValue}?. It will create a POLL tx.`,
         publishFee: fee.fee + ' QORT',
       });
+
       if (hasPublishedRating === false) {
         const pollName = `app-library-${app.service}-rating-${app.name}`;
         const pollOptions = [`1, 2, 3, 4, 5, initialValue-${newValue}`];

src/components/Apps/Apps-styles.tsx

@@ -36,6 +36,24 @@ export const AppsContainer = styled(Box)(({ theme }) => ({
   width: '90%',
 }));
 
+export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+  width: '100%',
+}));
+
+export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  width: '100%',
+}));
+
 export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   backgroundColor: theme.palette.background.default,
@@ -177,13 +195,11 @@ export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
   width: '101px',
 }));
 
-export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
+export const AppDownloadButtonText = styled(Typography)({
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
   fontSize: '14px',
   fontWeight: 500,
   lineHeight: 1.2,
-}));
+});
 
 export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,

src/components/Apps/AppsCategoryDesktop.tsx

@@ -1,23 +1,21 @@
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   AppLibrarySubTitle,
+  AppsDesktopLibraryBody,
+  AppsDesktopLibraryHeader,
   AppsLibraryContainer,
   AppsSearchContainer,
   AppsSearchLeft,
   AppsSearchRight,
   AppsWidthLimiter,
 } from './Apps-styles';
-import { ButtonBase, InputBase, styled } from '@mui/material';
+import { ButtonBase, InputBase, styled, useTheme } from '@mui/material';
 import { MyContext } from '../../App';
 import SearchIcon from '@mui/icons-material/Search';
 import IconClearInput from '../../assets/svgs/ClearInput.svg';
 import { Spacer } from '../../common/Spacer';
 import { AppInfoSnippet } from './AppInfoSnippet';
 import { Virtuoso } from 'react-virtuoso';
-import {
-  AppsDesktopLibraryBody,
-  AppsDesktopLibraryHeader,
-} from './AppsDesktop-styles';
 
 const ScrollerStyled = styled('div')({
   // Hide scrollbar for WebKit browsers (Chrome, Safari)
@@ -60,6 +58,7 @@ export const AppsCategoryDesktop = ({
 }) => {
   const [searchValue, setSearchValue] = useState('');
   const virtuosoRef = useRef();
+  const theme = useTheme();
   const { rootHeight } = useContext(MyContext);
 
   const categoryList = useMemo(() => {
@@ -148,7 +147,13 @@ export const AppsCategoryDesktop = ({
               <InputBase
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
-                sx={{ ml: 1, flex: 1 }}
+                sx={{
+                  background: theme.palette.background.paper,
+                  borderRadius: '6px',
+                  flex: 1,
+                  ml: 1,
+                  paddingLeft: '12px',
+                }}
                 placeholder="Search for apps"
                 inputProps={{
                   'aria-label': 'Search for apps',

src/components/Apps/AppsDesktop-styles.tsx

@@ -1,24 +0,0 @@
-import {
-    AppBar,
-    Button,
-    Toolbar,
-    Typography,
-    Box,
-    TextField,
-    InputLabel,
-    ButtonBase,
-  } from "@mui/material";
-  import { styled } from "@mui/system";
-  
-  export const AppsDesktopLibraryHeader = styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: 'column',
-    flexShrink: 0,
-    width: '100%'
-  }));
-  export const AppsDesktopLibraryBody = styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: 'column',
-    flexGrow: 1,
-    width: '100%'
-  }));

src/components/Apps/AppsLibraryDesktop.tsx

@@ -5,6 +5,8 @@ import {
   AppCircleLabel,
   AppLibrarySubTitle,
   AppsContainer,
+  AppsDesktopLibraryBody,
+  AppsDesktopLibraryHeader,
   AppsLibraryContainer,
   AppsSearchContainer,
   AppsSearchLeft,
@@ -37,10 +39,6 @@ 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';
 import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles';
 
 const officialAppList = [
@@ -204,7 +202,13 @@ export const AppsLibraryDesktop = ({
                   <InputBase
                     value={searchValue}
                     onChange={(e) => setSearchValue(e.target.value)}
-                    sx={{ ml: 1, flex: 1 }}
+                    sx={{
+                      background: theme.palette.background.paper,
+                      borderRadius: '6px',
+                      flex: 1,
+                      ml: 1,
+                      paddingLeft: '12px',
+                    }}
                     placeholder="Search for apps"
                     inputProps={{
                       'aria-label': 'Search for apps',