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

Commit921b6eb

Browse files
authored
chore: use emotion for styling (pt. 9) (#10474)
1 parent839a16e commit921b6eb

File tree

30 files changed

+559
-629
lines changed

30 files changed

+559
-629
lines changed

‎site/src/components/IconField/IconField.tsx

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import{css,Global,useTheme}from"@emotion/react";
12
importButtonfrom"@mui/material/Button";
23
importInputAdornmentfrom"@mui/material/InputAdornment";
3-
importTextField,{TextFieldProps}from"@mui/material/TextField";
4-
import{makeStyles}from"@mui/styles";
4+
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
55
importPickerfrom"@emoji-mart/react";
6-
import{FC}from"react";
6+
import{typeFC}from"react";
77
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
88
import{Stack}from"components/Stack/Stack";
99
import{colors}from"theme/colors";
@@ -48,7 +48,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
4848
thrownewError(`Invalid icon value "${typeoftextFieldProps.value}"`);
4949
}
5050

51-
conststyles=useStyles();
51+
consttheme=useTheme();
5252
consthasIcon=textFieldProps.value&&textFieldProps.value!=="";
5353

5454
return(
@@ -59,7 +59,21 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
5959
label="Icon"
6060
InputProps={{
6161
endAdornment:hasIcon ?(
62-
<InputAdornmentposition="end"className={styles.adornment}>
62+
<InputAdornment
63+
position="end"
64+
css={{
65+
width:theme.spacing(3),
66+
height:theme.spacing(3),
67+
display:"flex",
68+
alignItems:"center",
69+
justifyContent:"center",
70+
71+
"& img":{
72+
maxWidth:"100%",
73+
objectFit:"contain",
74+
},
75+
}}
76+
>
6377
<img
6478
alt=""
6579
src={textFieldProps.value}
@@ -85,6 +99,18 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
8599
id="emoji"
86100
css={{marginTop:0,".MuiPaper-root":{width:"auto"}}}
87101
>
102+
<Global
103+
styles={css`
104+
em-emoji-picker {
105+
--rgb-background:${theme.palette.background.paper};
106+
--rgb-input:${colors.gray[17]};
107+
--rgb-color:${colors.gray[4]};
108+
109+
// Hack to prevent the right side from being cut off
110+
width:350px;
111+
}
112+
`}
113+
/>
88114
<Picker
89115
set="twitter"
90116
theme="dark"
@@ -104,29 +130,4 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
104130
);
105131
};
106132

107-
constuseStyles=makeStyles((theme)=>({
108-
"@global":{
109-
"em-emoji-picker":{
110-
"--rgb-background":theme.palette.background.paper,
111-
"--rgb-input":colors.gray[17],
112-
"--rgb-color":colors.gray[4],
113-
114-
// Hack to prevent the right side from being cut off
115-
width:350,
116-
},
117-
},
118-
adornment:{
119-
width:theme.spacing(3),
120-
height:theme.spacing(3),
121-
display:"flex",
122-
alignItems:"center",
123-
justifyContent:"center",
124-
125-
"& img":{
126-
maxWidth:"100%",
127-
objectFit:"contain",
128-
},
129-
},
130-
}));
131-
132133
exportdefaultIconField;

‎site/src/components/TableToolbar/TableToolbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Skeleton from "@mui/material/Skeleton";
55
exportconstTableToolbar=styled(Box)(({ theme})=>({
66
fontSize:13,
77
marginBottom:theme.spacing(1),
8-
marginTop:theme.spacing(0),
8+
marginTop:0,
99
height:36,// The size of a small button
1010
color:theme.palette.text.secondary,
1111
"& strong":{color:theme.palette.text.primary},

‎site/src/components/UserAutocomplete/UserAutocomplete.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
import{css}from"@emotion/css";
2+
import{useTheme}from"@emotion/react";
13
importCircularProgressfrom"@mui/material/CircularProgress";
2-
import{makeStyles}from"@mui/styles";
34
importTextFieldfrom"@mui/material/TextField";
45
importAutocompletefrom"@mui/material/Autocomplete";
5-
import{User}from"api/typesGenerated";
6+
importtype{User}from"api/typesGenerated";
67
import{Avatar}from"components/Avatar/Avatar";
78
import{AvatarData}from"components/AvatarData/AvatarData";
8-
import{ChangeEvent,ComponentProps,FC,useState}from"react";
9+
import{
10+
typeChangeEvent,
11+
typeComponentProps,
12+
typeFC,
13+
useState,
14+
}from"react";
915
importBoxfrom"@mui/material/Box";
1016
import{useDebouncedFunction}from"hooks/debounce";
1117
import{useQuery}from"react-query";
@@ -27,7 +33,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
2733
className,
2834
size="small",
2935
})=>{
30-
conststyles=useStyles();
36+
consttheme=useTheme();
3137
const[autoComplete,setAutoComplete]=useState<{
3238
value:string;
3339
open:boolean;
@@ -101,7 +107,11 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
101107
size={size}
102108
label={label}
103109
placeholder="User email or username"
104-
className={styles.textField}
110+
css={{
111+
"&:not(:has(label))":{
112+
margin:0,
113+
},
114+
}}
105115
InputProps={{
106116
...params.InputProps,
107117
onChange:debouncedInputOnChange,
@@ -119,7 +129,12 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
119129
</>
120130
),
121131
classes:{
122-
root:styles.inputRoot,
132+
root:css`
133+
padding-left:${theme.spacing(
134+
1.75,
135+
)}!important; // Same padding left as input
136+
gap:${theme.spacing(0.5)};
137+
`,
123138
},
124139
}}
125140
InputLabelProps={{
@@ -130,15 +145,3 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
130145
/>
131146
);
132147
};
133-
134-
exportconstuseStyles=makeStyles((theme)=>({
135-
textField:{
136-
"&:not(:has(label))":{
137-
margin:0,
138-
},
139-
},
140-
inputRoot:{
141-
paddingLeft:`${theme.spacing(1.75)} !important`,// Same padding left as input
142-
gap:theme.spacing(0.5),
143-
},
144-
}));

‎site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import{makeStyles}from"@mui/styles";
21
importdayjsfrom"dayjs";
3-
import{ComponentProps,FC,Fragment}from"react";
4-
import{ProvisionerJobLog}from"api/typesGenerated";
2+
import{typeComponentProps,typeFC,Fragment}from"react";
3+
importtype{ProvisionerJobLog}from"api/typesGenerated";
54
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
65
import{Logs}from"./Logs";
76
importBoxfrom"@mui/material/Box";
8-
import{combineClasses}from"utils/combineClasses";
7+
import{typeInterpolation,typeTheme}from"@emotion/react";
98

109
constLanguage={
1110
seconds:"seconds",
@@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
5352
})=>{
5453
constgroupedLogsByStage=groupLogsByStage(logs);
5554
conststages=Object.keys(groupedLogsByStage);
56-
conststyles=useStyles();
5755

5856
return(
5957
<Box
@@ -79,15 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
7977

8078
return(
8179
<Fragmentkey={stage}>
82-
<div
83-
className={combineClasses([
84-
styles.header,
85-
sticky ?styles.sticky :"",
86-
])}
87-
>
80+
<divcss={[styles.header,sticky&&styles.sticky]}>
8881
<div>{stage}</div>
8982
{shouldDisplayDuration&&(
90-
<divclassName={styles.duration}>
83+
<divcss={styles.duration}>
9184
{duration}{Language.seconds}
9285
</div>
9386
)}
@@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
10093
);
10194
};
10295

103-
constuseStyles=makeStyles((theme)=>({
104-
header:{
96+
conststyles={
97+
header:(theme)=>({
10598
fontSize:13,
10699
fontWeight:600,
107100
padding:theme.spacing(0.5,3),
@@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({
119112
"&:first-child":{
120113
borderRadius:"8px 8px 0 0",
121114
},
122-
},
115+
}),
123116

124117
sticky:{
125118
position:"sticky",
126119
top:0,
127120
},
128121

129-
duration:{
122+
duration:(theme)=>({
130123
marginLeft:"auto",
131124
color:theme.palette.text.secondary,
132125
fontSize:12,
133-
},
134-
}));
126+
}),
127+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import{Workspace}from"api/typesGenerated";
1+
importtype{Workspace}from"api/typesGenerated";
22
import{Pill}from"components/Pill/Pill";
3-
import{FC,PropsWithChildren}from"react";
4-
import{makeStyles}from"@mui/styles";
5-
import{combineClasses}from"utils/combineClasses";
3+
import{typeFC,typePropsWithChildren}from"react";
64
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne";
75
import{DormantDeletionText}from"components/WorkspaceDeletion";
86
import{getDisplayWorkspaceStatus}from"utils/workspace";
9-
importTooltip,{TooltipProps,tooltipClasses}from"@mui/material/Tooltip";
7+
importTooltip,{
8+
typeTooltipProps,
9+
tooltipClasses,
10+
}from"@mui/material/Tooltip";
1011
import{styled}from"@mui/material/styles";
1112
importBoxfrom"@mui/material/Box";
1213
importErrorOutlinefrom"@mui/icons-material/ErrorOutline";
14+
import{typeInterpolation,typeTheme}from"@emotion/react";
1315

1416
exporttypeWorkspaceStatusBadgeProps={
1517
workspace:Workspace;
@@ -56,7 +58,6 @@ export const WorkspaceStatusBadge: FC<
5658
exportconstWorkspaceStatusText:FC<
5759
PropsWithChildren<WorkspaceStatusBadgeProps>
5860
>=({ workspace, className})=>{
59-
conststyles=useStyles();
6061
const{ text, type}=getDisplayWorkspaceStatus(
6162
workspace.latest_build.status,
6263
);
@@ -71,11 +72,8 @@ export const WorkspaceStatusText: FC<
7172
<span
7273
role="status"
7374
data-testid="build-status"
74-
className={combineClasses([
75-
className,
76-
styles.root,
77-
styles[`type-${type}`],
78-
])}
75+
className={className}
76+
css={[styles.root,styles[`type-${type}`]]}
7977
>
8078
{text}
8179
</span>
@@ -95,27 +93,22 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
9593
},
9694
}));
9795

98-
constuseStyles=makeStyles((theme)=>({
96+
conststyles={
9997
root:{fontWeight:600},
100-
"type-error":{
98+
99+
"type-error":(theme)=>({
101100
color:theme.palette.error.light,
102-
},
103-
"type-warning":{
101+
}),
102+
"type-warning":(theme)=>({
104103
color:theme.palette.warning.light,
105-
},
106-
"type-success":{
104+
}),
105+
"type-success":(theme)=>({
107106
color:theme.palette.success.light,
108-
},
109-
"type-info":{
107+
}),
108+
"type-info":(theme)=>({
110109
color:theme.palette.info.light,
111-
},
112-
"type-undefined":{
110+
}),
111+
"type-undefined":(theme)=>({
113112
color:theme.palette.text.secondary,
114-
},
115-
"type-primary":{
116-
color:theme.palette.text.primary,
117-
},
118-
"type-secondary":{
119-
color:theme.palette.text.secondary,
120-
},
121-
}));
113+
}),
114+
}satisfiesRecord<string,Interpolation<Theme>>;
Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import{useTheme,typeCSSObject}from"@emotion/react";
12
import{typeMouseEventHandler}from"react";
23
import{typeTableRowProps}from"@mui/material/TableRow";
3-
import{makeStyles}from"@mui/styles";
44
import{useClickable,typeUseClickableResult}from"./useClickable";
55

66
typeUseClickableTableRowResult=UseClickableResult<HTMLTableRowElement>&
77
TableRowProps&{
8-
className:string;
8+
css:CSSObject;
99
hover:true;
1010
onAuxClick:MouseEventHandler<HTMLTableRowElement>;
1111
};
@@ -28,12 +28,24 @@ export const useClickableTableRow = ({
2828
onDoubleClick,
2929
onMiddleClick,
3030
}:UseClickableTableRowConfig):UseClickableTableRowResult=>{
31-
conststyles=useStyles();
3231
constclickableProps=useClickable(onClick);
32+
consttheme=useTheme();
3333

3434
return{
3535
...clickableProps,
36-
className:styles.row,
36+
css:{
37+
cursor:"pointer",
38+
39+
"&:focus":{
40+
outline:`1px solid${theme.palette.secondary.dark}`,
41+
outlineOffset:-1,
42+
},
43+
44+
"&:last-of-type":{
45+
borderBottomLeftRadius:theme.shape.borderRadius,
46+
borderBottomRightRadius:theme.shape.borderRadius,
47+
},
48+
},
3749
hover:true,
3850
onDoubleClick,
3951
onAuxClick:(event)=>{
@@ -46,19 +58,3 @@ export const useClickableTableRow = ({
4658
},
4759
};
4860
};
49-
50-
constuseStyles=makeStyles((theme)=>({
51-
row:{
52-
cursor:"pointer",
53-
54-
"&:focus":{
55-
outline:`1px solid${theme.palette.secondary.dark}`,
56-
outlineOffset:-1,
57-
},
58-
59-
"&:last-of-type":{
60-
borderBottomLeftRadius:theme.shape.borderRadius,
61-
borderBottomRightRadius:theme.shape.borderRadius,
62-
},
63-
},
64-
}));

0 commit comments

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