Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite67f0f6

Browse files
authored
chore: convert emotion styles to tailwind (#19347)
1 parent42c4792 commite67f0f6

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
importtype{FC,HTMLAttributes,ReactNode}from"react";
2+
import{cn}from"utils/cn";
23

34
exportinterfaceEmptyStatePropsextendsHTMLAttributes<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-
<h5css={{fontSize:24,fontWeight:500,margin:0}}>{message}</h5>
37+
<h5className="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+
<pclassName="mt-4 line-height-[140%] max-w-md text-content-secondary">
5840
{description}
5941
</p>
6042
)}
61-
{cta&&<divcss={{marginTop:24}}>{cta}</div>}
43+
{cta&&<divclassName="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
<Marginssize="small">
22-
<PageHeadercss={{paddingBottom:24}}>
22+
<PageHeaderclassName="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
<Tooltiptitle="Loading latency...">
28-
<CircularProgress
29-
size={size}
30-
css={{marginLeft:"auto"}}
31-
style={{ color}}
32-
/>
28+
<CircularProgresssize={size}className="ml-auto"style={{ color}}/>
3329
</Tooltip>
3430
);
3531
}
@@ -38,22 +34,20 @@ export const Latency: FC<LatencyProps> = ({
3834
constnotAvailableText="Latency not available";
3935
return(
4036
<Tooltiptitle={notAvailableText}>
41-
<CircleHelpIcon
42-
className="size-icon-sm"
43-
css={{
44-
marginLeft:"auto",
45-
}}
46-
style={{ color}}
47-
/>
37+
<>
38+
<spancss={{ ...visuallyHidden}}>{notAvailableText}</span>
39+
40+
<CircleHelpIconclassName="ml-auto size-icon-sm"style={{ color}}/>
41+
</>
4842
</Tooltip>
4943
);
5044
}
5145

5246
return(
53-
<pcss={{fontSize:13,margin:"0 0 0auto"}}style={{ color}}>
47+
<divclassName="ml-auto text-sm"style={{ color}}>
5448
<spancss={{ ...visuallyHidden}}>Latency:</span>
5549
{latency.toFixed(0)}
5650
<Abbrtitle="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+
<divclassName="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
<divcss={styles.root}>
2222
<div>
23-
<Stackdirection="row"alignItems="center"css={{marginBottom:24}}>
24-
<h5css={styles.title}>{message}</h5>
23+
<Stackdirection="row"alignItems="center"className="mb-6">
24+
<h5className="font-semibold font-inherit text-xl m-0">{message}</h5>
2525
<PremiumBadge/>
2626
</Stack>
2727

28-
{description&&<pcss={styles.description}>{description}</p>}
28+
{description&&(
29+
<pclassName="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-
<divcss={styles.separator}/>
40+
<divclassName="w-px h-[220px] bg-highlight-purple/50 ml-2"/>
3941
<Stackdirection="column"alignItems="left"spacing={3}>
40-
<ulcss={styles.featureList}>
42+
<ulclassName="m-0 px-6 text-sm font-medium">
4143
<licss={styles.feature}>
4244
<FeatureIcon/>
4345
High availability&workspaceproxies
@@ -55,7 +57,7 @@ export const Paywall: FC<PaywallProps> = ({
5557
Unlimited Git&externalauthintegrations
5658
</li>
5759
</ul>
58-
<divcss={styles.learnButton}>
60+
<divclassName="px-7">
5961
<ButtonasChild>
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={<Avatarsize="sm"fallback={selectedOpt}/>}
8181
>
8282
{selectedOpt}
@@ -107,7 +107,7 @@ export const NoSelectedOption: Story = {
107107
return(
108108
<SelectMenu>
109109
<SelectMenuTrigger>
110-
<SelectMenuButtoncss={{width:200}}>All users</SelectMenuButton>
110+
<SelectMenuButtonclassName="w-48">All users</SelectMenuButton>
111111
</SelectMenuTrigger>
112112
<SelectMenuContent>
113113
<SelectMenuSearchonChange={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
typeReactElement,
2121
useMemo,
2222
}from"react";
23+
import{cn}from"utils/cn";
2324

2425
constSIDE_PADDING=16;
2526

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

79-
exportconstSelectMenuList:FC<MenuListProps>=(props)=>{
80+
exportconstSelectMenuList:FC<MenuListProps>=({
81+
children,
82+
className,
83+
...attrs
84+
})=>{
8085
constitems=useMemo(()=>{
81-
letchildren=Children.toArray(props.children);
82-
if(!children.every(isValidElement)){
86+
letitems=Children.toArray(children);
87+
if(!items.every(isValidElement)){
8388
thrownewError("SelectMenuList only accepts MenuItem children");
8489
}
85-
children=moveSelectedElementToFirst(
86-
childrenasReactElement<MenuItemProps>[],
87-
);
88-
returnchildren;
89-
},[props.children]);
90+
items=moveSelectedElementToFirst(itemsasReactElement<MenuItemProps>[]);
91+
returnitems;
92+
},[children]);
93+
9094
return(
91-
<MenuListcss={{maxHeight:480}}{...props}>
95+
<MenuListclassName={cn("max-h-[480px]",className)}{...attrs}>
9296
{items}
9397
</MenuList>
9498
);
@@ -106,25 +110,31 @@ function moveSelectedElementToFirst(items: ReactElement<MenuItemProps>[]) {
106110
returnnewItems;
107111
}
108112

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

113-
exportconstSelectMenuItem:FC<MenuItemProps>=(props)=>{
125+
exportconstSelectMenuItem: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-
<CheckIconclassName="size-icon-xs"css={{marginLeft:"auto"}}/>
127-
)}
136+
{children}
137+
{selected&&<CheckIconclassName="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
<StackalignItems="center"spacing={1.5}direction="row">
109-
<Iconcss={{width:16,height:16}}/>
109+
<IconclassName="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)
[8]ページ先頭
©2009-2025 Movatter.jp