Skip to content

Commit af80a93

Browse files
aslilacaslilac
committed
emotion: Badges 
1 parent f254256 commit af80a93

File tree

1 file changed

+74
-107
lines changed
  • site/src/components/DeploySettingsLayout

1 file changed

+74
-107
lines changed

‎site/src/components/DeploySettingsLayout/Badges.tsx

Lines changed: 74 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,131 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { Stack } from "components/Stack/Stack";
3-
import { PropsWithChildren, FC } from "react";
4-
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
5-
import { combineClasses } from "utils/combineClasses";
1+
import type { PropsWithChildren, FC } from "react";
62
import Tooltip from "@mui/material/Tooltip";
3+
import { type Interpolation, type Theme } from "@emotion/react";
4+
import { Stack } from "components/Stack/Stack";
5+
6+
const styles = {
7+
badge: (theme) => ({
8+
fontSize: 10,
9+
height: 24,
10+
fontWeight: 600,
11+
textTransform: "uppercase",
12+
letterSpacing: "0.085em",
13+
padding: theme.spacing(0, 1.5),
14+
borderRadius: 9999,
15+
display: "flex",
16+
alignItems: "center",
17+
width: "fit-content",
18+
whiteSpace: "nowrap",
19+
}),
20+
21+
enabledBadge: (theme) => ({
22+
border: `1px solid ${theme.palette.success.light}`,
23+
backgroundColor: theme.palette.success.dark,
24+
}),
25+
errorBadge: (theme) => ({
26+
border: `1px solid ${theme.palette.error.light}`,
27+
backgroundColor: theme.palette.error.dark,
28+
}),
29+
warnBadge: (theme) => ({
30+
border: `1px solid ${theme.palette.warning.light}`,
31+
backgroundColor: theme.palette.warning.dark,
32+
}),
33+
} satisfies Record<string, Interpolation<Theme>>;
734

835
export const EnabledBadge: FC = () => {
9-
const styles = useStyles();
10-
return (
11-
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
12-
Enabled
13-
</span>
14-
);
36+
return <span css={[styles.badge, styles.enabledBadge]}>Enabled</span>;
1537
};
1638

1739
export const EntitledBadge: FC = () => {
18-
const styles = useStyles();
19-
return (
20-
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
21-
Entitled
22-
</span>
23-
);
40+
return <span css={[styles.badge, styles.enabledBadge]}>Entitled</span>;
2441
};
2542

26-
export const HealthyBadge: FC<{ derpOnly: boolean }> = ({ derpOnly }) => {
27-
const styles = useStyles();
28-
let text = "Healthy";
29-
if (derpOnly) {
30-
text = "Healthy (DERP Only)";
31-
}
43+
interface HealthyBadge {
44+
derpOnly: boolean;
45+
}
46+
export const HealthyBadge: FC<HealthyBadge> = (props) => {
47+
const { derpOnly } = props;
3248
return (
33-
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
34-
{text}
49+
<span css={[styles.badge, styles.enabledBadge]}>
50+
{derpOnly ? "Healthy (DERP only)" : "Healthy"}
3551
</span>
3652
);
3753
};
3854

3955
export const NotHealthyBadge: FC = () => {
40-
const styles = useStyles();
41-
return (
42-
<span className={combineClasses([styles.badge, styles.errorBadge])}>
43-
Unhealthy
44-
</span>
45-
);
56+
return <span css={[styles.badge, styles.errorBadge]}>Unhealthy</span>;
4657
};
4758

4859
export const NotRegisteredBadge: FC = () => {
49-
const styles = useStyles();
5060
return (
5161
<Tooltip title="Workspace Proxy has never come online and needs to be started.">
52-
<span className={combineClasses([styles.badge, styles.warnBadge])}>
53-
Never Seen
54-
</span>
62+
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
5563
</Tooltip>
5664
);
5765
};
5866

5967
export const NotReachableBadge: FC = () => {
60-
const styles = useStyles();
6168
return (
6269
<Tooltip title="Workspace Proxy not responding to http(s) requests.">
63-
<span className={combineClasses([styles.badge, styles.warnBadge])}>
64-
Not Dialable
65-
</span>
70+
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
6671
</Tooltip>
6772
);
6873
};
6974

7075
export const DisabledBadge: FC = () => {
71-
const styles = useStyles();
7276
return (
73-
<span className={combineClasses([styles.badge, styles.disabledBadge])}>
77+
<span
78+
css={[
79+
styles.badge,
80+
(theme) => ({
81+
border: `1px solid ${theme.palette.divider}`,
82+
backgroundColor: theme.palette.background.paper,
83+
}),
84+
]}
85+
>
7486
Disabled
7587
</span>
7688
);
7789
};
7890

7991
export const EnterpriseBadge: FC = () => {
80-
const styles = useStyles();
8192
return (
82-
<span className={combineClasses([styles.badge, styles.enterpriseBadge])}>
93+
<span
94+
css={[
95+
styles.badge,
96+
(theme) => ({
97+
backgroundColor: theme.palette.info.dark,
98+
border: `1px solid ${theme.palette.info.light}`,
99+
}),
100+
]}
101+
>
83102
Enterprise
84103
</span>
85104
);
86105
};
87106

88107
export const AlphaBadge: FC = () => {
89-
const styles = useStyles();
90108
return (
91-
<span className={combineClasses([styles.badge, styles.alphaBadge])}>
109+
<span
110+
css={[
111+
styles.badge,
112+
(theme) => ({
113+
border: `1px solid ${theme.palette.error.light}`,
114+
backgroundColor: theme.palette.error.dark,
115+
}),
116+
]}
117+
>
92118
Alpha
93119
</span>
94120
);
95121
};
96122

97123
export const Badges: FC<PropsWithChildren> = ({ children }) => {
98-
const styles = useStyles();
99124
return (
100125
<Stack
101-
className={styles.badges}
126+
css={(theme) => ({
127+
margin: theme.spacing(0, 0, 2),
128+
})}
102129
direction="row"
103130
alignItems="center"
104131
spacing={1}
@@ -107,63 +134,3 @@ export const Badges: FC<PropsWithChildren> = ({ children }) => {
107134
</Stack>
108135
);
109136
};
110-
111-
const useStyles = makeStyles((theme) => ({
112-
badges: {
113-
margin: theme.spacing(0, 0, 2),
114-
},
115-
116-
badge: {
117-
fontSize: 10,
118-
height: 24,
119-
fontWeight: 600,
120-
textTransform: "uppercase",
121-
letterSpacing: "0.085em",
122-
padding: theme.spacing(0, 1.5),
123-
borderRadius: 9999,
124-
display: "flex",
125-
alignItems: "center",
126-
width: "fit-content",
127-
whiteSpace: "nowrap",
128-
},
129-
130-
enterpriseBadge: {
131-
backgroundColor: theme.palette.info.dark,
132-
border: `1px solid ${theme.palette.info.light}`,
133-
},
134-
135-
alphaBadge: {
136-
border: `1px solid ${theme.palette.error.light}`,
137-
backgroundColor: theme.palette.error.dark,
138-
},
139-
140-
versionBadge: {
141-
border: `1px solid ${theme.palette.success.light}`,
142-
backgroundColor: theme.palette.success.dark,
143-
textTransform: "none",
144-
color: "white",
145-
fontFamily: MONOSPACE_FONT_FAMILY,
146-
textDecoration: "none",
147-
fontSize: 12,
148-
},
149-
150-
enabledBadge: {
151-
border: `1px solid ${theme.palette.success.light}`,
152-
backgroundColor: theme.palette.success.dark,
153-
},
154-
155-
errorBadge: {
156-
border: `1px solid ${theme.palette.error.light}`,
157-
backgroundColor: theme.palette.error.dark,
158-
},
159-
160-
warnBadge: {
161-
border: `1px solid ${theme.palette.warning.light}`,
162-
backgroundColor: theme.palette.warning.dark,
163-
},
164-
165-
disabledBadge: {
166-
border: `1px solid ${theme.palette.divider}`,
167-
backgroundColor: theme.palette.background.paper,
168-
},
169-
}));

0 commit comments

Comments
 (0)