Skip to content

chore: use emotion for styling (pt. 5) #10261

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 37 commits into from
Oct 16, 2023
Merged

chore: use emotion for styling (pt. 5) #10261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
8ef2a58
emotion: `RuntimeErrorState`
aslilac Oct 13, 2023
c455b38
emotion: `FileUpload`
aslilac Oct 13, 2023
4e033c6
🧹
aslilac Oct 13, 2023
8d7e9a8
emotion: `FullPageForm`
aslilac Oct 13, 2023
eeb1b93
emotion: `EnterpriseSnackbar`
aslilac Oct 13, 2023
04adebe
emotion: `GlobalSnackbar`
aslilac Oct 13, 2023
2b49f62
emotion: `FullWidthPageHeader`
aslilac Oct 13, 2023
57b1f68
emotion: `PageButton`
aslilac Oct 13, 2023
715282c
emotion: `PaginationWidgetBase`
aslilac Oct 13, 2023
8927e23
emotion: `Paywall`
aslilac Oct 13, 2023
1857b71
emotion: `AgentLatency`
aslilac Oct 13, 2023
5bacdda
emotion: `AgentOutdatedTooltip`
aslilac Oct 13, 2023
9924a32
emotion: `PortForwardButton`
aslilac Oct 13, 2023
d49898c
emotion: `Section`
aslilac Oct 13, 2023
f4373dd
emotion: `AppLink`
aslilac Oct 13, 2023
351e310
🧹
aslilac Oct 13, 2023
196c7a8
emotion: `SensitiveValue`
aslilac Oct 13, 2023
3d14e1b
emotion: `BuildRow`
aslilac Oct 13, 2023
58daeaf
emotion: `ResetPasswordDialog`
aslilac Oct 13, 2023
8a5e35f
emotion: `UsersTableBody`
aslilac Oct 13, 2023
c8a94a5
emotion: `Workspace`
aslilac Oct 13, 2023
7058b7f
emotion: `UpdateBuildParametersDialog`
aslilac Oct 13, 2023
0972a1c
emotion: `SignInLayout`
aslilac Oct 13, 2023
2481674
emotion: `SSHButton`
aslilac Oct 13, 2023
f09e627
emotion: `TableLoader`
aslilac Oct 13, 2023
7135de3
emotion: `Welcome`
aslilac Oct 13, 2023
193c364
emotion: `TimelineDateRow`
aslilac Oct 13, 2023
007e048
emotion: `SSHKeysPageView`
aslilac Oct 13, 2023
10f041c
emotion: `WorkspaceSettingsLayout`
aslilac Oct 13, 2023
ec8cc6e
emotion: `TemplateLayout`
aslilac Oct 13, 2023
da1a641
emotion: `EmptyTemplates`
aslilac Oct 13, 2023
69fd068
emotion: `TemplateVariablesPageView`
aslilac Oct 13, 2023
fcc868b
Merge branch 'main' into emotional-damage-5
aslilac Oct 16, 2023
4b92f61
Revert "emotion: `AgentOutdatedTooltip`"
aslilac Oct 16, 2023
c2abccb
Revert "emotion: `PortForwardButton`"
aslilac Oct 16, 2023
9f73611
Revert "emotion: `Section`"
aslilac Oct 16, 2023
e3986d2
Revert "emotion: `AppLink`"
aslilac Oct 16, 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
4 changes: 2 additions & 2 deletions site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import Popover, { PopoverProps } from "@mui/material/Popover";
import Popover, { type PopoverProps } from "@mui/material/Popover";
import type { FC, PropsWithChildren } from "react";

type BorderedMenuVariant = "user-dropdown";
Expand All @@ -18,7 +18,7 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({

const paper = css`
width: 260px;
border-radius: ${theme.shape.borderRadius};
border-radius: ${theme.shape.borderRadius}px;
box-shadow: ${theme.shadows[6]};
`;

Expand Down
2 changes: 1 addition & 1 deletion site/src/components/DeploySettingsLayout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const SidebarNavItem: FC<
font-size: 14px;
text-decoration: none;
padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
border-radius: ${theme.shape.borderRadius / 2};
border-radius: ${theme.shape.borderRadius / 2}px;
transition: background-color 0.15s ease-in-out;
margin-bottom: 1;
position: relative;
Expand Down
99 changes: 48 additions & 51 deletions site/src/components/ErrorBoundary/RuntimeErrorState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import { makeStyles } from "@mui/styles";
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import { BuildInfoResponse } from "api/typesGenerated";
import { type FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { css } from "@emotion/css";
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
import type { BuildInfoResponse } from "api/typesGenerated";
import { CopyButton } from "components/CopyButton/CopyButton";
import { CoderIcon } from "components/Icons/CoderIcon";
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
import { Stack } from "components/Stack/Stack";
import { FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { Margins } from "components/Margins/Margins";

const fetchDynamicallyImportedModuleError =
Expand All @@ -17,7 +18,7 @@ const fetchDynamicallyImportedModuleError =
export type RuntimeErrorStateProps = { error: Error };

export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
const styles = useStyles();
const theme = useTheme();
const [checkingError, setCheckingError] = useState(true);
const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
const coderVersion = staticBuildInfo?.version;
Expand Down Expand Up @@ -52,11 +53,11 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
<title>Something went wrong...</title>
</Helmet>
{!checkingError ? (
<Margins className={styles.root}>
<div className={styles.innerRoot}>
<CoderIcon className={styles.logo} />
<h1 className={styles.title}>Something went wrong...</h1>
<p className={styles.text}>
<Margins css={styles.root}>
<div css={{ width: "100%" }}>
<CoderIcon css={styles.logo} />
<h1 css={styles.title}>Something went wrong...</h1>
<p css={styles.text}>
Please try reloading the page, if that doesn&lsquo;t work, you can
ask for help in the{" "}
<Link href="https://discord.gg/coder">
Expand Down Expand Up @@ -93,20 +94,33 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
</Button>
</Stack>
{error.stack && (
<div className={styles.stack}>
<div className={styles.stackHeader}>
<div css={styles.stack}>
<div css={styles.stackHeader}>
Stacktrace
<CopyButton
buttonClassName={styles.copyButton}
buttonClassName={css`
Copy link
Member

@Parkreiner Parkreiner Oct 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's some nuance that I'm missing. Is there anything stopping this style from being defined outside the component, and being defined via the interpolation function syntax that some of the other styles are using?

I don't expect it to matter much performance-wise – just curious

background-color: transparent;
border: 0;
border-radius: 999px;
min-height: ${theme.spacing(4)};
min-width: ${theme.spacing(4)};
height: ${theme.spacing(4)};
width: ${theme.spacing(4)};

& svg {
width: 16px;
height: 16px;
}
`}
text={error.stack}
tooltipTitle="Copy stacktrace"
/>
</div>
<pre className={styles.stackCode}>{error.stack}</pre>
<pre css={styles.stackCode}>{error.stack}</pre>
</div>
)}
{coderVersion && (
<div className={styles.version}>Version: {coderVersion}</div>
<div css={styles.version}>Version: {coderVersion}</div>
)}
</div>
</Margins>
Expand All @@ -132,8 +146,8 @@ const getStaticBuildInfo = () => {
}
};

const useStyles = makeStyles((theme) => ({
root: {
const styles = {
root: (theme) => ({
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
textAlign: "center",
Expand All @@ -142,36 +156,34 @@ const useStyles = makeStyles((theme) => ({
justifyContent: "center",
minHeight: "100%",
maxWidth: theme.spacing(75),
},
}),

innerRoot: { width: "100%" },

logo: {
logo: (theme) => ({
fontSize: theme.spacing(8),
},
}),

title: {
title: (theme) => ({
fontSize: theme.spacing(4),
fontWeight: 400,
},
}),

text: {
text: (theme) => ({
fontSize: 16,
color: theme.palette.text.secondary,
lineHeight: "160%",
marginBottom: theme.spacing(4),
},
}),

stack: {
stack: (theme) => ({
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 4,
marginTop: theme.spacing(8),
display: "block",
textAlign: "left",
},
}),

stackHeader: {
stackHeader: (theme) => ({
fontSize: 10,
textTransform: "uppercase",
fontWeight: 600,
Expand All @@ -184,33 +196,18 @@ const useStyles = makeStyles((theme) => ({
flexAlign: "center",
justifyContent: "space-between",
alignItems: "center",
},
}),

stackCode: {
stackCode: (theme) => ({
padding: theme.spacing(2),
margin: 0,
wordWrap: "break-word",
whiteSpace: "break-spaces",
},

copyButton: {
backgroundColor: "transparent",
border: 0,
borderRadius: 999,
minHeight: theme.spacing(4),
minWidth: theme.spacing(4),
height: theme.spacing(4),
width: theme.spacing(4),

"& svg": {
width: 16,
height: 16,
},
},

version: {
}),

version: (theme) => ({
marginTop: theme.spacing(4),
fontSize: 12,
color: theme.palette.text.secondary,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;
67 changes: 31 additions & 36 deletions site/src/components/FileUpload/FileUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { makeStyles } from "@mui/styles";
import { Stack } from "components/Stack/Stack";
import { FC, DragEvent, useRef, ReactNode } from "react";
import { type FC, type DragEvent, useRef, type ReactNode } from "react";
import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
import { useClickable } from "hooks/useClickable";
import CircularProgress from "@mui/material/CircularProgress";
import { combineClasses } from "utils/combineClasses";
import IconButton from "@mui/material/IconButton";
import RemoveIcon from "@mui/icons-material/DeleteOutline";
import FileIcon from "@mui/icons-material/FolderOutlined";
import { css, type Interpolation, type Theme } from "@emotion/react";

const useFileDrop = (
callback: (file: File) => void,
Expand Down Expand Up @@ -62,7 +61,6 @@ export const FileUpload: FC<FileUploadProps> = ({
extension,
fileTypeRequired,
}) => {
const styles = useStyles();
const inputRef = useRef<HTMLInputElement>(null);
const tarDrop = useFileDrop(onUpload, fileTypeRequired);

Expand All @@ -75,7 +73,7 @@ export const FileUpload: FC<FileUploadProps> = ({
if (!isUploading && file) {
return (
<Stack
className={styles.file}
css={styles.file}
direction="row"
justifyContent="space-between"
alignItems="center"
Expand All @@ -95,23 +93,20 @@ export const FileUpload: FC<FileUploadProps> = ({
return (
<>
<div
className={combineClasses({
[styles.root]: true,
[styles.disabled]: isUploading,
})}
css={[styles.root, isUploading && styles.disabled]}
{...clickable}
{...tarDrop}
>
<Stack alignItems="center" spacing={1}>
{isUploading ? (
<CircularProgress size={32} />
) : (
<UploadIcon className={styles.icon} />
<UploadIcon css={styles.icon} />
)}

<Stack alignItems="center" spacing={0.5}>
<span className={styles.title}>{title}</span>
<span className={styles.description}>{description}</span>
<span css={styles.title}>{title}</span>
<span css={styles.description}>{description}</span>
</Stack>
</Stack>
</div>
Expand All @@ -120,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
type="file"
data-testid="file-upload"
ref={inputRef}
className={styles.input}
css={styles.input}
accept={extension}
onChange={(event) => {
const file = event.currentTarget.files?.[0];
Expand All @@ -133,48 +128,48 @@ export const FileUpload: FC<FileUploadProps> = ({
);
};

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: theme.shape.borderRadius,
border: `2px dashed ${theme.palette.divider}`,
padding: theme.spacing(6),
cursor: "pointer",

"&:hover": {
backgroundColor: theme.palette.background.paper,
},
},
const styles = {
root: (theme) => css`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a question for my own understanding: is there a difference between an interpolation function returning an object, vs a tagged css template literal? Is the main use case to enable the & selectors, or would something like this still be possible via object syntax?

const styles = {
  "&:hover": (theme) => ({
    background-color: ${theme.palette.background.paper};
  })
};

display: flex;
align-items: center;
justify-content: center;
border-radius: ${theme.shape.borderRadius}px;
border: 2px dashed ${theme.palette.divider};
padding: ${theme.spacing(6)};
cursor: pointer;

&:hover {
background-color: ${theme.palette.background.paper};
}
`,

disabled: {
pointerEvents: "none",
opacity: 0.75,
},

icon: {
icon: (theme) => ({
fontSize: theme.spacing(8),
},
}),

title: {
title: (theme) => ({
fontSize: theme.spacing(2),
},
}),

description: {
description: (theme) => ({
color: theme.palette.text.secondary,
textAlign: "center",
maxWidth: theme.spacing(50),
},
}),

input: {
display: "none",
},

file: {
file: (theme) => ({
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2),
background: theme.palette.background.paper,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;
14 changes: 4 additions & 10 deletions site/src/components/FullPageForm/FullPageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Margins } from "components/Margins/Margins";
import { FC, ReactNode } from "react";
import { type FC, type ReactNode } from "react";
import {
PageHeader,
PageHeaderTitle,
PageHeaderSubtitle,
} from "components/PageHeader/PageHeader";
import { makeStyles } from "@mui/styles";
import { useTheme } from "@emotion/react";

export interface FullPageFormProps {
title: string;
Expand All @@ -17,11 +17,11 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
detail,
children,
}) => {
const styles = useStyles();
const theme = useTheme();

return (
<Margins size="small">
<PageHeader className={styles.pageHeader}>
<PageHeader css={{ paddingBottom: theme.spacing(3) }}>
<PageHeaderTitle>{title}</PageHeaderTitle>
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
</PageHeader>
Expand All @@ -30,9 +30,3 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
</Margins>
);
};

const useStyles = makeStyles((theme) => ({
pageHeader: {
paddingBottom: theme.spacing(3),
},
}));
Loading