Skip to content

Commit 4d45704

Browse files
aslilacaslilac
committed
a bunch more good ones
1 parent 50d8374 commit 4d45704

File tree

10 files changed

+193
-243
lines changed

10 files changed

+193
-243
lines changed

‎site/src/components/CopyableValue/CopyableValue.tsx

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,22 @@
1-
import { makeStyles } from "@mui/styles";
21
import Tooltip from "@mui/material/Tooltip";
32
import { useClickable } from "hooks/useClickable";
43
import { useClipboard } from "hooks/useClipboard";
54
import { FC, HTMLProps } from "react";
6-
import { combineClasses } from "utils/combineClasses";
75

86
interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
97
value: string;
108
}
119

12-
export const CopyableValue: FC<CopyableValueProps> = ({
13-
value,
14-
className,
15-
...props
16-
}) => {
10+
export const CopyableValue: FC<CopyableValueProps> = ({ value, ...props }) => {
1711
const { isCopied, copy } = useClipboard(value);
1812
const clickableProps = useClickable<HTMLSpanElement>(copy);
19-
const styles = useStyles();
2013

2114
return (
2215
<Tooltip
2316
title={isCopied ? "Copied!" : "Click to copy"}
2417
placement="bottom-start"
2518
>
26-
<span
27-
{...props}
28-
{...clickableProps}
29-
className={combineClasses([styles.value, className])}
30-
/>
19+
<span {...props} {...clickableProps} css={{ cursor: "pointer" }} />
3120
</Tooltip>
3221
);
3322
};
34-
35-
const useStyles = makeStyles(() => ({
36-
value: {
37-
cursor: "pointer",
38-
},
39-
}));

‎site/src/components/Dashboard/DashboardLayout.tsx

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { makeStyles } from "@mui/styles";
21
import { useMachine } from "@xstate/react";
32
import { DeploymentBanner } from "./DeploymentBanner/DeploymentBanner";
43
import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner";
@@ -19,7 +18,6 @@ import { docs } from "utils/docs";
1918
import { HealthBanner } from "./HealthBanner";
2019

2120
export const DashboardLayout: FC = () => {
22-
const styles = useStyles();
2321
const permissions = usePermissions();
2422
const [updateCheckState, updateCheckSend] = useMachine(updateCheckMachine, {
2523
context: {
@@ -35,10 +33,23 @@ export const DashboardLayout: FC = () => {
3533
<ServiceBanner />
3634
{canViewDeployment && <LicenseBanner />}
3735

38-
<div className={styles.site}>
36+
<div
37+
css={{
38+
display: "flex",
39+
minHeight: "100%",
40+
flexDirection: "column",
41+
}}
42+
>
3943
<Navbar />
4044

41-
<div className={styles.siteContent}>
45+
<div
46+
css={{
47+
flex: 1,
48+
paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer
49+
display: "flex",
50+
flexDirection: "column",
51+
}}
52+
>
4253
<Suspense fallback={<Loader />}>
4354
<Outlet />
4455
</Suspense>
@@ -118,17 +129,3 @@ export const DashboardFullPage = (props: BoxProps) => {
118129
/>
119130
);
120131
};
121-
122-
const useStyles = makeStyles({
123-
site: {
124-
display: "flex",
125-
minHeight: "100%",
126-
flexDirection: "column",
127-
},
128-
siteContent: {
129-
flex: 1,
130-
paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer
131-
display: "flex",
132-
flexDirection: "column",
133-
},
134-
});

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { makeStyles } from "@mui/styles";
21
import { Pill } from "components/Pill/Pill";
32
import ReactMarkdown from "react-markdown";
43
import { colors } from "theme/colors";
5-
import { hex } from "color-convert";
4+
import { useTheme } from "@mui/system";
5+
import { css } from "@emotion/react";
6+
import { readableForegroundColor } from "utils/colors";
67

78
export interface ServiceBannerViewProps {
89
message: string;
@@ -15,7 +16,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
1516
backgroundColor,
1617
isPreview,
1718
}) => {
18-
const styles = useStyles();
19+
const theme = useTheme();
1920
// We don't want anything funky like an image or a heading in the service
2021
// banner.
2122
const markdownElementsAllowed = [
@@ -31,15 +32,29 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
3132
];
3233
return (
3334
<div
34-
className={styles.container}
35-
style={{ backgroundColor: backgroundColor }}
35+
css={css`
36+
padding: ${theme.spacing(1.5)};
37+
background-color: ${backgroundColor ?? theme.palette.warning.main};
38+
display: flex;
39+
align-items: center;
40+
41+
&.error {
42+
background-color: ${colors.red[12]};
43+
}
44+
`}
3645
>
3746
{isPreview && <Pill text="Preview" type="info" lightBorder />}
3847
<div
39-
className={styles.centerContent}
40-
style={{
41-
color: readableForegroundColor(backgroundColor),
42-
}}
48+
css={css`
49+
margin-right: auto;
50+
margin-left: auto;
51+
font-weight: 400;
52+
color: ${readableForegroundColor(backgroundColor)};
53+
54+
& a {
55+
color: inherit;
56+
}
57+
`}
4358
>
4459
<ReactMarkdown
4560
allowedElements={markdownElementsAllowed}
@@ -52,36 +67,3 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
5267
</div>
5368
);
5469
};
55-
56-
const useStyles = makeStyles((theme) => ({
57-
container: {
58-
padding: theme.spacing(1.5),
59-
backgroundColor: theme.palette.warning.main,
60-
display: "flex",
61-
alignItems: "center",
62-
"&.error": {
63-
backgroundColor: colors.red[12],
64-
},
65-
},
66-
flex: {
67-
display: "column",
68-
},
69-
centerContent: {
70-
marginRight: "auto",
71-
marginLeft: "auto",
72-
fontWeight: 400,
73-
"& a": {
74-
color: "inherit",
75-
},
76-
},
77-
}));
78-
79-
const readableForegroundColor = (backgroundColor: string): string => {
80-
const rgb = hex.rgb(backgroundColor);
81-
82-
// Logic taken from here:
83-
// https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/color.js#L56
84-
// to be consistent with the color-picker label.
85-
const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
86-
return yiq >= 128 ? "#000" : "#fff";
87-
};

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

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,82 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { PropsWithChildren, FC } from "react";
1+
import type { PropsWithChildren, FC } from "react";
32
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
4-
import { DisabledBadge, EnabledBadge } from "./Badges";
53
import Box, { BoxProps } from "@mui/material/Box";
4+
import { useTheme } from "@mui/system";
5+
import { DisabledBadge, EnabledBadge } from "./Badges";
6+
import { css } from "@emotion/react";
67

78
export const OptionName: FC<PropsWithChildren> = ({ children }) => {
8-
const styles = useStyles();
9-
return <span className={styles.optionName}>{children}</span>;
9+
return (
10+
<span
11+
css={{
12+
display: "block",
13+
}}
14+
>
15+
{children}
16+
</span>
17+
);
1018
};
1119

1220
export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
13-
const styles = useStyles();
14-
return <span className={styles.optionDescription}>{children}</span>;
21+
const theme = useTheme();
22+
return (
23+
<span
24+
css={{
25+
display: "block",
26+
color: theme.palette.text.secondary,
27+
fontSize: 14,
28+
marginTop: theme.spacing(0.5),
29+
}}
30+
>
31+
{children}
32+
</span>
33+
);
1534
};
1635

17-
const NotSet: FC = () => {
18-
const styles = useStyles();
36+
export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
37+
const theme = useTheme();
1938

20-
return <span className={styles.optionValue}>Not set</span>;
21-
};
39+
const optionStyles = css`
40+
font-size: 14px;
41+
font-family: ${MONOSPACE_FONT_FAMILY};
42+
overflow-wrap: anywhere;
43+
user-select: all;
2244
23-
export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
24-
const styles = useStyles();
45+
& ul {
46+
padding: ${theme.spacing(2)};
47+
},
48+
`;
2549

2650
if (typeof children === "boolean") {
2751
return children ? <EnabledBadge /> : <DisabledBadge />;
2852
}
2953

3054
if (typeof children === "number") {
31-
return <span className={styles.optionValue}>{children}</span>;
55+
return <span css={optionStyles}>{children}</span>;
3256
}
3357

3458
if (typeof children === "string") {
35-
return <span className={styles.optionValue}>{children}</span>;
59+
return <span css={optionStyles}>{children}</span>;
3660
}
3761

3862
if (Array.isArray(children)) {
3963
if (children.length === 0) {
40-
return <NotSet />;
64+
return <span css={optionStyles}>Not set</span>;
4165
}
4266

4367
return (
44-
<ul className={styles.optionValueList}>
68+
<ul
69+
css={{
70+
margin: 0,
71+
padding: 0,
72+
listStylePosition: "inside",
73+
display: "flex",
74+
flexDirection: "column",
75+
gap: theme.spacing(0.5),
76+
}}
77+
>
4578
{children.map((item) => (
46-
<li key={item} className={styles.optionValue}>
79+
<li key={item} css={optionStyles}>
4780
{item}
4881
</li>
4982
))}
@@ -52,10 +85,10 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
5285
}
5386

5487
if (children === "") {
55-
return <NotSet />;
88+
return <span css={optionStyles}>Not set</span>;
5689
}
5790

58-
return <span className={styles.optionValue}>{JSON.stringify(children)}</span>;
91+
return <span css={optionStyles}>{JSON.stringify(children)}</span>;
5992
};
6093

6194
export const OptionConfig = (props: BoxProps) => {
@@ -96,36 +129,3 @@ export const OptionConfigFlag = (props: BoxProps) => {
96129
/>
97130
);
98131
};
99-
100-
const useStyles = makeStyles((theme) => ({
101-
optionName: {
102-
display: "block",
103-
},
104-
105-
optionDescription: {
106-
display: "block",
107-
color: theme.palette.text.secondary,
108-
fontSize: 14,
109-
marginTop: theme.spacing(0.5),
110-
},
111-
112-
optionValue: {
113-
fontSize: 14,
114-
fontFamily: MONOSPACE_FONT_FAMILY,
115-
overflowWrap: "anywhere",
116-
userSelect: "all",
117-
118-
"& ul": {
119-
padding: theme.spacing(2),
120-
},
121-
},
122-
123-
optionValueList: {
124-
margin: 0,
125-
padding: 0,
126-
listStylePosition: "inside",
127-
display: "flex",
128-
flexDirection: "column",
129-
gap: theme.spacing(0.5),
130-
},
131-
}));

0 commit comments

Comments
 (0)