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

Commite5a20cd

Browse files
committed
emotion:EditRolesButton
1 parent6527b1f commite5a20cd

File tree

1 file changed

+36
-34
lines changed

1 file changed

+36
-34
lines changed

‎site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import{css}from"@emotion/css";
2+
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
13
importIconButtonfrom"@mui/material/IconButton";
24
import{EditSquare}from"components/Icons/EditSquare";
3-
import{FC}from"react";
4-
import{makeStyles}from"@mui/styles";
5+
import{typeFC}from"react";
56
import{Stack}from"components/Stack/Stack";
67
importCheckboxfrom"@mui/material/Checkbox";
78
importUserIconfrom"@mui/icons-material/PersonOutline";
@@ -34,15 +35,13 @@ const Option: React.FC<{
3435
isChecked:boolean;
3536
onChange:(roleName:string)=>void;
3637
}>=({ value, name, description, isChecked, onChange})=>{
37-
conststyles=useStyles();
38-
3938
return(
40-
<labelhtmlFor={name}className={styles.option}>
39+
<labelhtmlFor={name}css={styles.option}>
4140
<Stackdirection="row"alignItems="flex-start">
4241
<Checkbox
4342
id={name}
4443
size="small"
45-
className={styles.checkbox}
44+
css={styles.checkbox}
4645
value={value}
4746
checked={isChecked}
4847
onChange={(e)=>{
@@ -51,7 +50,7 @@ const Option: React.FC<{
5150
/>
5251
<Stackspacing={0}>
5352
<strong>{name}</strong>
54-
<spanclassName={styles.optionDescription}>{description}</span>
53+
<spancss={styles.optionDescription}>{description}</span>
5554
</Stack>
5655
</Stack>
5756
</label>
@@ -77,7 +76,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
7776
userLoginType,
7877
oidcRoleSync,
7978
})=>{
80-
conststyles=useStyles();
79+
consttheme=useTheme();
8180

8281
consthandleChange=(roleName:string)=>{
8382
if(selectedRoleNames.has(roleName)){
@@ -108,20 +107,28 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
108107
<PopoverTrigger>
109108
<IconButton
110109
size="small"
111-
className={styles.editButton}
110+
css={styles.editButton}
112111
title="Edit user roles"
113112
>
114113
<EditSquare/>
115114
</IconButton>
116115
</PopoverTrigger>
117116

118-
<PopoverContentclasses={{paper:styles.popoverPaper}}>
117+
<PopoverContent
118+
classes={{
119+
paper:css`
120+
width:${theme.spacing(45)};
121+
margin-top:${theme.spacing(1)};
122+
background:${theme.palette.background.paperLight};
123+
`,
124+
}}
125+
>
119126
<fieldset
120-
className={styles.fieldset}
127+
css={styles.fieldset}
121128
disabled={isLoading}
122129
title="Available roles"
123130
>
124-
<StackclassName={styles.options}spacing={3}>
131+
<Stackcss={styles.options}spacing={3}>
125132
{roles.map((role)=>(
126133
<Option
127134
key={role.name}
@@ -134,12 +141,12 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
134141
))}
135142
</Stack>
136143
</fieldset>
137-
<divclassName={styles.footer}>
144+
<divcss={styles.footer}>
138145
<Stackdirection="row"alignItems="flex-start">
139-
<UserIconclassName={styles.userIcon}/>
146+
<UserIconcss={styles.userIcon}/>
140147
<Stackspacing={0}>
141148
<strong>Member</strong>
142-
<spanclassName={styles.optionDescription}>
149+
<spancss={styles.optionDescription}>
143150
{roleDescriptions.member}
144151
</span>
145152
</Stack>
@@ -150,8 +157,8 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
150157
);
151158
};
152159

153-
constuseStyles=makeStyles((theme)=>({
154-
editButton:{
160+
conststyles={
161+
editButton:(theme)=>({
155162
color:theme.palette.text.secondary,
156163

157164
"& .MuiSvgIcon-root":{
@@ -165,12 +172,7 @@ const useStyles = makeStyles((theme) => ({
165172
color:theme.palette.text.primary,
166173
backgroundColor:"transparent",
167174
},
168-
},
169-
popoverPaper:{
170-
width:theme.spacing(45),
171-
marginTop:theme.spacing(1),
172-
background:theme.palette.background.paperLight,
173-
},
175+
}),
174176
fieldset:{
175177
border:0,
176178
margin:0,
@@ -180,14 +182,14 @@ const useStyles = makeStyles((theme) => ({
180182
opacity:0.5,
181183
},
182184
},
183-
options:{
185+
options:(theme)=>({
184186
padding:theme.spacing(3),
185-
},
187+
}),
186188
option:{
187189
cursor:"pointer",
188190
fontSize:14,
189191
},
190-
checkbox:{
192+
checkbox:(theme)=>({
191193
padding:0,
192194
position:"relative",
193195
top:1,// Alignment
@@ -196,21 +198,21 @@ const useStyles = makeStyles((theme) => ({
196198
width:theme.spacing(2.5),
197199
height:theme.spacing(2.5),
198200
},
199-
},
200-
optionDescription:{
201+
}),
202+
optionDescription:(theme)=>({
201203
fontSize:13,
202204
color:theme.palette.text.secondary,
203205
lineHeight:"160%",
204-
},
205-
footer:{
206+
}),
207+
footer:(theme)=>({
206208
padding:theme.spacing(3),
207209
backgroundColor:theme.palette.background.paper,
208210
borderTop:`1px solid${theme.palette.divider}`,
209211
fontSize:14,
210-
},
211-
userIcon:{
212+
}),
213+
userIcon:(theme)=>({
212214
width:theme.spacing(2.5),// Same as the checkbox
213215
height:theme.spacing(2.5),
214216
color:theme.palette.primary.main,
215-
},
216-
}));
217+
}),
218+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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