Skip to content

Commit e67f0f6

Browse files
aslilacaslilac
authored
chore: convert emotion styles to tailwind (coder#19347)
1 parent 42c4792 commit e67f0f6

File tree

17 files changed

+81
-179
lines changed

17 files changed

+81
-179
lines changed

‎site/src/components/EmptyState/EmptyState.tsx

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { FC, HTMLAttributes, ReactNode } from "react";
2+
import { cn } from "utils/cn";
23

34
export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
45
/** Text Message to display, placed inside Typography component */
@@ -21,44 +22,25 @@ export const EmptyState: FC<EmptyStateProps> = ({
2122
cta,
2223
image,
2324
isCompact,
25+
className,
2426
...attrs
2527
}) => {
2628
return (
2729
<div
28-
css={[
29-
{
30-
overflow: "hidden",
31-
display: "flex",
32-
flexDirection: "column",
33-
justifyContent: "center",
34-
alignItems: "center",
35-
textAlign: "center",
36-
minHeight: 360,
37-
padding: "80px 40px",
38-
position: "relative",
39-
},
40-
isCompact && {
41-
minHeight: 180,
42-
padding: "10px 40px",
43-
},
44-
]}
30+
className={cn(
31+
"overflow-hidden flex flex-col justify-center items-center text-center min-h-96 py-20 px-10 relative",
32+
isCompact && "min-h-44 py-2.5",
33+
className,
34+
)}
4535
{...attrs}
4636
>
47-
<h5 css={{ fontSize: 24, fontWeight: 500, margin: 0 }}>{message}</h5>
37+
<h5 className="text-2xl font-medium m-0">{message}</h5>
4838
{description && (
49-
<p
50-
css={(theme) => ({
51-
marginTop: 16,
52-
fontSize: 16,
53-
lineHeight: "140%",
54-
maxWidth: 480,
55-
color: theme.palette.text.secondary,
56-
})}
57-
>
39+
<p className="mt-4 line-height-[140%] max-w-md text-content-secondary">
5840
{description}
5941
</p>
6042
)}
61-
{cta && <div css={{ marginTop: 24 }}>{cta}</div>}
43+
{cta && <div className="mt-6">{cta}</div>}
6244
{image}
6345
</div>
6446
);

‎site/src/components/FullPageForm/FullPageForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const FullPageForm: FC<FullPageFormProps> = ({
1919
}) => {
2020
return (
2121
<Margins size="small">
22-
<PageHeader css={{ paddingBottom: 24 }}>
22+
<PageHeader className="pb-6">
2323
<PageHeaderTitle>{title}</PageHeaderTitle>
2424
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
2525
</PageHeader>

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const LastSeen: FC<LastSeenProps> = ({ at, className, ...attrs }) => {
4040
return (
4141
<span
4242
data-chromatic="ignore"
43-
css={{ color }}
43+
style={{ color }}
4444
{...attrs}
4545
className={cn(["whitespace-nowrap", className])}
4646
>

‎site/src/components/Latency/Latency.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ export const Latency: FC<LatencyProps> = ({
2525
if (isLoading) {
2626
return (
2727
<Tooltip title="Loading latency...">
28-
<CircularProgress
29-
size={size}
30-
css={{ marginLeft: "auto" }}
31-
style={{ color }}
32-
/>
28+
<CircularProgress size={size} className="ml-auto" style={{ color }} />
3329
</Tooltip>
3430
);
3531
}
@@ -38,22 +34,20 @@ export const Latency: FC<LatencyProps> = ({
3834
const notAvailableText = "Latency not available";
3935
return (
4036
<Tooltip title={notAvailableText}>
41-
<CircleHelpIcon
42-
className="size-icon-sm"
43-
css={{
44-
marginLeft: "auto",
45-
}}
46-
style={{ color }}
47-
/>
37+
<>
38+
<span css={{ ...visuallyHidden }}>{notAvailableText}</span>
39+
40+
<CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
41+
</>
4842
</Tooltip>
4943
);
5044
}
5145

5246
return (
53-
<p css={{ fontSize: 13, margin: "0 0 0 auto" }} style={{ color }}>
47+
<div className="ml-auto text-sm" style={{ color }}>
5448
<span css={{ ...visuallyHidden }}>Latency: </span>
5549
{latency.toFixed(0)}
5650
<Abbr title="milliseconds">ms</Abbr>
57-
</p>
51+
</div>
5852
);
5953
};

‎site/src/components/PaginationWidget/PaginationWidgetBase.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
3939
);
4040

4141
return (
42-
<div
43-
css={{
44-
justifyContent: "center",
45-
alignItems: "center",
46-
display: "flex",
47-
flexDirection: "row",
48-
padding: "0 20px",
49-
columnGap: "6px",
50-
}}
51-
>
42+
<div className="flex flex-row items-center justify-center px-5 gap-x-1.5">
5243
<PaginationNavButton
5344
disabledMessage="You are already on the first page"
5445
disabled={isPrevDisabled}

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,26 @@ export const Paywall: FC<PaywallProps> = ({
2020
return (
2121
<div css={styles.root}>
2222
<div>
23-
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
24-
<h5 css={styles.title}>{message}</h5>
23+
<Stack direction="row" alignItems="center" className="mb-6">
24+
<h5 className="font-semibold font-inherit text-xl m-0">{message}</h5>
2525
<PremiumBadge />
2626
</Stack>
2727

28-
{description && <p css={styles.description}>{description}</p>}
28+
{description && (
29+
<p className="font-inherit max-w-md text-sm">{description}</p>
30+
)}
2931
<Link
3032
href={documentationLink}
3133
target="_blank"
3234
rel="noreferrer"
33-
css={{ fontWeight: 600 }}
35+
className="font-semibold"
3436
>
3537
Read the documentation
3638
</Link>
3739
</div>
38-
<div css={styles.separator} />
40+
<div className="w-px h-[220px] bg-highlight-purple/50 ml-2" />
3941
<Stack direction="column" alignItems="left" spacing={3}>
40-
<ul css={styles.featureList}>
42+
<ul className="m-0 px-6 text-sm font-medium">
4143
<li css={styles.feature}>
4244
<FeatureIcon />
4345
High availability & workspace proxies
@@ -55,7 +57,7 @@ export const Paywall: FC<PaywallProps> = ({
5557
Unlimited Git & external auth integrations
5658
</li>
5759
</ul>
58-
<div css={styles.learnButton}>
60+
<div className="px-7">
5961
<Button asChild>
6062
<a
6163
href="https://coder.com/pricing#compare-plans"
@@ -98,36 +100,6 @@ const styles = {
98100
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
99101
border: `1px solid ${theme.branding.premium.border}`,
100102
}),
101-
title: {
102-
fontWeight: 600,
103-
fontFamily: "inherit",
104-
fontSize: 22,
105-
margin: 0,
106-
},
107-
description: () => ({
108-
fontFamily: "inherit",
109-
maxWidth: 460,
110-
fontSize: 14,
111-
}),
112-
separator: (theme) => ({
113-
width: 1,
114-
height: 220,
115-
backgroundColor: theme.branding.premium.divider,
116-
marginLeft: 8,
117-
}),
118-
learnButton: {
119-
padding: "0 28px",
120-
},
121-
featureList: {
122-
listStyle: "none",
123-
margin: 0,
124-
padding: "0 24px",
125-
fontSize: 14,
126-
fontWeight: 500,
127-
},
128-
featureIcon: (theme) => ({
129-
color: theme.roles.active.fill.outline,
130-
}),
131103
feature: {
132104
display: "flex",
133105
alignItems: "center",

‎site/src/components/SelectMenu/SelectMenu.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const LongButtonText: Story = {
7676
<SelectMenu>
7777
<SelectMenuTrigger>
7878
<SelectMenuButton
79-
css={{ width: 200 }}
79+
className="w-48"
8080
startIcon={<Avatar size="sm" fallback={selectedOpt} />}
8181
>
8282
{selectedOpt}
@@ -107,7 +107,7 @@ export const NoSelectedOption: Story = {
107107
return (
108108
<SelectMenu>
109109
<SelectMenuTrigger>
110-
<SelectMenuButton css={{ width: 200 }}>All users</SelectMenuButton>
110+
<SelectMenuButton className="w-48">All users</SelectMenuButton>
111111
</SelectMenuTrigger>
112112
<SelectMenuContent>
113113
<SelectMenuSearch onChange={action("search")} />

‎site/src/components/SelectMenu/SelectMenu.tsx

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
type ReactElement,
2121
useMemo,
2222
} from "react";
23+
import { cn } from "utils/cn";
2324

2425
const SIDE_PADDING = 16;
2526

@@ -76,19 +77,22 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
7677
);
7778
};
7879

79-
export const SelectMenuList: FC<MenuListProps> = (props) => {
80+
export const SelectMenuList: FC<MenuListProps> = ({
81+
children,
82+
className,
83+
...attrs
84+
}) => {
8085
const items = useMemo(() => {
81-
let children = Children.toArray(props.children);
82-
if (!children.every(isValidElement)) {
86+
let items = Children.toArray(children);
87+
if (!items.every(isValidElement)) {
8388
throw new Error("SelectMenuList only accepts MenuItem children");
8489
}
85-
children = moveSelectedElementToFirst(
86-
children as ReactElement<MenuItemProps>[],
87-
);
88-
return children;
89-
}, [props.children]);
90+
items = moveSelectedElementToFirst(items as ReactElement<MenuItemProps>[]);
91+
return items;
92+
}, [children]);
93+
9094
return (
91-
<MenuList css={{ maxHeight: 480 }} {...props}>
95+
<MenuList className={cn("max-h-[480px]", className)} {...attrs}>
9296
{items}
9397
</MenuList>
9498
);
@@ -106,25 +110,31 @@ function moveSelectedElementToFirst(items: ReactElement<MenuItemProps>[]) {
106110
return newItems;
107111
}
108112

109-
export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
110-
return <div css={{ marginRight: 16 }} {...props} />;
113+
export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = ({
114+
children,
115+
className,
116+
...attrs
117+
}) => {
118+
return (
119+
<div className={cn("mr-4", className)} {...attrs}>
120+
{children}
121+
</div>
122+
);
111123
};
112124

113-
export const SelectMenuItem: FC<MenuItemProps> = (props) => {
125+
export const SelectMenuItem: FC<MenuItemProps> = ({
126+
children,
127+
className,
128+
selected,
129+
...attrs
130+
}) => {
114131
return (
115132
<MenuItem
116-
css={{
117-
fontSize: 14,
118-
gap: 0,
119-
lineHeight: 1,
120-
padding: `12px ${SIDE_PADDING}px`,
121-
}}
122-
{...props}
133+
className={cn("text-sm gap-0 leading-none py-3 px-4", className)}
134+
{...attrs}
123135
>
124-
{props.children}
125-
{props.selected && (
126-
<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
127-
)}
136+
{children}
137+
{selected && <CheckIcon className="size-icon-xs ml-auto" />}
128138
</MenuItem>
129139
);
130140
};

‎site/src/components/Sidebar/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const SidebarNavItem: FC<SidebarNavItemProps> = ({
106106
}
107107
>
108108
<Stack alignItems="center" spacing={1.5} direction="row">
109-
<Icon css={{ width: 16, height: 16 }} />
109+
<Icon className="size-4" />
110110
{children}
111111
</Stack>
112112
</NavLink>

‎site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
4444
return (
4545
<div
4646
data-chromatic="ignore"
47-
css={{
48-
padding: "8px 0",
49-
height: "100%",
47+
className="py-2 h-full"
48+
style={{
5049
backgroundColor: theme.monaco.colors["editor.background"],
5150
}}
5251
>

0 commit comments

Comments
 (0)