Merge pull request #15 from nbenaglia/feature/css-light-and-switch

Add themeSelector and switcher (dark and light styles)
2025-07-23 04:36:52 +00:00 · 2025-04-11 09:40:38 +03:00
parent 7e7e914cf9 a902554df8
commit 60474c2867
49 changed files with 2050 additions and 1707 deletions
--- a/src/components/Apps/AppViewerContainer.tsx
+++ b/src/components/Apps/AppViewerContainer.tsx
@@ -20,7 +20,7 @@ const AppViewerContainer = React.forwardRef(({ app, isSelected, hide, isDevMode,
                padding: 0;
              }
              * {
-                -ms-overflow-style: none;  /* IE and Edge */
+                -msOverflowStyle: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
              }
              *::-webkit-scrollbar {
--- a/src/components/Apps/Apps-styles.tsx
+++ b/src/components/Apps/Apps-styles.tsx
@@ -1,315 +1,381 @@
-import {
-    AppBar,
-    Button,
-    Toolbar,
-    Typography,
-    Box,
-    TextField,
-    InputLabel,
-    ButtonBase,
-  } from "@mui/material";
-  import { styled } from "@mui/system";
-  
-  export const AppsParent = styled(Box)(({ theme }) => ({
-    display: "flex",
-      width: "100%",
-      flexDirection: "column",
-      height: "100%",
-      alignItems: "center",
-      overflow: 'auto',
-        // For WebKit-based browsers (Chrome, Safari, etc.)
-    "::-webkit-scrollbar": {
-        width: "0px", // Set the width to 0 to hide the scrollbar
-        height: "0px", // Set the height to 0 for horizontal scrollbar
-      },
-    
-      // For Firefox
-      scrollbarWidth: "none", // Hides the scrollbar in Firefox
-    
-      // Optional for better cross-browser consistency
-      "-ms-overflow-style": "none" // Hides scrollbar in IE and Edge
-  }));
-  export const AppsContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "90%",
-    justifyContent: 'space-evenly',
-    gap: '24px',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start',
-    alignSelf: 'center'
-  
-  }));
-  export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "100%",
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  }));
-  export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "90%",
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  }));
-  export const AppsSearchContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "90%",
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#434343',
-    borderRadius: '8px',
-    padding: '0px 10px',
-    height: '36px'
-  }));
-  export const AppsSearchLeft = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "90%",
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    gap: '10px',
-    flexGrow: 1,
-    flexShrink: 0
-  }));
-  export const AppsSearchRight = styled(Box)(({ theme }) => ({
-    display: "flex",
-    width: "90%",
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    flexShrink: 1
-  }));
-  export const AppCircleContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-      flexDirection: "column",
-      gap: '5px',
-      alignItems: 'center',
-      width: '100%'
-  }));
-  export const Add = styled(Typography)(({ theme }) => ({
-    fontSize: '36px',
-    fontWeight: 500,
-    lineHeight: '43.57px',
-    textAlign: 'left'
-    
-  }));
-  export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-    fontSize: '14px',
-    fontWeight: 500,
-    lineHeight: 1.2,
-    // whiteSpace: 'nowrap',   
-  overflow: 'hidden',     
-  textOverflow: 'ellipsis', 
-  width: '120%',
-  '-webkit-line-clamp': '2',
-  '-webkit-box-orient': 'vertical',
-  'display': '-webkit-box',
-    
-  }));
-  export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
-    fontSize: '16px',
-    fontWeight: 500,
-    lineHeight: 1.2,
-  }));
-  export const AppCircle = styled(Box)(({ theme }) => ({
-    display: "flex",
-      width: "75px",
-      flexDirection: "column",
-      height: "75px",
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '50%',
-      backgroundColor: "var(--apps-circle)",
-      border: '1px solid #FFFFFF'
-  }));
+import { Typography, Box, ButtonBase } from "@mui/material";
+import { styled } from "@mui/system";

-  export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%'
-  }));
+export const AppsParent = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  height: "100%",
+  alignItems: "center",
+  overflow: "auto",
+  // For WebKit-based browsers (Chrome, Safari, etc.)
+  "::-webkit-scrollbar": {
+    width: "0px", // Set the width to 0 to hide the scrollbar
+    height: "0px", // Set the height to 0 for horizontal scrollbar
+  },

-  export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    gap: '12px'
-  }));
-  export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  }));
+  // For Firefox
+  scrollbarWidth: "none", // Hides the scrollbar in Firefox

-  export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
-    backgroundColor: "#247C0E",
-    width: '101px',
-    height: '29px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '25px',
-    alignSelf: 'center'
-  }));
+  // Optional for better cross-browser consistency
+  "-msOverflowStyle": "none", // Hides scrollbar in IE and Edge

-  export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
-    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'
-  }))
+export const AppsContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "90%",
+  justifyContent: "space-evenly",
+  gap: "24px",
+  flexWrap: "wrap",
+  alignItems: "flex-start",
+  alignSelf: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

+export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  backgroundColor: theme.palette.background.paper,
+}));

-  export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  }));
+export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "90%",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  alignItems: "flex-start",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const AppInfoAppName = styled(Typography)(({ theme }) => ({
-    fontSize: '16px',
-    fontWeight: 500,
-    lineHeight: 1.2,
-    textAlign: 'start'
-  }));
-  export const AppInfoUserName = styled(Typography)(({ theme }) => ({
-    fontSize: '13px',
-    fontWeight: 400,
-    lineHeight: 1.2,
-    color: '#8D8F93',
-    textAlign: 'start'
-  }));
+export const AppsSearchContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "90%",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: "8px",
+  padding: "0px 10px",
+  height: "36px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

+export const AppsSearchLeft = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "90%",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: "10px",
+  flexGrow: 1,
+  flexShrink: 0,
+  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%',
-    height: '60px',
-    backgroundColor: '#1F2023',
-    padding: '0px 10px',
-    position: "fixed",
-    bottom: 0,
-    zIndex: 1,
-  }));
+export const AppsSearchRight = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "90%",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  flexShrink: 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
-  }));
-  export const AppsNavBarRight = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  }));
+export const AppCircleContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  alignItems: "center",
+  width: "100%",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const TabParent = styled(Box)(({ theme }) => ({
-    height: '36px',
-    width: '36px',
-    backgroundColor: '#434343',
-    position: 'relative',
-    borderRadius: '50%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }));
+export const Add = styled(Typography)(({ theme }) => ({
+  fontSize: "36px",
+  fontWeight: 500,
+  lineHeight: "43.57px",
+  textAlign: "left",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    backgroundColor: '#181C23'
-  }));
+export const AppCircleLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "14px",
+  fontWeight: 500,
+  lineHeight: 1.2,
+  // whiteSpace: 'nowrap',
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  width: "120%",
+  "-webkit-line-clamp": "2",
+  "-webkit-box-orient": "vertical",
+  display: "-webkit-box",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  }));
-  export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  }));
+export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
+  fontSize: "16px",
+  fontWeight: 500,
+  lineHeight: 1.2,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
-    width: '101px',
-    height: '29px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '25px',
-    border: '1px solid #FFFFFF'
-  }));
-  export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '60px',
-    height: '60px',
-    backgroundColor: '#4BBCFE'
-  }));
-  
-  export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
-    fontSize: '10px',
-    fontWeight: 400,
-    lineHeight: 1.2,
-    fontStyle: 'italic'
-  }));
+export const AppCircle = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "75px",
+  flexDirection: "column",
+  height: "75px",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  border: "1px solid #FFFFFF",
+}));

-  export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
-    width: '101px',
-    height: '30px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '5px',
-    backgroundColor: '#0091E1',
-    color: 'white',
-    fontWeight: 600,
-    fontSize: '10px'
-  }));
+export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

+export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: "12px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const AppsCategoryInfo =  styled(Box)(({ theme }) => ({
-    display: "flex",
-    alignItems: 'center',
-    width: '100%',
-  }));
+export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));

-  export const AppsCategoryInfoSub =  styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: 'column',
-  }));
-  export const AppsCategoryInfoLabel =  styled(Typography)(({ theme }) => ({
-    fontSize: '12px',
-    fontWeight: 700,
-    lineHeight: 1.2,
-    color: '#8D8F93',
-  }));
-  export const AppsCategoryInfoValue =  styled(Typography)(({ theme }) => ({
-    fontSize: '12px',
-    fontWeight: 500,
-    lineHeight: 1.2,
-    color: '#8D8F93',
-  }));
-  export const AppsInfoDescription =  styled(Typography)(({ theme }) => ({
-    fontSize: '13px',
-    fontWeight: 300,
-    lineHeight: 1.2,
-    width: '90%',
-    textAlign: 'start'
-  }));
+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",
+}));
+
+export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
+  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,
+}));
+
+export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
+  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 }) => ({
+  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 }) => ({
+  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%",
+  height: "60px",
+  padding: "0px 10px",
+  position: "fixed",
+  bottom: 0,
+  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,
+}));
+
+export const AppsNavBarRight = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+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,
+  color: theme.palette.text.primary,
+}));
+
+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,
+}));
+
+export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
+  width: "101px",
+  height: "29px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "25px",
+  border: "1px solid #FFFFFF",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "60px",
+  height: "60px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
+  fontSize: "10px",
+  fontWeight: 400,
+  lineHeight: 1.2,
+  fontStyle: "italic",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
+  width: "101px",
+  height: "30px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "5px",
+  fontWeight: 600,
+  fontSize: "10px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "12px",
+  fontWeight: 700,
+  lineHeight: 1.2,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: 1.2,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsInfoDescription = styled(Typography)(({ theme }) => ({
+  fontSize: "13px",
+  fontWeight: 300,
+  lineHeight: 1.2,
+  width: "90%",
+  textAlign: "start",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
--- a/src/components/Apps/AppsCategory.tsx
+++ b/src/components/Apps/AppsCategory.tsx
@@ -56,7 +56,7 @@ const ScrollerStyled = styled('div')({
    scrollbarWidth: "none",
  
    // Hide scrollbar for IE and older Edge
-    "-ms-overflow-style": "none",
+    "-msOverflowStyle": "none",
  });
  
  const StyledVirtuosoContainer = styled('div')({
@@ -75,7 +75,7 @@ const ScrollerStyled = styled('div')({
    scrollbarWidth: "none",
  
    // Hide scrollbar for IE and older Edge
-    "-ms-overflow-style": "none",
+    "-msOverflowStyle": "none",
  });

 export const AppsCategory = ({  availableQapps,  myName, category, isShow }) => {
--- a/src/components/Apps/AppsCategoryDesktop.tsx
+++ b/src/components/Apps/AppsCategoryDesktop.tsx
@@ -64,7 +64,7 @@ const ScrollerStyled = styled("div")({
  scrollbarWidth: "none",

  // Hide scrollbar for IE and older Edge
-  "-ms-overflow-style": "none",
+  "-msOverflowStyle": "none",
 });

 const StyledVirtuosoContainer = styled("div")({
@@ -83,7 +83,7 @@ const StyledVirtuosoContainer = styled("div")({
  scrollbarWidth: "none",

  // Hide scrollbar for IE and older Edge
-  "-ms-overflow-style": "none",
+  "-msOverflowStyle": "none",
 });

 export const AppsCategoryDesktop = ({
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -1,7 +1,13 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { AppsHomeDesktop } from "./AppsHomeDesktop";
 import { Spacer } from "../../common/Spacer";
-import { GlobalContext, MyContext, getBaseApiReact } from "../../App";
+import { GlobalContext, getBaseApiReact } from "../../App";
 import { AppInfo } from "./AppInfo";
 import {
  executeEvent,
@@ -15,47 +21,58 @@ import { AppPublish } from "./AppPublish";
 import { AppsLibraryDesktop } from "./AppsLibraryDesktop";
 import { AppsCategoryDesktop } from "./AppsCategoryDesktop";
 import { AppsNavBarDesktop } from "./AppsNavBarDesktop";
-import { Box, ButtonBase } from "@mui/material";
+import { Box, ButtonBase, useTheme } from "@mui/material";
 import { HomeIcon } from "../../assets/Icons/HomeIcon";
 import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 import { Save } from "../Save/Save";
-import { HubsIcon } from "../../assets/Icons/HubsIcon";
-import { CoreSyncStatus } from "../CoreSyncStatus";
 import { IconWrapper } from "../Desktop/DesktopFooter";
-import AppIcon from "../../assets/svgs/AppIcon.svg";
 import { useRecoilState } from "recoil";
 import { enabledDevModeAtom } from "../../atoms/global";
 import { AppsIcon } from "../../assets/Icons/AppsIcon";

 const uid = new ShortUniqueId({ length: 8 });

-export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => {
+export const AppsDesktop = ({
+  mode,
+  setMode,
+  show,
+  myName,
+  goToHome,
+  hasUnreadDirects,
+  hasUnreadGroups,
+  setDesktopViewMode,
+  desktopViewMode,
+}) => {
  const [availableQapps, setAvailableQapps] = useState([]);
  const [selectedAppInfo, setSelectedAppInfo] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState(null)
+  const [selectedCategory, setSelectedCategory] = useState(null);
  const [tabs, setTabs] = useState([]);
  const [selectedTab, setSelectedTab] = useState(null);
  const [isNewTabWindow, setIsNewTabWindow] = useState(false);
-  const [categories, setCategories] = useState([])
+  const [categories, setCategories] = useState([]);
  const iframeRefs = useRef({});
-  const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
+  const [isEnabledDevMode, setIsEnabledDevMode] =
+    useRecoilState(enabledDevModeAtom);
  const { showTutorial } = useContext(GlobalContext);
+  const theme = useTheme();

-  const myApp = useMemo(()=> {
-   
-   return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
-  }, [myName, availableQapps])
-  const myWebsite = useMemo(()=> {
-   
-    return availableQapps.find((app)=> app.name === myName && app.service === 'WEBSITE')
-   }, [myName, availableQapps])
+  const myApp = useMemo(() => {
+    return availableQapps.find(
+      (app) => app.name === myName && app.service === "APP"
+    );
+  }, [myName, availableQapps]);

+  const myWebsite = useMemo(() => {
+    return availableQapps.find(
+      (app) => app.name === myName && app.service === "WEBSITE"
+    );
+  }, [myName, availableQapps]);

-   useEffect(()=> {
-    if(show){
-      showTutorial('qapps')
+  useEffect(() => {
+    if (show) {
+      showTutorial("qapps");
    }
-  }, [show])
+  }, [show]);

  useEffect(() => {
    setTimeout(() => {
@@ -81,10 +98,10 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
      });
      if (!response?.ok) return;
      const responseData = await response.json();
-     
+
      setCategories(responseData);
-     
    } catch (error) {
+      console.log(error);
    } finally {
      // dispatch(setIsLoadingGlobal(false))
    }
@@ -115,18 +132,19 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
      });
      if (!responseWebsites?.ok) return;
      const responseDataWebsites = await responseWebsites.json();
-    
+
      apps = responseData;
      websites = responseDataWebsites;
      const combine = [...apps, ...websites];
      setAvailableQapps(combine);
    } catch (error) {
+      console.log(error);
    } finally {
      // dispatch(setIsLoadingGlobal(false))
    }
  }, []);
  useEffect(() => {
-    getCategories()
+    getCategories();
  }, [getCategories]);

  useEffect(() => {
@@ -163,12 +181,13 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
    subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc);

    return () => {
-      unsubscribeFromEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc);
+      unsubscribeFromEvent(
+        "selectedAppInfoCategory",
+        selectedAppInfoCategoryFunc
+      );
    };
  }, []);

-  
-
  const selectedCategoryFunc = (e) => {
    const data = e.detail?.data;
    setSelectedCategory(data);
@@ -183,35 +202,37 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
    };
  }, []);

-
-
-
-
-  
  const navigateBackFunc = (e) => {
-    if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) {
+    if (
+      [
+        "category",
+        "appInfo-from-category",
+        "appInfo",
+        "library",
+        "publish",
+      ].includes(mode)
+    ) {
      // Handle the various modes as needed
-      if (mode === 'category') {
-        setMode('library');
+      if (mode === "category") {
+        setMode("library");
        setSelectedCategory(null);
-      } else if (mode === 'appInfo-from-category') {
-        setMode('category');
-      } else if (mode === 'appInfo') {
-        setMode('library');
-      } else if (mode === 'library') {
+      } else if (mode === "appInfo-from-category") {
+        setMode("category");
+      } else if (mode === "appInfo") {
+        setMode("library");
+      } else if (mode === "library") {
        if (isNewTabWindow) {
-          setMode('viewer');
+          setMode("viewer");
        } else {
-          setMode('home');
+          setMode("home");
        }
-      } else if (mode === 'publish') {
-        setMode('library');
+      } else if (mode === "publish") {
+        setMode("library");
      }
-    } else if(selectedTab?.tabId) {
-      executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {})
+    } else if (selectedTab?.tabId) {
+      executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
    }
  };
-  

  useEffect(() => {
    subscribeToEvent("navigateBack", navigateBackFunc);
@@ -234,8 +255,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
    setIsNewTabWindow(false);
  };

-
-
  useEffect(() => {
    subscribeToEvent("addTab", addTabFunc);

@@ -245,7 +264,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
  }, [tabs]);
  const setSelectedTabFunc = (e) => {
    const data = e.detail?.data;
-    if(e.detail?.isDevMode) return
+    if (e.detail?.isDevMode) return;

    setSelectedTab(data);
    setTimeout(() => {
@@ -259,7 +278,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
    }, 100);
    setIsNewTabWindow(false);
  };
-  

  useEffect(() => {
    subscribeToEvent("setSelectedTab", setSelectedTabFunc);
@@ -299,7 +317,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop

  const setNewTabWindowFunc = (e) => {
    setIsNewTabWindow(true);
-    setSelectedTab(null)
+    setSelectedTab(null);
  };

  useEffect(() => {
@@ -318,67 +336,62 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
        flexDirection:  'row' 
      }}
    >
-     
-       <Box sx={{
-        width: '60px',
-        flexDirection: 'column',
-        height: '100vh',
-        alignItems: 'center',
-        display: 'flex',
-        gap: '25px'
-       }}>
+      <Box
+        sx={{
+          width: "60px",
+          flexDirection: "column",
+          height: "100vh",
+          alignItems: "center",
+          display: "flex",
+          gap: "25px",
+        }}
+      >
        <ButtonBase
          sx={{
-            width: '60px',
-            height: '60px',
-            paddingTop: '23px'
+            width: "60px",
+            height: "60px",
+            paddingTop: "23px",
          }}
          onClick={() => {
            goToHome();
-
          }}
        >
-            
-            <HomeIcon
-              height={34}
-              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
-            />
-        
+          <HomeIcon height={34} />
        </ButtonBase>
+
        <ButtonBase
          onClick={() => {
-            setDesktopViewMode('apps')
+            setDesktopViewMode("apps");
+          }}
+        >
+          <IconWrapper label="Apps" disableWidth>
+            <AppsIcon height={30} />
+          </IconWrapper>
+        </ButtonBase>
+
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode("chat");
          }}
        >
          <IconWrapper
-            color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
-            label="Apps"
-            disableWidth
-          >
-          <AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
-          </IconWrapper>
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopViewMode('chat')
-          }}
-        >
-        <IconWrapper
-            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            color={
+              hasUnreadDirects || hasUnreadGroups
+                ? "var(--unread)"
+                : theme.palette.text.primary
+            }
            label="Chat"
            disableWidth
          >
            <MessagingIcon
              height={30}
              color={
-                (hasUnreadDirects || hasUnreadGroups)
+                hasUnreadDirects || hasUnreadGroups
                  ? "var(--unread)"
-                  : desktopViewMode === 'chat'
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
+                  : theme.palette.text.primary
              }
            />
-    </IconWrapper>
+          </IconWrapper>
        </ButtonBase>
        {/* <ButtonBase
          onClick={() => {
@@ -417,65 +430,78 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
            />
     
        </ButtonBase> */}
-        <Save isDesktop disableWidth myName={myName}/>
+        <Save isDesktop disableWidth myName={myName} />
        {isEnabledDevMode && (
-           <ButtonBase
-           onClick={() => {
-             setDesktopViewMode('dev')
-           }}
-         >
-           <IconWrapper
-             color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
-             label="Dev"
-             disableWidth
-           >
-            <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
-           </IconWrapper>
-         </ButtonBase>
+          <ButtonBase
+            onClick={() => {
+              setDesktopViewMode("dev");
+            }}
+          >
+            <IconWrapper label="Dev" disableWidth>
+              <AppsIcon height={30} />
+            </IconWrapper>
+          </ButtonBase>
        )}
-        {mode !== 'home' && (
-                 <AppsNavBarDesktop disableBack={isNewTabWindow && mode === 'viewer'}  />
-
+        {mode !== "home" && (
+          <AppsNavBarDesktop
+            disableBack={isNewTabWindow && mode === "viewer"}
+          />
        )}
+      </Box>

-       </Box>
-    
-  
      {mode === "home" && (
-         <Box sx={{
-          display: 'flex',
-          width: '100%',
-          flexDirection: 'column',
-          height: '100vh',
-          overflow: 'auto'
-        }}>
-
-         <Spacer height="30px" />
-        <AppsHomeDesktop myName={myName} availableQapps={availableQapps}  setMode={setMode} myApp={myApp} myWebsite={myWebsite} />
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            flexDirection: "column",
+            height: "100vh",
+            overflow: "auto",
+          }}
+        >
+          <Spacer height="30px" />
+          <AppsHomeDesktop
+            myName={myName}
+            availableQapps={availableQapps}
+            setMode={setMode}
+            myApp={myApp}
+            myWebsite={myWebsite}
+          />
        </Box>
      )}
-    
-        <AppsLibraryDesktop
+
+      <AppsLibraryDesktop
        isShow={mode === "library" && !selectedTab}
-          availableQapps={availableQapps}
-          setMode={setMode}
-          myName={myName}
-          hasPublishApp={!!(myApp || myWebsite)}
-          categories={categories}
-          getQapps={getQapps}
-        />
-   
-      {mode === "appInfo" && !selectedTab && <AppInfo app={selectedAppInfo} myName={myName} />}
-      {mode === "appInfo-from-category" && !selectedTab && <AppInfo app={selectedAppInfo} myName={myName} />}
-      <AppsCategoryDesktop  availableQapps={availableQapps} isShow={mode === 'category' && !selectedTab} category={selectedCategory} myName={myName} />
-      {mode === "publish" && !selectedTab && <AppPublish names={myName ?  [myName] : []} categories={categories} />}
+        availableQapps={availableQapps}
+        setMode={setMode}
+        myName={myName}
+        hasPublishApp={!!(myApp || myWebsite)}
+        categories={categories}
+        getQapps={getQapps}
+      />
+
+      {mode === "appInfo" && !selectedTab && (
+        <AppInfo app={selectedAppInfo} myName={myName} />
+      )}
+      {mode === "appInfo-from-category" && !selectedTab && (
+        <AppInfo app={selectedAppInfo} myName={myName} />
+      )}
+      <AppsCategoryDesktop
+        availableQapps={availableQapps}
+        isShow={mode === "category" && !selectedTab}
+        category={selectedCategory}
+        myName={myName}
+      />
+      {mode === "publish" && !selectedTab && (
+        <AppPublish names={myName ? [myName] : []} categories={categories} />
+      )}
      {tabs.map((tab) => {
        if (!iframeRefs.current[tab.tabId]) {
          iframeRefs.current[tab.tabId] = React.createRef();
        }
        return (
          <AppViewerContainer
-          key={tab?.tabId}
+            key={tab?.tabId}
            hide={isNewTabWindow}
            isSelected={tab?.tabId === selectedTab?.tabId}
            app={tab}
@@ -487,16 +513,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop

      {isNewTabWindow && mode === "viewer" && (
        <>
-        <Box sx={{
-          display: 'flex',
-          width: '100%',
-          flexDirection: 'column',
-          height: '100vh',
-          overflow: 'auto'
-        }}>
-
-         <Spacer height="30px" />
-          <AppsHomeDesktop myName={myName} availableQapps={availableQapps} setMode={setMode} myApp={myApp} myWebsite={myWebsite}  />
+          <Box
+            sx={{
+              display: "flex",
+              width: "100%",
+              flexDirection: "column",
+              height: "100vh",
+              overflow: "auto",
+            }}
+          >
+            <Spacer height="30px" />
+            <AppsHomeDesktop
+              myName={myName}
+              availableQapps={availableQapps}
+              setMode={setMode}
+              myApp={myApp}
+              myWebsite={myWebsite}
+            />
          </Box>
        </>
      )}
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -1,120 +1,122 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import {
  AppCircle,
  AppCircleContainer,
  AppCircleLabel,
  AppLibrarySubTitle,
  AppsContainer,
-  AppsParent,
 } from "./Apps-styles";
-import { Avatar, Box, ButtonBase, Input } from "@mui/material";
+import { Box, ButtonBase, Input } from "@mui/material";
 import { Add } from "@mui/icons-material";
-import { getBaseApiReact, isMobile } from "../../App";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
+import { isMobile } from "../../App";
 import { executeEvent } from "../../utils/events";
 import { Spacer } from "../../common/Spacer";
 import { SortablePinnedApps } from "./SortablePinnedApps";
 import { extractComponents } from "../Chat/MessageDisplay";
-import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 import { AppsPrivate } from "./AppsPrivate";
+import ThemeSelector from "../Theme/ThemeSelector";
 export const AppsHomeDesktop = ({
  setMode,
  myApp,
  myWebsite,
  availableQapps,
-  myName
+  myName,
 }) => {
-  const [qortalUrl, setQortalUrl] = useState('')
+  const [qortalUrl, setQortalUrl] = useState("");

-  const openQortalUrl = ()=> {
+  const openQortalUrl = () => {
    try {
-      if(!qortalUrl) return
+      if (!qortalUrl) return;
      const res = extractComponents(qortalUrl);
      if (res) {
        const { service, name, identifier, path } = res;
        executeEvent("addTab", { data: { service, name, identifier, path } });
-        executeEvent("open-apps-mode", { });
-        setQortalUrl('qortal://')
+        executeEvent("open-apps-mode", {});
+        setQortalUrl("qortal://");
      }
-    } catch (error) {
-      
-    }
-  }
+    } catch (error) {}
+  };
  return (
    <>
-     <AppsContainer
-        sx={{
-        
-          justifyContent: "flex-start",
-        }}
-      >
-      <AppLibrarySubTitle
-        sx={{
-          fontSize: "30px",
-        }}
-      >
-        Apps Dashboard
-      </AppLibrarySubTitle>
-      </AppsContainer>
-      <Spacer height="20px" />
      <AppsContainer
        sx={{
-        
          justifyContent: "flex-start",
-          
        }}
      >
-        <Box sx={{
-          display: 'flex',
-          gap: '20px',
-          alignItems: 'center',
-          backgroundColor: '#1f2023',
-          padding: '7px',
-          borderRadius: '20px',
-          width: '100%',
-          maxWidth: '500px'
-        }}>
-      <Input
-              id="standard-adornment-name"
-              value={qortalUrl}
-              onChange={(e) => {
-                setQortalUrl(e.target.value)
-              }}
-              disableUnderline
-              autoComplete='off'
-              autoCorrect='off'
-              placeholder="qortal://"
+        <AppLibrarySubTitle
+          sx={{
+            fontSize: "30px",
+          }}
+        >
+          Apps Dashboard
+        </AppLibrarySubTitle>
+      </AppsContainer>
+
+      <Spacer height="20px" />
+
+      <AppsContainer
+        sx={{
+          justifyContent: "flex-start",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            gap: "20px",
+            alignItems: "center",
+            backgroundColor: "#1f2023",
+            padding: "7px",
+            borderRadius: "20px",
+            width: "100%",
+            maxWidth: "500px",
+          }}
+        >
+          <Input
+            id="standard-adornment-name"
+            value={qortalUrl}
+            onChange={(e) => {
+              setQortalUrl(e.target.value);
+            }}
+            disableUnderline
+            autoComplete="off"
+            autoCorrect="off"
+            placeholder="qortal://"
+            sx={{
+              width: "100%",
+              color: "white",
+              "& .MuiInput-input::placeholder": {
+                color: "rgba(84, 84, 84, 0.70) !important",
+                fontSize: "20px",
+                fontStyle: "normal",
+                fontWeight: 400,
+                lineHeight: "120%", // 24px
+                letterSpacing: "0.15px",
+                opacity: 1,
+              },
+              "&:focus": {
+                outline: "none",
+              },
+              // Add any additional styles for the input here
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && qortalUrl) {
+                openQortalUrl();
+              }
+            }}
+          />
+          <ButtonBase onClick={() => openQortalUrl()}>
+            <ArrowOutwardIcon
              sx={{
-                width: '100%',
-                color: 'white',
-                '& .MuiInput-input::placeholder': {
-                  color: 'rgba(84, 84, 84, 0.70) !important',
-                  fontSize: '20px',
-                  fontStyle: 'normal',
-                  fontWeight: 400,
-                  lineHeight: '120%', // 24px
-                  letterSpacing: '0.15px',
-                  opacity: 1
-                },
-                '&:focus': {
-                  outline: 'none',
-                },
-                // Add any additional styles for the input here
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && qortalUrl) {
-                  openQortalUrl();
-                }
+                color: qortalUrl ? "white" : "rgba(84, 84, 84, 0.70)",
              }}
            />
-            <ButtonBase onClick={()=> openQortalUrl()}>
-              <ArrowOutwardIcon sx={{
-                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)'
-              }} />
-            </ButtonBase>
-            </Box>
-            </AppsContainer>
+          </ButtonBase>
+        </Box>
+      </AppsContainer>
+
      <Spacer height="45px" />
+
      <AppsContainer
        sx={{
          gap: "50px",
@@ -137,7 +139,9 @@ export const AppsHomeDesktop = ({
            <AppCircleLabel>Library</AppCircleLabel>
          </AppCircleContainer>
        </ButtonBase>
-          <AppsPrivate myName={myName} />
+
+        <AppsPrivate myName={myName} />
+
        <SortablePinnedApps
          isDesktop={true}
          availableQapps={availableQapps}
@@ -145,6 +149,8 @@ export const AppsHomeDesktop = ({
          myApp={myApp}
        />
      </AppsContainer>
+
+      <ThemeSelector style={{ position: "fixed", bottom: "1%", left: "0%" }} />
    </>
  );
 };
--- a/src/components/Apps/AppsLibrary.tsx
+++ b/src/components/Apps/AppsLibrary.tsx
@@ -58,7 +58,7 @@ const ScrollerStyled = styled('div')({
    scrollbarWidth: "none",
  
    // Hide scrollbar for IE and older Edge
-    "-ms-overflow-style": "none",
+    "-msOverflowStyle": "none",
  });
  
  const StyledVirtuosoContainer = styled('div')({
@@ -77,7 +77,7 @@ const ScrollerStyled = styled('div')({
    scrollbarWidth: "none",
  
    // Hide scrollbar for IE and older Edge
-    "-ms-overflow-style": "none",
+    "-msOverflowStyle": "none",
  });

 export const AppsLibrary = ({  availableQapps, setMode, myName, hasPublishApp, isShow, categories={categories} }) => {
@@ -290,7 +290,7 @@ export const AppsLibrary = ({  availableQapps, setMode, myName, hasPublishApp, i
              scrollbarWidth: "none",
            
              // Hide scrollbar for IE and older Edge
-              "-ms-overflow-style": "none",
+              "-msOverflowStyle": "none",
            }}>
            {categories?.map((category)=> {
              return (
--- a/src/components/Apps/AppsLibraryDesktop.tsx
+++ b/src/components/Apps/AppsLibraryDesktop.tsx
@@ -74,7 +74,7 @@ const ScrollerStyled = styled("div")({
  scrollbarWidth: "none",

  // Hide scrollbar for IE and older Edge
-  "-ms-overflow-style": "none",
+  "-msOverflowStyle": "none",
 });

 const StyledVirtuosoContainer = styled("div")({
@@ -93,7 +93,7 @@ const StyledVirtuosoContainer = styled("div")({
  scrollbarWidth: "none",

  // Hide scrollbar for IE and older Edge
-  "-ms-overflow-style": "none",
+  "-msOverflowStyle": "none",
 });

 export const AppsLibraryDesktop = ({
--- a/src/components/Apps/TabComponent.tsx
+++ b/src/components/Apps/TabComponent.tsx
@@ -1,41 +1,43 @@
-import React from 'react'
-import { TabParent } from './Apps-styles'
+import { TabParent } from "./Apps-styles";
 import NavCloseTab from "../../assets/svgs/NavCloseTab.svg";
-import { getBaseApiReact } from '../../App';
-import { Avatar, ButtonBase } from '@mui/material';
+import { getBaseApiReact } from "../../App";
+import { Avatar, ButtonBase } from "@mui/material";
 import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import { executeEvent } from '../../utils/events';
+import { executeEvent } from "../../utils/events";
 import LockIcon from "@mui/icons-material/Lock";

-const TabComponent = ({isSelected, app}) => {
+const TabComponent = ({ isSelected, app }) => {
  return (
-    <ButtonBase onClick={()=> {
-        if(isSelected){
-            executeEvent('removeTab', {
-                data: app
-            })
-            return
+    <ButtonBase
+      onClick={() => {
+        if (isSelected) {
+          executeEvent("removeTab", {
+            data: app,
+          });
+          return;
        }
-        executeEvent('setSelectedTab', {
-            data: app
-        })
-    }}>
-    <TabParent sx={{
-        border: isSelected && '1px solid #FFFFFF'
-    }}>
+        executeEvent("setSelectedTab", {
+          data: app,
+        });
+      }}
+    >
+      <TabParent
+        sx={{
+          border: isSelected && "1px solid #FFFFFF",
+        }}
+      >
        {isSelected && (
-            
-            <img style={
-                {
-                    position: 'absolute',
-                    top: '-5px',
-                    right: '-5px',
-                    zIndex: 1
-                }
-            } src={NavCloseTab}/>
-           
-        ) }
-       {app?.isPrivate && !app?.privateAppProperties?.logo ? (
+          <img
+            style={{
+              position: "absolute",
+              top: "-5px",
+              right: "-5px",
+              zIndex: 1,
+            }}
+            src={NavCloseTab}
+          />
+        )}
+        {app?.isPrivate && !app?.privateAppProperties?.logo ? (
          <LockIcon
            sx={{
              height: "28px",
@@ -49,9 +51,13 @@ const TabComponent = ({isSelected, app}) => {
              width: "28px",
            }}
            alt={app?.name}
-            src={app?.privateAppProperties?.logo ? app?.privateAppProperties?.logo :`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
-              app?.name
-            }/qortal_avatar?async=true`}
+            src={
+              app?.privateAppProperties?.logo
+                ? app?.privateAppProperties?.logo
+                : `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                    app?.name
+                  }/qortal_avatar?async=true`
+            }
          >
            <img
              style={{
@@ -63,9 +69,9 @@ const TabComponent = ({isSelected, app}) => {
            />
          </Avatar>
        )}
-    </TabParent>
+      </TabParent>
    </ButtonBase>
-  )
-}
+  );
+};

-export default TabComponent
+export default TabComponent;