Skip to content

Commit e67f0f6

Browse files
aslilacaslilac
authored
chore: convert emotion styles to tailwind (#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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy