Skip to content

Commit 537e35d

Browse files
jakehwlljakehwll
authored
chore: de-css <UserSettingsPage /> children (#24647)
This is a cleanup for some leftover `css={}` props within our `site/src/pages/UserSettingsPage/...` pages.
1 parent 2e5c7d9 commit 537e35d

4 files changed

Lines changed: 14 additions & 60 deletions

File tree

‎site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useTheme } from "@emotion/react";
21
import { EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-react";
32
import { type FC, useCallback, useEffect, useState } from "react";
43
import { useQuery } from "react-query";
@@ -114,7 +113,6 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
114113
onUnlinkExternalAuth,
115114
onValidateExternalAuth,
116115
}) => {
117-
const theme = useTheme();
118116
const name = app.display_name || app.id || app.type;
119117
const authURL = `/external-auth/${app.id}`;
120118

@@ -152,11 +150,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
152150

153151
{link?.validate_error && (
154152
<span>
155-
<span
156-
css={{ paddingLeft: "1em", color: theme.palette.error.light }}
157-
>
158-
Error:{" "}
159-
</span>
153+
<span className="pl-[1em] text-content-destructive">Error: </span>
160154
{link?.validate_error}
161155
</span>
162156
)}

‎site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useTheme } from "@emotion/react";
21
import CircularProgress from "@mui/material/CircularProgress";
32
import type { FC } from "react";
43
import type { GitSSHKey } from "#/api/typesGenerated";
@@ -20,8 +19,6 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
2019
sshKey,
2120
onRegenerateClick,
2221
}) => {
23-
const theme = useTheme();
24-
2522
if (isLoading) {
2623
return (
2724
<div className="p-8">
@@ -38,25 +35,11 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
3835

3936
{sshKey && (
4037
<>
41-
<p
42-
css={{
43-
fontSize: 14,
44-
color: theme.palette.text.secondary,
45-
margin: 0,
46-
}}
47-
>
38+
<p className="leading-relaxed font-normal text-sm text-content-secondary m-0">
4839
The following public key is used to authenticate Git in workspaces.
4940
You may add it to Git services (such as GitHub) that you need to
5041
access from your workspace. Coder configures authentication via{" "}
51-
<code
52-
css={{
53-
background: theme.palette.divider,
54-
fontSize: 12,
55-
padding: "2px 4px",
56-
color: theme.palette.text.primary,
57-
borderRadius: 2,
58-
}}
59-
>
42+
<code className="bg-surface-quaternary text-xs py-0.5 px-1 text-content-primary rounded-sm">
6043
$GIT_SSH_COMMAND
6144
</code>
6245
.

‎site/src/pages/UserSettingsPage/Section.tsx‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
21
import type { FC, ReactNode } from "react";
32
import {
43
FeatureStageBadge,
@@ -21,6 +20,9 @@ interface SectionProps {
2120
featureStage?: keyof typeof featureStageBadgeTypes;
2221
}
2322

23+
const DESCRIPTION_CLASS =
24+
"text-content-secondary text-base m-0 mt-1 leading-normal";
25+
2426
export const Section: FC<SectionProps> = ({
2527
id,
2628
title,
@@ -36,7 +38,7 @@ export const Section: FC<SectionProps> = ({
3638
<section className={className} id={id} data-testid={id}>
3739
<div className={layout === "fluid" ? "max-w-full" : "max-w-[500px]"}>
3840
{(title || description) && (
39-
<div css={styles.header}>
41+
<div className="mb-6 flex flex-row justify-between">
4042
<div>
4143
{title && (
4244
<Stack direction="row" alignItems="center">
@@ -51,10 +53,10 @@ export const Section: FC<SectionProps> = ({
5153
</Stack>
5254
)}
5355
{description && typeof description === "string" && (
54-
<p css={styles.description}>{description}</p>
56+
<p className={DESCRIPTION_CLASS}>{description}</p>
5557
)}
5658
{description && typeof description !== "string" && (
57-
<div css={styles.description}>{description}</div>
59+
<div className={DESCRIPTION_CLASS}>{description}</div>
5860
)}
5961
</div>
6062
{toolbar && <div>{toolbar}</div>}
@@ -66,19 +68,3 @@ export const Section: FC<SectionProps> = ({
6668
</section>
6769
);
6870
};
69-
70-
const styles = {
71-
header: {
72-
marginBottom: 24,
73-
display: "flex",
74-
flexDirection: "row",
75-
justifyContent: "space-between",
76-
},
77-
description: (theme) => ({
78-
color: theme.palette.text.secondary,
79-
fontSize: 16,
80-
margin: 0,
81-
marginTop: 4,
82-
lineHeight: "140%",
83-
}),
84-
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { css, type Interpolation, type Theme } from "@emotion/react";
21
import { PlusIcon } from "lucide-react";
32
import { type FC, useState } from "react";
43
import { Link as RouterLink } from "react-router";
54
import type { APIKeyWithOwner } from "#/api/typesGenerated";
65
import { Button } from "#/components/Button/Button";
76
import { Stack } from "#/components/Stack/Stack";
7+
import { cn } from "#/utils/cn";
88
import { Section } from "../Section";
99
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
1010
import { useTokensData } from "./hooks";
@@ -34,7 +34,10 @@ const TokensPage: FC = () => {
3434
<>
3535
<Section
3636
title="Tokens"
37-
css={styles.section}
37+
className={cn(
38+
"[&_code]:bg-surface-secondary [&_code]:text-content-primary",
39+
"[&_code]:text-xs [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded-sm",
40+
)}
3841
description={
3942
<>
4043
Tokens are used to authenticate with the Coder API. You can create a
@@ -75,16 +78,4 @@ const TokenActions: FC = () => (
7578
</Stack>
7679
);
7780

78-
const styles = {
79-
section: (theme) => css`
80-
& code {
81-
background: ${theme.palette.divider};
82-
font-size: 12px;
83-
padding: 2px 4px;
84-
color: ${theme.palette.text.primary};
85-
border-radius: 2px;
86-
}
87-
`,
88-
} satisfies Record<string, Interpolation<Theme>>;
89-
9081
export default TokensPage;

0 commit comments

Comments
 (0)