From 807bc4e14670fbd4fe594b0c262f1fb26558c509 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 5 Apr 2025 21:09:58 +0200 Subject: [PATCH] Bind color and background to selected theme --- src/App-styles.ts | 117 ++--- src/components/Apps/Apps-styles.tsx | 660 +++++++++++++++------------- 2 files changed, 426 insertions(+), 351 deletions(-) diff --git a/src/App-styles.ts b/src/App-styles.ts index 08773ea..3581347 100644 --- a/src/App-styles.ts +++ b/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; -border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); -justify-content: space-between; -align-items: center; -width: auto; -height: 25px; -padding: 5px 15px 5px 15px; -gap: 5px; -border-radius: 100px; -font-family: Inter; -font-size: 12px; -font-weight: 600; -line-height: 14.52px; -text-align: left; -color: var(--50-white, rgba(255, 255, 255, 0.5)); -cursor: pointer; -transition: all 0.2s; -&:hover { + display: flex; + border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); + justify-content: space-between; + align-items: center; + width: auto; + height: 25px; + padding: 5px 15px 5px 15px; + gap: 5px; + border-radius: 100px; + font-family: Inter; + font-size: 12px; + font-weight: 600; + line-height: 14.52px; + text-align: left; + color: var(--50-white, rgba(255, 255, 255, 0.5)); + cursor: pointer; + transition: all 0.2s; + &: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; -gap: 10px; - - -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; + 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)( ({ bgColor, color }) => ({ boxSizing: "border-box", @@ -165,20 +176,17 @@ export const CustomButtonAccept = styled(Box)( "&:hover": { opacity: 1, - backgroundColor: bgColor - ? bgColor - : "rgba(41, 41, 43, 1)", // fallback hover bg + backgroundColor: bgColor ? bgColor : "rgba(41, 41, 43, 1)", // fallback hover bg color: color || "white", svg: { path: { - fill: color || "white", + fill: color || "white", }, }, }, }) ); - 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); - -` \ No newline at end of file +`; diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 995cd70..912c6d4 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -1,315 +1,383 @@ -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' - })); \ No newline at end of file +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, + 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, +}));