Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-14 12:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bind color and background to selected theme

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-05 21:09:58 +02:00
parent 214deea2d2
commit 807bc4e146
2 changed files with 426 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/App-styles.ts
View File

@ -1,7 +1,4 @@
import { import {
AppBar,
Button,
Toolbar,
Typography, Typography,
Box, Box,
TextField, TextField,
@ -12,34 +9,45 @@ import { styled } from "@mui/system";
export const AppContainer = styled(Box)(({ theme }) => ({ export const AppContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexDirection: 'column', flexDirection: "column",
width: "100vw", width: "100vw",
background: "rgba(39, 40, 44, 1)", background: "rgba(39, 40, 44, 1)",
height: "100vh", height: "100vh",
radius: "15px" radius: "15px",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({ export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "100%", width: "100%",
height: "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 }) => ({ export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexDirection: 'column', flexDirection: "column",
height: "100%", height: "100%",
width: "100%" width: "100%",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexDirection: 'column', flexDirection: "column",
width: "60px", width: "60px",
height: "100%", 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 }) => ({ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -47,72 +55,74 @@ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
width: "100%px", width: "100%px",
height: "60px", height: "60px",
background: "rgba(0, 0, 0, 0.1)", 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 }) => ({ export const TextP = styled(Typography)(({ theme }) => ({
fontSize: "13px", fontSize: "13px",
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: "Inter",
color: "white" backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const TextItalic = styled("span")(({ theme }) => ({ export const TextItalic = styled("span")(({ theme }) => ({
fontSize: "13px", fontSize: "13px",
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: "Inter",
color: "white", fontStyle: "italic",
fontStyle: "italic" backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const TextSpan = styled("span")(({ theme }) => ({ export const TextSpan = styled("span")(({ theme }) => ({
fontSize: "13px", fontSize: "13px",
fontFamily: "Inter", fontFamily: "Inter",
fontWeight: 800, fontWeight: 800,
color: "white" backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const AddressBox = styled(Box)` 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); background-color: rgba(41, 41, 43, 1);
color: white; color: white;
svg path { svg path {
fill: white; // Fill color changes to white on hover fill: white; // Fill color changes to white on hover
} }
} }
`;
`
export const CustomButton = styled(Box)` 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; display: inline-flex;
@ -140,6 +150,7 @@ interface CustomButtonProps {
bgColor?: string; bgColor?: string;
color?: string; color?: string;
} }
export const CustomButtonAccept = styled(Box)<CustomButtonProps>( export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
({ bgColor, color }) => ({ ({ bgColor, color }) => ({
boxSizing: "border-box", boxSizing: "border-box",
@ -165,9 +176,7 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
"&:hover": { "&:hover": {
opacity: 1, 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", color: color || "white",
svg: { svg: {
path: { path: {
@ -178,7 +187,6 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
}) })
); );
export const CustomInput = styled(TextField)({ export const CustomInput = styled(TextField)({
width: "183px", // Adjust the width as needed width: "183px", // Adjust the width as needed
borderRadius: "5px", borderRadius: "5px",
@ -198,13 +206,13 @@ export const CustomInput = styled(TextField)({
}, },
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {
"& fieldset": { "& fieldset": {
border: '0.5px solid rgba(255, 255, 255, 0.5)', border: "0.5px solid rgba(255, 255, 255, 0.5)",
}, },
"&:hover fieldset": { "&: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": { "&.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": { "& .MuiInput-underline:before": {
@ -224,5 +232,4 @@ export const CustomLabel = styled(InputLabel)`
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
`;
`

520
src/components/Apps/Apps-styles.tsx
View File

@ -1,22 +1,13 @@
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
@ -27,289 +18,366 @@ import {
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 }) => ({ backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "90%", width: "90%",
justifyContent: 'space-evenly', justifyContent: "space-evenly",
gap: '24px', gap: "24px",
flexWrap: 'wrap', flexWrap: "wrap",
alignItems: 'flex-start', alignItems: "flex-start",
alignSelf: 'center' alignSelf: "center",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
})); export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "100%", width: "100%",
flexDirection: 'column', flexDirection: "column",
justifyContent: 'flex-start', justifyContent: "flex-start",
alignItems: 'center', alignItems: "center",
})); backgroundColor: theme.palette.background.paper,
export const AppsWidthLimiter = styled(Box)(({ theme }) => ({ }));
export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "90%", width: "90%",
flexDirection: 'column', flexDirection: "column",
justifyContent: 'flex-start', justifyContent: "flex-start",
alignItems: 'flex-start', alignItems: "flex-start",
})); backgroundColor: theme.palette.background.default,
export const AppsSearchContainer = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary,
}));
export const AppsSearchContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "90%", width: "90%",
justifyContent: 'space-between', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
backgroundColor: '#434343', borderRadius: "8px",
borderRadius: '8px', padding: "0px 10px",
padding: '0px 10px', height: "36px",
height: '36px' backgroundColor: theme.palette.background.default,
})); color: theme.palette.text.primary,
export const AppsSearchLeft = styled(Box)(({ theme }) => ({ }));
export const AppsSearchLeft = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "90%", width: "90%",
justifyContent: 'flex-start', justifyContent: "flex-start",
alignItems: 'center', alignItems: "center",
gap: '10px', gap: "10px",
flexGrow: 1, flexGrow: 1,
flexShrink: 0 flexShrink: 0,
})); backgroundColor: theme.palette.background.default,
export const AppsSearchRight = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary,
}));
export const AppsSearchRight = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "90%", width: "90%",
justifyContent: 'flex-end', justifyContent: "flex-end",
alignItems: 'center', alignItems: "center",
flexShrink: 1 flexShrink: 1,
})); backgroundColor: theme.palette.background.default,
export const AppCircleContainer = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary,
}));
export const AppCircleContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: '5px', gap: "5px",
alignItems: 'center', alignItems: "center",
width: '100%' width: "100%",
})); backgroundColor: theme.palette.background.default,
export const Add = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary,
fontSize: '36px', }));
fontWeight: 500,
lineHeight: '43.57px',
textAlign: 'left'
})); export const Add = styled(Typography)(({ theme }) => ({
export const AppCircleLabel = styled(Typography)(({ theme }) => ({ fontSize: "36px",
fontSize: '14px', fontWeight: 500,
lineHeight: "43.57px",
textAlign: "left",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppCircleLabel = styled(Typography)(({ theme }) => ({
fontSize: "14px",
fontWeight: 500, fontWeight: 500,
lineHeight: 1.2, lineHeight: 1.2,
// whiteSpace: 'nowrap', // whiteSpace: 'nowrap',
overflow: 'hidden', overflow: "hidden",
textOverflow: 'ellipsis', textOverflow: "ellipsis",
width: '120%', width: "120%",
'-webkit-line-clamp': '2', "-webkit-line-clamp": "2",
'-webkit-box-orient': 'vertical', "-webkit-box-orient": "vertical",
'display': '-webkit-box', display: "-webkit-box",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
})); export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ fontSize: "16px",
fontSize: '16px',
fontWeight: 500, fontWeight: 500,
lineHeight: 1.2, lineHeight: 1.2,
})); backgroundColor: theme.palette.background.default,
export const AppCircle = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary,
}));
export const AppCircle = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
width: "75px", width: "75px",
flexDirection: "column", flexDirection: "column",
height: "75px", height: "75px",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
borderRadius: '50%', borderRadius: "50%",
backgroundColor: "var(--apps-circle)", backgroundColor: theme.palette.background.default,
border: '1px solid #FFFFFF' color: theme.palette.text.primary,
})); border: "1px solid #FFFFFF",
}));
export const AppInfoSnippetContainer = 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%",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({ export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
justifyContent: 'flex-start', justifyContent: "flex-start",
alignItems: 'center', alignItems: "center",
gap: '12px' gap: "12px",
})); backgroundColor: theme.palette.background.default,
export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({ color: theme.palette.text.primary,
display: "flex", }));
justifyContent: 'flex-end',
alignItems: 'center',
}));
export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({ 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 AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
backgroundColor: "#247C0E", backgroundColor: "#247C0E",
width: '101px', color: theme.palette.text.primary,
height: '29px', width: "101px",
display: 'flex', height: "29px",
justifyContent: 'center', display: "flex",
alignItems: 'center', justifyContent: "center",
borderRadius: '25px', alignItems: "center",
alignSelf: 'center' borderRadius: "25px",
})); alignSelf: "center",
}));
export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({ export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
fontSize: '14px', fontSize: "14px",
fontWeight: 500, fontWeight: 500,
lineHeight: 1.2, lineHeight: 1.2,
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppPublishTagsContainer = styled(Box)(({theme})=> ({ export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
gap: '10px', gap: "10px",
flexWrap: 'wrap', flexWrap: "wrap",
justifyContent: 'flex-start', justifyContent: "flex-start",
width: '100%', width: "100%",
display: 'flex' display: "flex",
})) backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: 'center', justifyContent: "center",
alignItems: 'flex-start', alignItems: "flex-start",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppInfoAppName = styled(Typography)(({ theme }) => ({ export const AppInfoAppName = styled(Typography)(({ theme }) => ({
fontSize: '16px', fontSize: "16px",
fontWeight: 500, fontWeight: 500,
lineHeight: 1.2, lineHeight: 1.2,
textAlign: 'start' textAlign: "start",
})); backgroundColor: theme.palette.background.default,
export const AppInfoUserName = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary,
fontSize: '13px', }));
export const AppInfoUserName = styled(Typography)(({ theme }) => ({
fontSize: "13px",
fontWeight: 400, fontWeight: 400,
lineHeight: 1.2, lineHeight: 1.2,
color: '#8D8F93', textAlign: "start",
textAlign: 'start' backgroundColor: theme.palette.background.default,
})); color: theme.palette.text.primary,
}));
export const AppsNavBarParent = styled(Box)(({ theme }) => ({
export const AppsNavBarParent = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
justifyContent: 'space-between', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
width: '100%', width: "100%",
height: '60px', height: "60px",
backgroundColor: '#1F2023', padding: "0px 10px",
padding: '0px 10px',
position: "fixed", position: "fixed",
bottom: 0, bottom: 0,
zIndex: 1, zIndex: 1,
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsNavBarLeft = styled(Box)(({ theme }) => ({ export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
justifyContent: 'flex-start', justifyContent: "flex-start",
alignItems: 'center', alignItems: "center",
flexGrow: 1 flexGrow: 1,
})); 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 AppsNavBarRight = styled(Box)(({ theme }) => ({
height: '36px',
width: '36px',
backgroundColor: '#434343',
position: 'relative',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}));
export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
justifyContent: 'space-between', justifyContent: "flex-end",
alignItems: 'center', alignItems: "center",
width: '100%', backgroundColor: theme.palette.background.default,
backgroundColor: '#181C23' color: theme.palette.text.primary,
})); }));
export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ export const TabParent = styled(Box)(({ theme }) => ({
height: "36px",
width: "36px",
position: "relative",
borderRadius: "50%",
display: "flex", display: "flex",
justifyContent: 'flex-start', alignItems: "center",
alignItems: 'center', justifyContent: "center",
})); 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 PublishQAppCTAParent = styled(Box)(({ 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", display: "flex",
justifyContent: 'center', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
width: '60px', width: "100%",
height: '60px', backgroundColor: theme.palette.background.default,
backgroundColor: '#4BBCFE' color: theme.palette.text.primary,
})); }));
export const PublishQAppInfo = styled(Typography)(({ theme }) => ({ export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
fontSize: '10px', 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, fontWeight: 400,
lineHeight: 1.2, lineHeight: 1.2,
fontStyle: 'italic' fontStyle: "italic",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({ export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
width: '101px', width: "101px",
height: '30px', height: "30px",
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
borderRadius: '5px', borderRadius: "5px",
backgroundColor: '#0091E1',
color: 'white',
fontWeight: 600, fontWeight: 600,
fontSize: '10px' fontSize: "10px",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
alignItems: 'center', alignItems: "center",
width: '100%', width: "100%",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));
export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({ export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
flexDirection: 'column', flexDirection: "column",
})); backgroundColor: theme.palette.background.default,
export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary,
fontSize: '12px', }));
export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
fontSize: "12px",
fontWeight: 700, fontWeight: 700,
lineHeight: 1.2, lineHeight: 1.2,
color: '#8D8F93', color: "#8D8F93",
})); backgroundColor: theme.palette.background.default,
export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary,
fontSize: '12px', }));
export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
fontSize: "12px",
fontWeight: 500, fontWeight: 500,
lineHeight: 1.2, lineHeight: 1.2,
color: '#8D8F93', color: "#8D8F93",
})); backgroundColor: theme.palette.background.default,
export const AppsInfoDescription = styled(Typography)(({ theme }) => ({ color: theme.palette.text.primary,
fontSize: '13px', }));
export const AppsInfoDescription = styled(Typography)(({ theme }) => ({
fontSize: "13px",
fontWeight: 300, fontWeight: 300,
lineHeight: 1.2, lineHeight: 1.2,
width: '90%', width: "90%",
textAlign: 'start' textAlign: "start",
})); backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
}));