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

Commiteaea918

Browse files
authored
chore: use emotion for styling (pt. 5) (#10261)
1 parent4240200 commiteaea918

File tree

28 files changed

+656
-839
lines changed

28 files changed

+656
-839
lines changed

‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{css}from"@emotion/css";
22
import{useTheme}from"@emotion/react";
3-
importPopover,{PopoverProps}from"@mui/material/Popover";
3+
importPopover,{typePopoverProps}from"@mui/material/Popover";
44
importtype{FC,PropsWithChildren}from"react";
55

66
typeBorderedMenuVariant="user-dropdown";
@@ -18,7 +18,7 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
1818

1919
constpaper=css`
2020
width:260px;
21-
border-radius:${theme.shape.borderRadius};
21+
border-radius:${theme.shape.borderRadius}px;
2222
box-shadow:${theme.shadows[6]};
2323
`;
2424

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SidebarNavItem: FC<
4747
font-size:14px;
4848
text-decoration: none;
4949
padding:${theme.spacing(1.5,1.5,1.5,2)};
50-
border-radius:${theme.shape.borderRadius/2};
50+
border-radius:${theme.shape.borderRadius/2}px;
5151
transition: background-color0.15s ease-in-out;
5252
margin-bottom:1;
5353
position: relative;

‎site/src/components/ErrorBoundary/RuntimeErrorState.tsx

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
importButtonfrom"@mui/material/Button";
22
importLinkfrom"@mui/material/Link";
3-
import{makeStyles}from"@mui/styles";
43
importRefreshOutlinedfrom"@mui/icons-material/RefreshOutlined";
5-
import{BuildInfoResponse}from"api/typesGenerated";
4+
import{typeFC,useEffect,useState}from"react";
5+
import{Helmet}from"react-helmet-async";
6+
import{css}from"@emotion/css";
7+
import{useTheme,typeInterpolation,typeTheme}from"@emotion/react";
8+
importtype{BuildInfoResponse}from"api/typesGenerated";
69
import{CopyButton}from"components/CopyButton/CopyButton";
710
import{CoderIcon}from"components/Icons/CoderIcon";
811
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
912
import{Stack}from"components/Stack/Stack";
10-
import{FC,useEffect,useState}from"react";
11-
import{Helmet}from"react-helmet-async";
1213
import{Margins}from"components/Margins/Margins";
1314

1415
constfetchDynamicallyImportedModuleError=
@@ -17,7 +18,7 @@ const fetchDynamicallyImportedModuleError =
1718
exporttypeRuntimeErrorStateProps={error:Error};
1819

1920
exportconstRuntimeErrorState:FC<RuntimeErrorStateProps>=({ error})=>{
20-
conststyles=useStyles();
21+
consttheme=useTheme();
2122
const[checkingError,setCheckingError]=useState(true);
2223
const[staticBuildInfo,setStaticBuildInfo]=useState<BuildInfoResponse>();
2324
constcoderVersion=staticBuildInfo?.version;
@@ -52,11 +53,11 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
5253
<title>Something went wrong...</title>
5354
</Helmet>
5455
{!checkingError ?(
55-
<MarginsclassName={styles.root}>
56-
<divclassName={styles.innerRoot}>
57-
<CoderIconclassName={styles.logo}/>
58-
<h1className={styles.title}>Something went wrong...</h1>
59-
<pclassName={styles.text}>
56+
<Marginscss={styles.root}>
57+
<divcss={{width:"100%"}}>
58+
<CoderIconcss={styles.logo}/>
59+
<h1css={styles.title}>Something went wrong...</h1>
60+
<pcss={styles.text}>
6061
Please try reloading the page, if that doesn&lsquo;t work, you can
6162
ask for help in the{" "}
6263
<Linkhref="https://discord.gg/coder">
@@ -93,20 +94,33 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
9394
</Button>
9495
</Stack>
9596
{error.stack&&(
96-
<divclassName={styles.stack}>
97-
<divclassName={styles.stackHeader}>
97+
<divcss={styles.stack}>
98+
<divcss={styles.stackHeader}>
9899
Stacktrace
99100
<CopyButton
100-
buttonClassName={styles.copyButton}
101+
buttonClassName={css`
102+
background-color: transparent;
103+
border:0;
104+
border-radius:999px;
105+
min-height:${theme.spacing(4)};
106+
min-width:${theme.spacing(4)};
107+
height:${theme.spacing(4)};
108+
width:${theme.spacing(4)};
109+
110+
&svg {
111+
width:16px;
112+
height:16px;
113+
}
114+
`}
101115
text={error.stack}
102116
tooltipTitle="Copy stacktrace"
103117
/>
104118
</div>
105-
<preclassName={styles.stackCode}>{error.stack}</pre>
119+
<precss={styles.stackCode}>{error.stack}</pre>
106120
</div>
107121
)}
108122
{coderVersion&&(
109-
<divclassName={styles.version}>Version:{coderVersion}</div>
123+
<divcss={styles.version}>Version:{coderVersion}</div>
110124
)}
111125
</div>
112126
</Margins>
@@ -132,8 +146,8 @@ const getStaticBuildInfo = () => {
132146
}
133147
};
134148

135-
constuseStyles=makeStyles((theme)=>({
136-
root:{
149+
conststyles={
150+
root:(theme)=>({
137151
paddingTop:theme.spacing(4),
138152
paddingBottom:theme.spacing(4),
139153
textAlign:"center",
@@ -142,36 +156,34 @@ const useStyles = makeStyles((theme) => ({
142156
justifyContent:"center",
143157
minHeight:"100%",
144158
maxWidth:theme.spacing(75),
145-
},
159+
}),
146160

147-
innerRoot:{width:"100%"},
148-
149-
logo:{
161+
logo:(theme)=>({
150162
fontSize:theme.spacing(8),
151-
},
163+
}),
152164

153-
title:{
165+
title:(theme)=>({
154166
fontSize:theme.spacing(4),
155167
fontWeight:400,
156-
},
168+
}),
157169

158-
text:{
170+
text:(theme)=>({
159171
fontSize:16,
160172
color:theme.palette.text.secondary,
161173
lineHeight:"160%",
162174
marginBottom:theme.spacing(4),
163-
},
175+
}),
164176

165-
stack:{
177+
stack:(theme)=>({
166178
backgroundColor:theme.palette.background.paper,
167179
border:`1px solid${theme.palette.divider}`,
168180
borderRadius:4,
169181
marginTop:theme.spacing(8),
170182
display:"block",
171183
textAlign:"left",
172-
},
184+
}),
173185

174-
stackHeader:{
186+
stackHeader:(theme)=>({
175187
fontSize:10,
176188
textTransform:"uppercase",
177189
fontWeight:600,
@@ -184,33 +196,18 @@ const useStyles = makeStyles((theme) => ({
184196
flexAlign:"center",
185197
justifyContent:"space-between",
186198
alignItems:"center",
187-
},
199+
}),
188200

189-
stackCode:{
201+
stackCode:(theme)=>({
190202
padding:theme.spacing(2),
191203
margin:0,
192204
wordWrap:"break-word",
193205
whiteSpace:"break-spaces",
194-
},
195-
196-
copyButton:{
197-
backgroundColor:"transparent",
198-
border:0,
199-
borderRadius:999,
200-
minHeight:theme.spacing(4),
201-
minWidth:theme.spacing(4),
202-
height:theme.spacing(4),
203-
width:theme.spacing(4),
204-
205-
"& svg":{
206-
width:16,
207-
height:16,
208-
},
209-
},
210-
211-
version:{
206+
}),
207+
208+
version:(theme)=>({
212209
marginTop:theme.spacing(4),
213210
fontSize:12,
214211
color:theme.palette.text.secondary,
215-
},
216-
}));
212+
}),
213+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/components/FileUpload/FileUpload.tsx

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import{makeStyles}from"@mui/styles";
21
import{Stack}from"components/Stack/Stack";
3-
import{FC,DragEvent,useRef,ReactNode}from"react";
2+
import{typeFC,typeDragEvent,useRef,typeReactNode}from"react";
43
importUploadIconfrom"@mui/icons-material/CloudUploadOutlined";
54
import{useClickable}from"hooks/useClickable";
65
importCircularProgressfrom"@mui/material/CircularProgress";
7-
import{combineClasses}from"utils/combineClasses";
86
importIconButtonfrom"@mui/material/IconButton";
97
importRemoveIconfrom"@mui/icons-material/DeleteOutline";
108
importFileIconfrom"@mui/icons-material/FolderOutlined";
9+
import{css,typeInterpolation,typeTheme}from"@emotion/react";
1110

1211
constuseFileDrop=(
1312
callback:(file:File)=>void,
@@ -62,7 +61,6 @@ export const FileUpload: FC<FileUploadProps> = ({
6261
extension,
6362
fileTypeRequired,
6463
})=>{
65-
conststyles=useStyles();
6664
constinputRef=useRef<HTMLInputElement>(null);
6765
consttarDrop=useFileDrop(onUpload,fileTypeRequired);
6866

@@ -75,7 +73,7 @@ export const FileUpload: FC<FileUploadProps> = ({
7573
if(!isUploading&&file){
7674
return(
7775
<Stack
78-
className={styles.file}
76+
css={styles.file}
7977
direction="row"
8078
justifyContent="space-between"
8179
alignItems="center"
@@ -95,23 +93,20 @@ export const FileUpload: FC<FileUploadProps> = ({
9593
return(
9694
<>
9795
<div
98-
className={combineClasses({
99-
[styles.root]:true,
100-
[styles.disabled]:isUploading,
101-
})}
96+
css={[styles.root,isUploading&&styles.disabled]}
10297
{...clickable}
10398
{...tarDrop}
10499
>
105100
<StackalignItems="center"spacing={1}>
106101
{isUploading ?(
107102
<CircularProgresssize={32}/>
108103
) :(
109-
<UploadIconclassName={styles.icon}/>
104+
<UploadIconcss={styles.icon}/>
110105
)}
111106

112107
<StackalignItems="center"spacing={0.5}>
113-
<spanclassName={styles.title}>{title}</span>
114-
<spanclassName={styles.description}>{description}</span>
108+
<spancss={styles.title}>{title}</span>
109+
<spancss={styles.description}>{description}</span>
115110
</Stack>
116111
</Stack>
117112
</div>
@@ -120,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
120115
type="file"
121116
data-testid="file-upload"
122117
ref={inputRef}
123-
className={styles.input}
118+
css={styles.input}
124119
accept={extension}
125120
onChange={(event)=>{
126121
constfile=event.currentTarget.files?.[0];
@@ -133,48 +128,48 @@ export const FileUpload: FC<FileUploadProps> = ({
133128
);
134129
};
135130

136-
constuseStyles=makeStyles((theme)=>({
137-
root:{
138-
display:"flex",
139-
alignItems:"center",
140-
justifyContent:"center",
141-
borderRadius:theme.shape.borderRadius,
142-
border:`2px dashed${theme.palette.divider}`,
143-
padding:theme.spacing(6),
144-
cursor:"pointer",
145-
146-
"&:hover":{
147-
backgroundColor:theme.palette.background.paper,
148-
},
149-
},
131+
conststyles={
132+
root:(theme)=>css`
133+
display: flex;
134+
align-items:center;
135+
justify-content:center;
136+
border-radius:${theme.shape.borderRadius}px;
137+
border:2px dashed${theme.palette.divider};
138+
padding:${theme.spacing(6)};
139+
cursor: pointer;
140+
141+
&:hover {
142+
background-color:${theme.palette.background.paper};
143+
}
144+
`,
150145

151146
disabled:{
152147
pointerEvents:"none",
153148
opacity:0.75,
154149
},
155150

156-
icon:{
151+
icon:(theme)=>({
157152
fontSize:theme.spacing(8),
158-
},
153+
}),
159154

160-
title:{
155+
title:(theme)=>({
161156
fontSize:theme.spacing(2),
162-
},
157+
}),
163158

164-
description:{
159+
description:(theme)=>({
165160
color:theme.palette.text.secondary,
166161
textAlign:"center",
167162
maxWidth:theme.spacing(50),
168-
},
163+
}),
169164

170165
input:{
171166
display:"none",
172167
},
173168

174-
file:{
169+
file:(theme)=>({
175170
borderRadius:theme.shape.borderRadius,
176171
border:`1px solid${theme.palette.divider}`,
177172
padding:theme.spacing(2),
178173
background:theme.palette.background.paper,
179-
},
180-
}));
174+
}),
175+
}satisfiesRecord<string,Interpolation<Theme>>;
Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import{Margins}from"components/Margins/Margins";
2-
import{FC,ReactNode}from"react";
2+
import{typeFC,typeReactNode}from"react";
33
import{
44
PageHeader,
55
PageHeaderTitle,
66
PageHeaderSubtitle,
77
}from"components/PageHeader/PageHeader";
8-
import{makeStyles}from"@mui/styles";
8+
import{useTheme}from"@emotion/react";
99

1010
exportinterfaceFullPageFormProps{
1111
title:string;
@@ -17,11 +17,11 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
1717
detail,
1818
children,
1919
})=>{
20-
conststyles=useStyles();
20+
consttheme=useTheme();
2121

2222
return(
2323
<Marginssize="small">
24-
<PageHeaderclassName={styles.pageHeader}>
24+
<PageHeadercss={{paddingBottom:theme.spacing(3)}}>
2525
<PageHeaderTitle>{title}</PageHeaderTitle>
2626
{detail&&<PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
2727
</PageHeader>
@@ -30,9 +30,3 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
3030
</Margins>
3131
);
3232
};
33-
34-
constuseStyles=makeStyles((theme)=>({
35-
pageHeader:{
36-
paddingBottom:theme.spacing(3),
37-
},
38-
}));

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp