Skip to content

chore: use px values instead of theme.spacing and theme.shape.borderRadius #10519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 6, 2023
Merged

chore: use px values instead of theme.spacing and theme.shape.borderRadius #10519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1a7c551
chore: quit using `theme.spacing`
aslilac Nov 3, 2023
7bcb497
chore: quit using `theme.shape.borderRadius`
aslilac Nov 3, 2023
9ebcbd0
🧹
aslilac Nov 3, 2023
18b7e83
🧹
aslilac Nov 3, 2023
2a2393b
🧹
aslilac Nov 3, 2023
6aae45d
🧹
aslilac Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions site/src/components/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
};

const sizeStyles = {
xs: (theme) => ({
width: theme.spacing(2),
height: theme.spacing(2),
fontSize: theme.spacing(1),
xs: {
width: 16,
height: 16,
fontSize: 8,
fontWeight: 700,
}),
sm: (theme) => ({
width: theme.spacing(3),
height: theme.spacing(3),
fontSize: theme.spacing(1.5),
},
sm: {
width: 24,
height: 24,
fontSize: 12,
fontWeight: 600,
}),
},
md: {},
xl: (theme) => ({
width: theme.spacing(6),
height: theme.spacing(6),
fontSize: theme.spacing(3),
}),
xl: {
width: 48,
height: 48,
fontSize: 24,
},
} satisfies Record<string, Interpolation<Theme>>;

const colorStyles = {
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/AvatarData/AvatarData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
direction="row"
alignItems="center"
css={{
minHeight: theme.spacing(5), // Make it predictable for the skeleton
minHeight: 40, // Make it predictable for the skeleton
width: "100%",
lineHeight: "150%",
}}
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/CodeExample/CodeExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
color: theme.palette.primary.contrastText,
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 14,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(1),
borderRadius: 8,
padding: 8,
lineHeight: "150%",
border: `1px solid ${theme.palette.divider}`,
}}
className={className}
>
<code
css={{
padding: theme.spacing(0, 1),
padding: "0 8px",
width: "100%",
display: "flex",
alignItems: "center",
Expand Down
14 changes: 3 additions & 11 deletions site/src/components/CopyButton/CopyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
<IconButton
className={buttonClassName}
css={(theme) => css`
border-radius: ${theme.shape.borderRadius}px;
padding: ${theme.spacing(0.85)};
border-radius: 8px;
padding: 8px;
min-width: 32px;

&:hover {
Expand All @@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
) : (
<FileCopyIcon css={fileCopyIconStyles} />
)}
{ctaCopy && (
<div
css={(theme) => ({
marginLeft: theme.spacing(1),
})}
>
{ctaCopy}
</div>
)}
{ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
</IconButton>
</div>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Dashboard/DashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
sx: (theme) => ({
background: theme.palette.background.paper,
color: theme.palette.text.primary,
maxWidth: theme.spacing(55),
maxWidth: 440,
flexDirection: "row",
borderColor: theme.palette.info.light,

Expand Down
57 changes: 29 additions & 28 deletions site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,18 @@ const styles = {
align-items: center;
`,
category: (theme) => ({
marginRight: theme.spacing(2),
marginRight: 16,
color: theme.palette.text.primary,
}),
values: (theme) => ({
display: "flex",
gap: theme.spacing(1),
gap: 8,
color: theme.palette.text.secondary,
}),
value: (theme) => css`
value: css`
display: flex;
align-items: center;
gap: ${theme.spacing(0.5)};
gap: 4px;

& svg {
width: 12px;
Expand Down Expand Up @@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
align-items: center;
justify-content: center;
background-color: ${unhealthy ? colors.red[10] : undefined};
padding: ${theme.spacing(0, 1.5)};
padding: 0 12px;
height: ${bannerHeight}px;
color: #fff;

Expand All @@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
const statusSummaryStyle = className`
${theme.typography.body2 as CSSObject}

margin: ${theme.spacing(0, 0, 0.5, 1.5)};
width: ${theme.spacing(50)};
padding: ${theme.spacing(2)};
margin: 0 0 4px 12px;
width: 400px;
padding: 16px;
color: ${theme.palette.text.primary};
background-color: ${theme.palette.background.paper};
border: 1px solid ${theme.palette.divider};
Expand All @@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
height: bannerHeight,
bottom: 0,
zIndex: 1,
paddingRight: theme.spacing(2),
paddingRight: 16,
backgroundColor: theme.palette.background.paper,
display: "flex",
alignItems: "center",
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 12,
gap: theme.spacing(4),
gap: 32,
borderTop: `1px solid ${theme.palette.divider}`,
overflowX: "auto",
whiteSpace: "nowrap",
Expand Down Expand Up @@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
)
}
open={process.env.STORYBOOK === "true" ? true : undefined}
css={{ marginRight: theme.spacing(-2) }}
css={{ marginRight: -16 }}
>
{unhealthy ? (
<Link component={RouterLink} to="/health" css={statusBadgeStyle}>
Expand Down Expand Up @@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
marginLeft: "auto",
display: "flex",
alignItems: "center",
gap: theme.spacing(2),
gap: 16,
}}
>
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
Expand All @@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {

<Tooltip title="A countdown until stats are fetched again. Click to refresh!">
<Button
css={css`
${styles.value(theme)}
css={[
styles.value,
css`
margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;

margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;

& svg {
margin-right: ${theme.spacing(0.5)};
}
`}
& svg {
margin-right: 4px;
}
`,
]}
onClick={() => {
if (fetchStats) {
fetchStats();
Expand Down
14 changes: 7 additions & 7 deletions site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ export const Language = {
};

const styles = {
leftContent: (theme) => ({
marginRight: theme.spacing(1),
marginLeft: theme.spacing(1),
}),
leftContent: {
marginRight: 8,
marginLeft: 8,
},
} satisfies Record<string, Interpolation<Theme>>;

export interface LicenseBannerViewProps {
Expand All @@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({

display: flex;
align-items: center;
padding: ${theme.spacing(1.5)};
padding: 12px;
background-color: ${type === "error"
? colors.red[12]
: theme.palette.warning.main};
Expand Down Expand Up @@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
</Link>
</div>
<Expander expanded={showDetails} setExpanded={setShowDetails}>
<ul css={{ padding: theme.spacing(1), margin: 0 }}>
<ul css={{ padding: 8, margin: 0 }}>
{messages.map((message) => (
<li css={{ margin: theme.spacing(0.5) }} key={message}>
<li css={{ margin: 4 }} key={message}>
{message}
</li>
))}
Expand Down
23 changes: 12 additions & 11 deletions site/src/components/Dashboard/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,17 @@ const styles = {
justify-content: flex-start;
}
`,
drawerHeader: (theme) => ({
padding: theme.spacing(2),
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
}),
drawerHeader: {
padding: 16,
paddingTop: 32,
paddingBottom: 32,
},
logo: (theme) => css`
align-items: center;
display: flex;
height: ${navHeight}px;
color: ${theme.palette.text.primary};
padding: ${theme.spacing(2)};
padding: 16px;

// svg is for the Coder logo, img is for custom images
& svg,
Expand All @@ -89,10 +89,10 @@ const styles = {
object-fit: contain;
}
`,
drawerLogo: (theme) => ({
drawerLogo: {
padding: 0,
maxHeight: theme.spacing(5),
}),
maxHeight: 40,
},
item: {
padding: 0,
},
Expand All @@ -102,7 +102,7 @@ const styles = {
display: flex;
flex: 1;
font-size: 16px;
padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
padding: 12px 16px;
text-decoration: none;
transition: background-color 0.15s ease-in-out;

Expand All @@ -117,7 +117,7 @@ const styles = {

${theme.breakpoints.up("md")} {
height: ${navHeight}px;
padding: 0 ${theme.spacing(3)};
padding: 0 24px;
}
`,
} satisfies Record<string, Interpolation<Theme>>;
Expand Down Expand Up @@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
</nav>
);
};

export const NavbarView: FC<NavbarViewProps> = ({
user,
logo_url,
Expand Down
8 changes: 4 additions & 4 deletions site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Badge from "@mui/material/Badge";
import { FC, PropsWithChildren } from "react";
import { type FC, type PropsWithChildren } from "react";
import { colors } from "theme/colors";
import * as TypesGen from "api/typesGenerated";
import type * as TypesGen from "api/typesGenerated";
import { navHeight } from "theme/constants";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
Expand Down Expand Up @@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
<>
<PopoverTrigger>
<button
css={(theme) => css`
css={css`
background: none;
border: 0;
cursor: pointer;
height: ${navHeight}px;
padding: ${theme.spacing(1.5, 0)};
padding: 12px 0;

&:hover {
background-color: transparent;
Expand Down
10 changes: 5 additions & 5 deletions site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const styles = {
info: (theme) => [
theme.typography.body2 as CSSObject,
{
padding: theme.spacing(2.5),
padding: 20,
},
],
userName: {
Expand All @@ -45,8 +45,8 @@ const styles = {
color: "inherit",
},
menuItem: (theme) => css`
gap: ${theme.spacing(2.5)};
padding: ${theme.spacing(1, 2.5)};
gap: 20px;
padding: 8px 20px;

&:hover {
background-color: ${theme.palette.action.hover};
Expand All @@ -55,8 +55,8 @@ const styles = {
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: theme.spacing(2.5),
height: theme.spacing(2.5),
width: 20,
height: 20,
}),
menuItemText: {
fontSize: 14,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
return (
<div
css={css`
padding: ${theme.spacing(1.5)};
padding: 12px;
background-color: ${backgroundColor ?? theme.palette.warning.main};
display: flex;
align-items: center;
Expand Down
Loading