Skip to content

Commit fdf177e

Browse files
aslilacaslilac
committed
chore: convert emotion styles to tailwind
1 parent f923995 commit fdf177e

File tree

15 files changed

+48
-156
lines changed

15 files changed

+48
-156
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-90 py-20 px-10 relative",
32+
isCompact && "min-h-45 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/FullPageLayout/Sidebar.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,7 @@ export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
77
const theme = useTheme();
88
return (
99
<div
10-
css={{
11-
width: 260,
12-
borderRight: `1px solid ${theme.palette.divider}`,
13-
height: "100%",
14-
overflow: "auto",
15-
flexShrink: 0,
16-
padding: "8px 0",
17-
display: "flex",
18-
flexDirection: "column",
19-
gap: 1,
20-
}}
10+
className="w-64 border-0 border-solid border-r border-r-border h-full overflow-auto shrink-0 py-2 flex flex-col gap-px"
2111
{...props}
2212
/>
2313
);

‎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: 3 additions & 13 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
}
@@ -41,20 +37,14 @@ export const Latency: FC<LatencyProps> = ({
4137
<>
4238
<span css={{ ...visuallyHidden }}>{notAvailableText}</span>
4339

44-
<CircleHelpIcon
45-
className="size-icon-sm"
46-
css={{
47-
marginLeft: "auto",
48-
}}
49-
style={{ color }}
50-
/>
40+
<CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
5141
</>
5242
</Tooltip>
5343
);
5444
}
5545

5646
return (
57-
<p css={{ fontSize: 13, margin: "0 0 0 auto" }} style={{ color }}>
47+
<p className="ml-auto text-sm" style={{ color }}>
5848
<span css={{ ...visuallyHidden }}>Latency: </span>
5949
{latency.toFixed(0)}
6050
<Abbr title="milliseconds">ms</Abbr>

‎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: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,24 @@ 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 && <p className="font-inherit max-w-md text-sm">{description}</p>}
2929
<Link
3030
href={documentationLink}
3131
target="_blank"
3232
rel="noreferrer"
33-
css={{ fontWeight: 600 }}
33+
className="font-semibold"
3434
>
3535
Read the documentation
3636
</Link>
3737
</div>
38-
<div css={styles.separator} />
38+
<div className="w-px h-55 bg-border ml-2" />
3939
<Stack direction="column" alignItems="left" spacing={3}>
40-
<ul css={styles.featureList}>
40+
<ul className="m-0 px-6 text-sm font-medium">
4141
<li css={styles.feature}>
4242
<FeatureIcon />
4343
High availability & workspace proxies
@@ -55,7 +55,7 @@ export const Paywall: FC<PaywallProps> = ({
5555
Unlimited Git & external auth integrations
5656
</li>
5757
</ul>
58-
<div css={styles.learnButton}>
58+
<div className="px-7">
5959
<Button asChild>
6060
<a
6161
href="https://coder.com/pricing#compare-plans"
@@ -98,36 +98,6 @@ const styles = {
9898
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
9999
border: `1px solid ${theme.branding.premium.border}`,
100100
}),
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-
}),
131101
feature: {
132102
display: "flex",
133103
alignItems: "center",

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const meta: Meta<typeof SelectMenu> = {
3131
</SelectMenuButton>
3232
</SelectMenuTrigger>
3333
<SelectMenuContent>
34-
<SelectMenuSearch onChange={() => {}} />
34+
<SelectMenuSearch onChange={() => { }} />
3535
<SelectMenuList>
3636
{opts.map((o) => (
3737
<SelectMenuItem key={o} selected={o === selectedOpt}>
@@ -76,14 +76,14 @@ export const LongButtonText: Story = {
7676
<SelectMenu>
7777
<SelectMenuTrigger>
7878
<SelectMenuButton
79-
css={{ width: 200 }}
79+
className="w-50"
8080
startIcon={<Avatar size="sm" fallback={selectedOpt} />}
8181
>
8282
{selectedOpt}
8383
</SelectMenuButton>
8484
</SelectMenuTrigger>
8585
<SelectMenuContent>
86-
<SelectMenuSearch onChange={() => {}} />
86+
<SelectMenuSearch onChange={() => { }} />
8787
<SelectMenuList>
8888
{opts.map((o) => (
8989
<SelectMenuItem key={o} selected={o === 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-50">All users</SelectMenuButton>
111111
</SelectMenuTrigger>
112112
<SelectMenuContent>
113113
<SelectMenuSearch onChange={action("search")} />

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const SelectMenuList: FC<MenuListProps> = (props) => {
8888
return children;
8989
}, [props.children]);
9090
return (
91-
<MenuList css={{ maxHeight: 480 }} {...props}>
91+
<MenuList className="max-h-[480px]" {...props}>
9292
{items}
9393
</MenuList>
9494
);
@@ -107,23 +107,18 @@ function moveSelectedElementToFirst(items: ReactElement<MenuItemProps>[]) {
107107
}
108108

109109
export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
110-
return <div css={{ marginRight: 16 }} {...props} />;
110+
return <div className="mr-4" {...props} />;
111111
};
112112

113113
export const SelectMenuItem: FC<MenuItemProps> = (props) => {
114114
return (
115115
<MenuItem
116-
css={{
117-
fontSize: 14,
118-
gap: 0,
119-
lineHeight: 1,
120-
padding: `12px ${SIDE_PADDING}px`,
121-
}}
116+
className="text-sm gap-0 leading-none py-3 px-4"
122117
{...props}
123118
>
124119
{props.children}
125120
{props.selected && (
126-
<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
121+
<CheckIcon className="size-icon-xs ml-auto" />
127122
)}
128123
</MenuItem>
129124
);

‎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>

0 commit comments

Comments
 (0)