47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { alpha, Box, styled } from "@mui/material";
|
|
|
|
export const ProfileBox = styled(Box)(
|
|
({ theme, "aria-selected": selected }) => {
|
|
const { mode, primary, text } = theme.palette;
|
|
const key = `${mode}-${!!selected}`;
|
|
|
|
const backgroundColor = mode === "light" ? "#ffffff" : "#282A36";
|
|
|
|
const color = {
|
|
"light-true": text.secondary,
|
|
"light-false": text.secondary,
|
|
"dark-true": alpha(text.secondary, 0.65),
|
|
"dark-false": alpha(text.secondary, 0.65),
|
|
}[key]!;
|
|
|
|
const h2color = {
|
|
"light-true": primary.main,
|
|
"light-false": text.primary,
|
|
"dark-true": primary.main,
|
|
"dark-false": text.primary,
|
|
}[key]!;
|
|
|
|
const borderLeft = {
|
|
"light-true": `3px solid ${primary.main}`,
|
|
"light-false": "none",
|
|
"dark-true": `3px solid ${primary.main}`,
|
|
"dark-false": "none",
|
|
}[key];
|
|
|
|
return {
|
|
position: "relative",
|
|
width: "100%",
|
|
display: "block",
|
|
cursor: "pointer",
|
|
textAlign: "left",
|
|
padding: "8px 16px",
|
|
boxSizing: "border-box",
|
|
backgroundColor,
|
|
borderLeft,
|
|
borderRadius: "8px",
|
|
color,
|
|
"& h2": { color: h2color },
|
|
};
|
|
}
|
|
);
|