Skip to content

Commit 4201a56

Browse files
aslilacaslilac
committed
emotion: LicenseBannerView 
1 parent d464bb8 commit 4201a56

File tree

2 files changed

+65
-65
lines changed

2 files changed

+65
-65
lines changed

‎site/src/@types/emotion.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Theme as MuiTheme } from "@mui/system";
1+
import type { DefaultTheme as MuiTheme } from "@mui/system";
22

33
declare module "@emotion/react" {
44
interface Theme extends MuiTheme {}

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import {
2+
type CSSObject,
3+
type Interpolation,
4+
type Theme,
5+
useTheme,
6+
} from "@emotion/react";
17
import Link from "@mui/material/Link";
2-
import { makeStyles } from "@mui/styles";
8+
import { css } from "@emotion/react";
9+
import { useState } from "react";
310
import { Expander } from "components/Expander/Expander";
411
import { Pill } from "components/Pill/Pill";
5-
import { useState } from "react";
612
import { colors } from "theme/colors";
713

814
export const Language = {
@@ -14,6 +20,13 @@ export const Language = {
1420
moreDetails: "More",
1521
};
1622

23+
const styles = {
24+
leftContent: (theme) => ({
25+
marginRight: theme.spacing(1),
26+
marginLeft: theme.spacing(1),
27+
}),
28+
} satisfies Record<string, Interpolation<Theme>>;
29+
1730
export interface LicenseBannerViewProps {
1831
errors: string[];
1932
warnings: string[];
@@ -23,17 +36,26 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
2336
errors,
2437
warnings,
2538
}) => {
26-
const styles = useStyles();
39+
const theme = useTheme();
2740
const [showDetails, setShowDetails] = useState(false);
2841
const isError = errors.length > 0;
2942
const messages = [...errors, ...warnings];
3043
const type = isError ? "error" : "warning";
3144

45+
const containerStyles = css`
46+
${theme.typography.body2 as CSSObject}
47+
48+
padding: ${theme.spacing(1.5)};
49+
background-color: ${type === "error"
50+
? colors.red[12]
51+
: theme.palette.warning.main};
52+
`;
53+
3254
if (messages.length === 1) {
3355
return (
34-
<div className={`${styles.container} ${type}`}>
56+
<div css={containerStyles}>
3557
<Pill text={Language.licenseIssue} type={type} lightBorder />
36-
<div className={styles.leftContent}>
58+
<div css={styles.leftContent}>
3759
<span>{messages[0]}</span>
3860
&nbsp;
3961
<Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
@@ -42,65 +64,43 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
4264
</div>
4365
</div>
4466
);
45-
} else {
46-
return (
47-
<div className={`${styles.container} ${type}`}>
48-
<Pill
49-
text={Language.licenseIssues(messages.length)}
50-
type={type}
51-
lightBorder
52-
/>
53-
<div className={styles.leftContent}>
54-
<div>
55-
{Language.exceeded}
56-
&nbsp;
57-
<Link
58-
color="white"
59-
fontWeight="medium"
60-
href="mailto:sales@coder.com"
61-
>
62-
{Language.upgrade}
63-
</Link>
64-
</div>
65-
<Expander expanded={showDetails} setExpanded={setShowDetails}>
66-
<ul className={styles.list}>
67-
{messages.map((message) => (
68-
<li className={styles.listItem} key={message}>
69-
{message}
70-
</li>
71-
))}
72-
</ul>
73-
</Expander>
67+
}
68+
69+
return (
70+
<div css={containerStyles}>
71+
<Pill
72+
text={Language.licenseIssues(messages.length)}
73+
type={type}
74+
lightBorder
75+
/>
76+
<div css={styles.leftContent}>
77+
<div>
78+
{Language.exceeded}
79+
&nbsp;
80+
<Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
81+
{Language.upgrade}
82+
</Link>
7483
</div>
84+
<Expander expanded={showDetails} setExpanded={setShowDetails}>
85+
<ul
86+
css={{
87+
padding: theme.spacing(1),
88+
margin: 0,
89+
}}
90+
>
91+
{messages.map((message) => (
92+
<li
93+
css={{
94+
margin: theme.spacing(0.5),
95+
}}
96+
key={message}
97+
>
98+
{message}
99+
</li>
100+
))}
101+
</ul>
102+
</Expander>
75103
</div>
76-
);
77-
}
104+
</div>
105+
);
78106
};
79-
80-
const useStyles = makeStyles((theme) => ({
81-
container: {
82-
...theme.typography.body2,
83-
padding: theme.spacing(1.5),
84-
backgroundColor: theme.palette.warning.main,
85-
display: "flex",
86-
alignItems: "center",
87-
88-
"&.error": {
89-
backgroundColor: colors.red[12],
90-
},
91-
},
92-
flex: {
93-
display: "column",
94-
},
95-
leftContent: {
96-
marginRight: theme.spacing(1),
97-
marginLeft: theme.spacing(1),
98-
},
99-
list: {
100-
padding: theme.spacing(1),
101-
margin: 0,
102-
},
103-
listItem: {
104-
margin: theme.spacing(0.5),
105-
},
106-
}));

0 commit comments

Comments
 (0)