Bind color and background to selected theme

src/App-styles.ts

@@ -1,7 +1,4 @@
 import {
-  AppBar,
-  Button,
-  Toolbar,
   Typography,
   Box,
   TextField,
@@ -12,34 +9,45 @@ import { styled } from "@mui/system";
 export const AppContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  flexDirection: 'column',
+  flexDirection: "column",
   width: "100vw",
   background: "rgba(39, 40, 44, 1)",
   height: "100vh",
-  radius: "15px"
+  radius: "15px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
+
 export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   width: "100%",
   height: "100%",
-  justifyContent: "space-between"
+  justifyContent: "space-between",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
+
 export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  flexDirection: 'column',
+  flexDirection: "column",
   height: "100%",
-  width: "100%"
+  width: "100%",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
+
 export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  flexDirection: 'column',
+  flexDirection: "column",
   width: "60px",
   height: "100%",
-  background: "rgba(0, 0, 0, 0.1)"
+  background: "rgba(0, 0, 0, 0.1)",
-
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
+
 export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -47,72 +55,74 @@ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
   width: "100%px",
   height: "60px",
   background: "rgba(0, 0, 0, 0.1)",
-  padding: '20px'
+  padding: "20px",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
 
 export const TextP = styled(Typography)(({ theme }) => ({
   fontSize: "13px",
   fontWeight: 600,
   fontFamily: "Inter",
-  color: "white"
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
 
 export const TextItalic = styled("span")(({ theme }) => ({
   fontSize: "13px",
   fontWeight: 600,
   fontFamily: "Inter",
-  color: "white",
+  fontStyle: "italic",
-  fontStyle: "italic"
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
 
 export const TextSpan = styled("span")(({ theme }) => ({
   fontSize: "13px",
   fontFamily: "Inter",
   fontWeight: 800,
-  color: "white"
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
 }));
 
 export const AddressBox = styled(Box)`
-display: flex;
+  display: flex;
-border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
+  border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
-justify-content: space-between;
+  justify-content: space-between;
-align-items: center;
+  align-items: center;
-width: auto;
+  width: auto;
-height: 25px;
+  height: 25px;
-padding: 5px 15px 5px 15px;
+  padding: 5px 15px 5px 15px;
-gap: 5px;
+  gap: 5px;
-border-radius: 100px;
+  border-radius: 100px;
-font-family: Inter;
+  font-family: Inter;
-font-size: 12px;
+  font-size: 12px;
-font-weight: 600;
+  font-weight: 600;
-line-height: 14.52px;
+  line-height: 14.52px;
-text-align: left;
+  text-align: left;
-color: var(--50-white, rgba(255, 255, 255, 0.5));
+  color: var(--50-white, rgba(255, 255, 255, 0.5));
-cursor: pointer;
+  cursor: pointer;
-transition: all 0.2s;
+  transition: all 0.2s;
-&:hover {
+  &:hover {
     background-color: rgba(41, 41, 43, 1);
     color: white;
     svg path {
       fill: white; // Fill color changes to white on hover
     }
   }
-
+`;
-`
 
 export const CustomButton = styled(Box)`
+  /* Authenticate */
 
-/* Authenticate */
+  box-sizing: border-box;
 
-box-sizing: border-box;
+  padding: 15px 20px;
+  gap: 10px;
 
-padding: 15px 20px;
+  border: 0.5px solid rgba(255, 255, 255, 0.5);
-gap: 10px;
+  filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
-
+  border-radius: 5px;
-
-border: 0.5px solid rgba(255, 255, 255, 0.5);
-filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
-border-radius: 5px;
 
   display: inline-flex;
 
@@ -140,6 +150,7 @@ interface CustomButtonProps {
   bgColor?: string;
   color?: string;
 }
+
 export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
   ({ bgColor, color }) => ({
     boxSizing: "border-box",
@@ -165,9 +176,7 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
 
     "&:hover": {
       opacity: 1,
-      backgroundColor: bgColor
+      backgroundColor: bgColor ? bgColor : "rgba(41, 41, 43, 1)", // fallback hover bg
-        ? bgColor
-        : "rgba(41, 41, 43, 1)",  // fallback hover bg
       color: color || "white",
       svg: {
         path: {
@@ -178,7 +187,6 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
   })
 );
 
-
 export const CustomInput = styled(TextField)({
   width: "183px", // Adjust the width as needed
   borderRadius: "5px",
@@ -198,13 +206,13 @@ export const CustomInput = styled(TextField)({
   },
   "& .MuiOutlinedInput-root": {
     "& fieldset": {
-      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      border: "0.5px solid rgba(255, 255, 255, 0.5)",
     },
     "&:hover fieldset": {
-     border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      border: "0.5px solid rgba(255, 255, 255, 0.5)",
     },
     "&.Mui-focused fieldset": {
-     border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      border: "0.5px solid rgba(255, 255, 255, 0.5)",
     },
   },
   "& .MuiInput-underline:before": {
@@ -224,5 +232,4 @@ export const CustomLabel = styled(InputLabel)`
   font-size: 10px;
   line-height: 12px;
   color: rgba(255, 255, 255, 0.5);
-
+`;
-`

src/components/Apps/Apps-styles.tsx

@@ -1,315 +1,383 @@
-import {
+import { Typography, Box, ButtonBase } from "@mui/material";
-    AppBar,
+import { styled } from "@mui/system";
-    Button,
-    Toolbar,
-    Typography,
-    Box,
-    TextField,
-    InputLabel,
-    ButtonBase,
-  } from "@mui/material";
-  import { styled } from "@mui/system";
 
-  export const AppsParent = styled(Box)(({ theme }) => ({
+export const AppsParent = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-      width: "100%",
+  width: "100%",
-      flexDirection: "column",
+  flexDirection: "column",
-      height: "100%",
+  height: "100%",
-      alignItems: "center",
+  alignItems: "center",
-      overflow: 'auto',
+  overflow: "auto",
-        // For WebKit-based browsers (Chrome, Safari, etc.)
+  // For WebKit-based browsers (Chrome, Safari, etc.)
-    "::-webkit-scrollbar": {
+  "::-webkit-scrollbar": {
-        width: "0px", // Set the width to 0 to hide the scrollbar
+    width: "0px", // Set the width to 0 to hide the scrollbar
-        height: "0px", // Set the height to 0 for horizontal scrollbar
+    height: "0px", // Set the height to 0 for horizontal scrollbar
-      },
+  },
 
-      // For Firefox
+  // For Firefox
-      scrollbarWidth: "none", // Hides the scrollbar in Firefox
+  scrollbarWidth: "none", // Hides the scrollbar in Firefox
 
-      // Optional for better cross-browser consistency
+  // Optional for better cross-browser consistency
-      "-ms-overflow-style": "none" // Hides scrollbar in IE and Edge
+  "-msOverflowStyle": "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'
 
-  }));
+  backgroundColor: theme.palette.background.default,
-  export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.primary,
-    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 AppsContainer = styled(Box)(({ theme }) => ({
-  export const AppCircleLabel = styled(Typography)(({ theme }) => ({
+  display: "flex",
-    fontSize: '14px',
+  width: "90%",
-    fontWeight: 500,
+  justifyContent: "space-evenly",
-    lineHeight: 1.2,
+  gap: "24px",
-    // whiteSpace: 'nowrap',   
+  flexWrap: "wrap",
-  overflow: 'hidden',     
+  alignItems: "flex-start",
-  textOverflow: 'ellipsis', 
+  alignSelf: "center",
-  width: '120%',
+  backgroundColor: theme.palette.background.default,
-  '-webkit-line-clamp': '2',
+  color: theme.palette.text.primary,
-  '-webkit-box-orient': 'vertical',
+}));
-  'display': '-webkit-box',
 
-  }));
+export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
-  export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
+  display: "flex",
-    fontSize: '16px',
+  width: "100%",
-    fontWeight: 500,
+  flexDirection: "column",
-    lineHeight: 1.2,
+  justifyContent: "flex-start",
-  }));
+  alignItems: "center",
-  export const AppCircle = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
-    display: "flex",
+}));
-      width: "75px",
-      flexDirection: "column",
-      height: "75px",
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '50%',
-      backgroundColor: "var(--apps-circle)",
-      border: '1px solid #FFFFFF'
-  }));
 
-  export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
+export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    justifyContent: 'space-between',
+  width: "90%",
-    alignItems: 'center',
+  flexDirection: "column",
-    width: '100%'
+  justifyContent: "flex-start",
-  }));
+  alignItems: "flex-start",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
 
-  export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
+export const AppsSearchContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    justifyContent: 'flex-start',
+  width: "90%",
-    alignItems: 'center',
+  justifyContent: "space-between",
-    gap: '12px'
+  alignItems: "center",
-  }));
+  borderRadius: "8px",
-  export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
+  padding: "0px 10px",
-    display: "flex",
+  height: "36px",
-    justifyContent: 'flex-end',
+  backgroundColor: theme.palette.background.default,
-    alignItems: 'center',
+  color: theme.palette.text.primary,
-  }));
+}));
 
-  export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
+export const AppsSearchLeft = styled(Box)(({ theme }) => ({
-    backgroundColor: "#247C0E",
+  display: "flex",
-    width: '101px',
+  width: "90%",
-    height: '29px',
+  justifyContent: "flex-start",
-    display: 'flex',
+  alignItems: "center",
-    justifyContent: 'center',
+  gap: "10px",
-    alignItems: 'center',
+  flexGrow: 1,
-    borderRadius: '25px',
+  flexShrink: 0,
-    alignSelf: 'center'
+  backgroundColor: theme.palette.background.default,
-  }));
+  color: theme.palette.text.primary,
+}));
 
-  export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
+export const AppsSearchRight = styled(Box)(({ theme }) => ({
-    fontSize: '14px',
+  display: "flex",
-    fontWeight: 500,
+  width: "90%",
-    lineHeight: 1.2,
+  justifyContent: "flex-end",
-  }));
+  alignItems: "center",
+  flexShrink: 1,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
 
-  export const AppPublishTagsContainer = styled(Box)(({theme})=> ({
+export const AppCircleContainer = styled(Box)(({ theme }) => ({
-    gap: '10px',
+  display: "flex",
-    flexWrap: 'wrap',
+  flexDirection: "column",
-    justifyContent: 'flex-start',
+  gap: "5px",
-    width: '100%',
+  alignItems: "center",
-    display: 'flex'
+  width: "100%",
-  }))
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
 
+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 AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
+export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-    display: "flex",
+  fontSize: "14px",
-    flexDirection: "column",
+  fontWeight: 500,
-    justifyContent: 'center',
+  lineHeight: 1.2,
-    alignItems: 'flex-start',
+  // 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 AppInfoAppName = styled(Typography)(({ theme }) => ({
+export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
-    fontSize: '16px',
+  fontSize: "16px",
-    fontWeight: 500,
+  fontWeight: 500,
-    lineHeight: 1.2,
+  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,
-    color: '#8D8F93',
-    textAlign: 'start'
-  }));
 
+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 AppsNavBarParent = styled(Box)(({ theme }) => ({
+export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    justifyContent: 'space-between',
+  justifyContent: "space-between",
-    alignItems: 'center',
+  alignItems: "center",
-    width: '100%',
+  width: "100%",
-    height: '60px',
+  backgroundColor: theme.palette.background.default,
-    backgroundColor: '#1F2023',
+  color: theme.palette.text.primary,
-    padding: '0px 10px',
+}));
-    position: "fixed",
-    bottom: 0,
-    zIndex: 1,
-  }));
 
-  export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
+export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    justifyContent: 'flex-start',
+  justifyContent: "flex-start",
-    alignItems: 'center',
+  alignItems: "center",
-    flexGrow: 1
+  gap: "12px",
-  }));
+  backgroundColor: theme.palette.background.default,
-  export const AppsNavBarRight = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.primary,
-    display: "flex",
+}));
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  }));
 
-  export const TabParent = styled(Box)(({ theme }) => ({
+export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
-    height: '36px',
+  display: "flex",
-    width: '36px',
+  justifyContent: "flex-end",
-    backgroundColor: '#434343',
+  alignItems: "center",
-    position: 'relative',
+  backgroundColor: theme.palette.background.default,
-    borderRadius: '50%',
+  color: theme.palette.text.primary,
-    display: 'flex',
+}));
-    alignItems: 'center',
-    justifyContent: 'center'
-  }));
 
-  export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
+export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
-    display: "flex",
+  backgroundColor: "#247C0E",
-    justifyContent: 'space-between',
+  color: theme.palette.text.primary,
-    alignItems: 'center',
+  width: "101px",
-    width: '100%',
+  height: "29px",
-    backgroundColor: '#181C23'
+  display: "flex",
-  }));
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "25px",
+  alignSelf: "center",
+}));
 
-  export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
+export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
-    display: "flex",
+  fontSize: "14px",
-    justifyContent: 'flex-start',
+  fontWeight: 500,
-    alignItems: 'center',
+  lineHeight: 1.2,
-  }));
+  backgroundColor: theme.palette.background.default,
-  export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.primary,
-    display: "flex",
+}));
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  }));
 
-  export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
+export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
-    width: '101px',
+  gap: "10px",
-    height: '29px',
+  flexWrap: "wrap",
-    display: 'flex',
+  justifyContent: "flex-start",
-    justifyContent: 'center',
+  width: "100%",
-    alignItems: 'center',
+  display: "flex",
-    borderRadius: '25px',
+  backgroundColor: theme.palette.background.default,
-    border: '1px solid #FFFFFF'
+  color: theme.palette.text.primary,
-  }));
+}));
-  export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
-    display: "flex",
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '60px',
-    height: '60px',
-    backgroundColor: '#4BBCFE'
-  }));
 
-  export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
+export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
-    fontSize: '10px',
+  display: "flex",
-    fontWeight: 400,
+  flexDirection: "column",
-    lineHeight: 1.2,
+  justifyContent: "center",
-    fontStyle: 'italic'
+  alignItems: "flex-start",
-  }));
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
 
-  export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
+export const AppInfoAppName = styled(Typography)(({ theme }) => ({
-    width: '101px',
+  fontSize: "16px",
-    height: '30px',
+  fontWeight: 500,
-    display: 'flex',
+  lineHeight: 1.2,
-    justifyContent: 'center',
+  textAlign: "start",
-    alignItems: 'center',
+  backgroundColor: theme.palette.background.default,
-    borderRadius: '5px',
+  color: theme.palette.text.primary,
-    backgroundColor: '#0091E1',
+}));
-    color: 'white',
-    fontWeight: 600,
-    fontSize: '10px'
-  }));
 
+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 AppsCategoryInfo =  styled(Box)(({ theme }) => ({
+export const AppsNavBarParent = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    alignItems: 'center',
+  justifyContent: "space-between",
-    width: '100%',
+  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 AppsCategoryInfoSub =  styled(Box)(({ theme }) => ({
+export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
-    display: "flex",
+  display: "flex",
-    flexDirection: 'column',
+  justifyContent: "flex-start",
-  }));
+  alignItems: "center",
-  export const AppsCategoryInfoLabel =  styled(Typography)(({ theme }) => ({
+  flexGrow: 1,
-    fontSize: '12px',
+  backgroundColor: theme.palette.background.default,
-    fontWeight: 700,
+  color: theme.palette.text.primary,
-    lineHeight: 1.2,
+}));
-    color: '#8D8F93',
+
-  }));
+export const AppsNavBarRight = styled(Box)(({ theme }) => ({
-  export const AppsCategoryInfoValue =  styled(Typography)(({ theme }) => ({
+  display: "flex",
-    fontSize: '12px',
+  justifyContent: "flex-end",
-    fontWeight: 500,
+  alignItems: "center",
-    lineHeight: 1.2,
+  backgroundColor: theme.palette.background.default,
-    color: '#8D8F93',
+  color: theme.palette.text.primary,
-  }));
+}));
-  export const AppsInfoDescription =  styled(Typography)(({ theme }) => ({
+
-    fontSize: '13px',
+export const TabParent = styled(Box)(({ theme }) => ({
-    fontWeight: 300,
+  height: "36px",
-    lineHeight: 1.2,
+  width: "36px",
-    width: '90%',
+  position: "relative",
-    textAlign: 'start'
+  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,
+  color: "#8D8F93",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}));
+
+export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: 1.2,
+  color: "#8D8F93",
+  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,
+}));