Skip to content

Commit ca6e621

Browse files
aslilacaslilac
authored
chore: use px values instead of theme.spacing and theme.shape.borderRadius (coder#10519)
1 parent 0cb875c commit ca6e621

File tree

144 files changed

+774
-958
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+774
-958
lines changed

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
1111
};
1212

1313
const sizeStyles = {
14-
xs: (theme) => ({
15-
width: theme.spacing(2),
16-
height: theme.spacing(2),
17-
fontSize: theme.spacing(1),
14+
xs: {
15+
width: 16,
16+
height: 16,
17+
fontSize: 8,
1818
fontWeight: 700,
19-
}),
20-
sm: (theme) => ({
21-
width: theme.spacing(3),
22-
height: theme.spacing(3),
23-
fontSize: theme.spacing(1.5),
19+
},
20+
sm: {
21+
width: 24,
22+
height: 24,
23+
fontSize: 12,
2424
fontWeight: 600,
25-
}),
25+
},
2626
md: {},
27-
xl: (theme) => ({
28-
width: theme.spacing(6),
29-
height: theme.spacing(6),
30-
fontSize: theme.spacing(3),
31-
}),
27+
xl: {
28+
width: 48,
29+
height: 48,
30+
fontSize: 24,
31+
},
3232
} satisfies Record<string, Interpolation<Theme>>;
3333

3434
const colorStyles = {

‎site/src/components/AvatarData/AvatarData.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
2828
direction="row"
2929
alignItems="center"
3030
css={{
31-
minHeight: theme.spacing(5), // Make it predictable for the skeleton
31+
minHeight: 40, // Make it predictable for the skeleton
3232
width: "100%",
3333
lineHeight: "150%",
3434
}}

‎site/src/components/CodeExample/CodeExample.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
2626
color: theme.palette.primary.contrastText,
2727
fontFamily: MONOSPACE_FONT_FAMILY,
2828
fontSize: 14,
29-
borderRadius: theme.shape.borderRadius,
30-
padding: theme.spacing(1),
29+
borderRadius: 8,
30+
padding: 8,
3131
lineHeight: "150%",
3232
border: `1px solid ${theme.palette.divider}`,
3333
}}
3434
className={className}
3535
>
3636
<code
3737
css={{
38-
padding: theme.spacing(0, 1),
38+
padding: "0 8px",
3939
width: "100%",
4040
display: "flex",
4141
alignItems: "center",

‎site/src/components/CopyButton/CopyButton.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
4646
<IconButton
4747
className={buttonClassName}
4848
css={(theme) => css`
49-
border-radius: ${theme.shape.borderRadius}px;
50-
padding: ${theme.spacing(0.85)};
49+
border-radius: 8px;
50+
padding: 8px;
5151
min-width: 32px;
5252
5353
&:hover {
@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
6464
) : (
6565
<FileCopyIcon css={fileCopyIconStyles} />
6666
)}
67-
{ctaCopy && (
68-
<div
69-
css={(theme) => ({
70-
marginLeft: theme.spacing(1),
71-
})}
72-
>
73-
{ctaCopy}
74-
</div>
75-
)}
67+
{ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
7668
</IconButton>
7769
</div>
7870
</Tooltip>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
6060
sx: (theme) => ({
6161
background: theme.palette.background.paper,
6262
color: theme.palette.text.primary,
63-
maxWidth: theme.spacing(55),
63+
maxWidth: 440,
6464
flexDirection: "row",
6565
borderColor: theme.palette.info.light,
6666

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@ const styles = {
4646
align-items: center;
4747
`,
4848
category: (theme) => ({
49-
marginRight: theme.spacing(2),
49+
marginRight: 16,
5050
color: theme.palette.text.primary,
5151
}),
5252
values: (theme) => ({
5353
display: "flex",
54-
gap: theme.spacing(1),
54+
gap: 8,
5555
color: theme.palette.text.secondary,
5656
}),
57-
value: (theme) => css`
57+
value: css`
5858
display: flex;
5959
align-items: center;
60-
gap: ${theme.spacing(0.5)};
60+
gap: 4px;
6161
6262
& svg {
6363
width: 12px;
@@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
129129
align-items: center;
130130
justify-content: center;
131131
background-color: ${unhealthy ? colors.red[10] : undefined};
132-
padding: ${theme.spacing(0, 1.5)};
132+
padding: 0 12px;
133133
height: ${bannerHeight}px;
134134
color: #fff;
135135
@@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
142142
const statusSummaryStyle = className`
143143
${theme.typography.body2 as CSSObject}
144144
145-
margin: ${theme.spacing(0, 0, 0.5, 1.5)};
146-
width: ${theme.spacing(50)};
147-
padding: ${theme.spacing(2)};
145+
margin: 0 0 4px 12px;
146+
width: 400px;
147+
padding: 16px;
148148
color: ${theme.palette.text.primary};
149149
background-color: ${theme.palette.background.paper};
150150
border: 1px solid ${theme.palette.divider};
@@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
158158
height: bannerHeight,
159159
bottom: 0,
160160
zIndex: 1,
161-
paddingRight: theme.spacing(2),
161+
paddingRight: 16,
162162
backgroundColor: theme.palette.background.paper,
163163
display: "flex",
164164
alignItems: "center",
165165
fontFamily: MONOSPACE_FONT_FAMILY,
166166
fontSize: 12,
167-
gap: theme.spacing(4),
167+
gap: 32,
168168
borderTop: `1px solid ${theme.palette.divider}`,
169169
overflowX: "auto",
170170
whiteSpace: "nowrap",
@@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
204204
)
205205
}
206206
open={process.env.STORYBOOK === "true" ? true : undefined}
207-
css={{ marginRight: theme.spacing(-2) }}
207+
css={{ marginRight: -16 }}
208208
>
209209
{unhealthy ? (
210210
<Link component={RouterLink} to="/health" css={statusBadgeStyle}>
@@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
323323
marginLeft: "auto",
324324
display: "flex",
325325
alignItems: "center",
326-
gap: theme.spacing(2),
326+
gap: 16,
327327
}}
328328
>
329329
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
@@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
335335

336336
<Tooltip title="A countdown until stats are fetched again. Click to refresh!">
337337
<Button
338-
css={css`
339-
${styles.value(theme)}
338+
css={[
339+
styles.value,
340+
css`
341+
margin: 0;
342+
padding: 0 8px;
343+
height: unset;
344+
min-height: unset;
345+
font-size: unset;
346+
color: unset;
347+
border: 0;
348+
min-width: unset;
349+
font-family: inherit;
340350
341-
margin: 0;
342-
padding: 0 8px;
343-
height: unset;
344-
min-height: unset;
345-
font-size: unset;
346-
color: unset;
347-
border: 0;
348-
min-width: unset;
349-
font-family: inherit;
350-
351-
& svg {
352-
margin-right: ${theme.spacing(0.5)};
353-
}
354-
`}
351+
& svg {
352+
margin-right: 4px;
353+
}
354+
`,
355+
]}
355356
onClick={() => {
356357
if (fetchStats) {
357358
fetchStats();

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const Language = {
2121
};
2222

2323
const styles = {
24-
leftContent: (theme) => ({
25-
marginRight: theme.spacing(1),
26-
marginLeft: theme.spacing(1),
27-
}),
24+
leftContent: {
25+
marginRight: 8,
26+
marginLeft: 8,
27+
},
2828
} satisfies Record<string, Interpolation<Theme>>;
2929

3030
export interface LicenseBannerViewProps {
@@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
4747
4848
display: flex;
4949
align-items: center;
50-
padding: ${theme.spacing(1.5)};
50+
padding: 12px;
5151
background-color: ${type === "error"
5252
? colors.red[12]
5353
: theme.palette.warning.main};
@@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
8484
</Link>
8585
</div>
8686
<Expander expanded={showDetails} setExpanded={setShowDetails}>
87-
<ul css={{ padding: theme.spacing(1), margin: 0 }}>
87+
<ul css={{ padding: 8, margin: 0 }}>
8888
{messages.map((message) => (
89-
<li css={{ margin: theme.spacing(0.5) }} key={message}>
89+
<li css={{ margin: 4 }} key={message}>
9090
{message}
9191
</li>
9292
))}

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,17 @@ const styles = {
7070
justify-content: flex-start;
7171
}
7272
`,
73-
drawerHeader: (theme) => ({
74-
padding: theme.spacing(2),
75-
paddingTop: theme.spacing(4),
76-
paddingBottom: theme.spacing(4),
77-
}),
73+
drawerHeader: {
74+
padding: 16,
75+
paddingTop: 32,
76+
paddingBottom: 32,
77+
},
7878
logo: (theme) => css`
7979
align-items: center;
8080
display: flex;
8181
height: ${navHeight}px;
8282
color: ${theme.palette.text.primary};
83-
padding: ${theme.spacing(2)};
83+
padding: 16px;
8484
8585
// svg is for the Coder logo, img is for custom images
8686
& svg,
@@ -89,10 +89,10 @@ const styles = {
8989
object-fit: contain;
9090
}
9191
`,
92-
drawerLogo: (theme) => ({
92+
drawerLogo: {
9393
padding: 0,
94-
maxHeight: theme.spacing(5),
95-
}),
94+
maxHeight: 40,
95+
},
9696
item: {
9797
padding: 0,
9898
},
@@ -102,7 +102,7 @@ const styles = {
102102
display: flex;
103103
flex: 1;
104104
font-size: 16px;
105-
padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
105+
padding: 12px 16px;
106106
text-decoration: none;
107107
transition: background-color 0.15s ease-in-out;
108108
@@ -117,7 +117,7 @@ const styles = {
117117
118118
${theme.breakpoints.up("md")} {
119119
height: ${navHeight}px;
120-
padding: 0 ${theme.spacing(3)};
120+
padding: 0 24px;
121121
}
122122
`,
123123
} satisfies Record<string, Interpolation<Theme>>;
@@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
171171
</nav>
172172
);
173173
};
174+
174175
export const NavbarView: FC<NavbarViewProps> = ({
175176
user,
176177
logo_url,

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Badge from "@mui/material/Badge";
2-
import { FC, PropsWithChildren } from "react";
2+
import { type FC, type PropsWithChildren } from "react";
33
import { colors } from "theme/colors";
4-
import * as TypesGen from "api/typesGenerated";
4+
import type * as TypesGen from "api/typesGenerated";
55
import { navHeight } from "theme/constants";
66
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
77
import { UserAvatar } from "components/UserAvatar/UserAvatar";
@@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
3535
<>
3636
<PopoverTrigger>
3737
<button
38-
css={(theme) => css`
38+
css={css`
3939
background: none;
4040
border: 0;
4141
cursor: pointer;
4242
height: ${navHeight}px;
43-
padding: ${theme.spacing(1.5, 0)};
43+
padding: 12px 0;
4444
4545
&:hover {
4646
background-color: transparent;

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const styles = {
2828
info: (theme) => [
2929
theme.typography.body2 as CSSObject,
3030
{
31-
padding: theme.spacing(2.5),
31+
padding: 20,
3232
},
3333
],
3434
userName: {
@@ -45,8 +45,8 @@ const styles = {
4545
color: "inherit",
4646
},
4747
menuItem: (theme) => css`
48-
gap: ${theme.spacing(2.5)};
49-
padding: ${theme.spacing(1, 2.5)};
48+
gap: 20px;
49+
padding: 8px 20px;
5050
5151
&:hover {
5252
background-color: ${theme.palette.action.hover};
@@ -55,8 +55,8 @@ const styles = {
5555
`,
5656
menuItemIcon: (theme) => ({
5757
color: theme.palette.text.secondary,
58-
width: theme.spacing(2.5),
59-
height: theme.spacing(2.5),
58+
width: 20,
59+
height: 20,
6060
}),
6161
menuItemText: {
6262
fontSize: 14,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
3333
return (
3434
<div
3535
css={css`
36-
padding: ${theme.spacing(1.5)};
36+
padding: 12px;
3737
background-color: ${backgroundColor ?? theme.palette.warning.main};
3838
display: flex;
3939
align-items: center;

0 commit comments

Comments
 (0)