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

Commit00e76b8

Browse files
authored
chore: migrate to tailwind (#16543)
Moving styles to Tailwind
1 parente38bd27 commit00e76b8

File tree

1 file changed

+24
-96
lines changed

1 file changed

+24
-96
lines changed
Lines changed: 24 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
21
importUserIconfrom"@mui/icons-material/PersonOutline";
32
importCheckboxfrom"@mui/material/Checkbox";
4-
importIconButtonfrom"@mui/material/IconButton";
53
importTooltipfrom"@mui/material/Tooltip";
64
importtype{SlimRole}from"api/typesGenerated";
5+
import{Button}from"components/Button/Button";
76
import{
87
HelpTooltip,
98
HelpTooltipContent,
@@ -12,13 +11,11 @@ import {
1211
HelpTooltipTrigger,
1312
}from"components/HelpTooltip/HelpTooltip";
1413
import{EditSquare}from"components/Icons/EditSquare";
15-
import{Stack}from"components/Stack/Stack";
1614
import{
1715
Popover,
1816
PopoverContent,
1917
PopoverTrigger,
2018
}from"components/deprecated/Popover/Popover";
21-
import{typeClassName,useClassName}from"hooks/useClassName";
2219
importtype{FC}from"react";
2320

2421
constroleDescriptions:Record<string,string>={
@@ -47,23 +44,23 @@ const Option: FC<OptionProps> = ({
4744
onChange,
4845
})=>{
4946
return(
50-
<labelhtmlFor={name}css={styles.option}>
51-
<Stackdirection="row"alignItems="flex-start">
47+
<labelhtmlFor={name}className="cursor-pointer">
48+
<divclassName="flex items-start gap-4">
5249
<Checkbox
5350
id={name}
5451
size="small"
55-
css={styles.checkbox}
52+
className="p-0 relative top-px"
5653
value={value}
5754
checked={isChecked}
5855
onChange={(e)=>{
5956
onChange(e.currentTarget.value);
6057
}}
6158
/>
62-
<Stackspacing={0}>
59+
<divclassName="flex flex-col">
6360
<strong>{name}</strong>
64-
<spancss={styles.optionDescription}>{description}</span>
65-
</Stack>
66-
</Stack>
61+
<spanclassName="text-xs text-content-secondary">{description}</span>
62+
</div>
63+
</div>
6764
</label>
6865
);
6966
};
@@ -85,8 +82,6 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
8582
userLoginType,
8683
oidcRoleSync,
8784
})=>{
88-
constpaper=useClassName(classNames.paper,[]);
89-
9085
consthandleChange=(roleName:string)=>{
9186
if(selectedRoleNames.has(roleName)){
9287
constserialized=[...selectedRoleNames];
@@ -118,23 +113,24 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
118113
<Popover>
119114
<PopoverTrigger>
120115
<Tooltiptitle="Edit user roles">
121-
<IconButton
116+
<Button
117+
variant="subtle"
122118
aria-label="Edit user roles"
123-
size="small"
124-
css={styles.editButton}
119+
size="icon"
120+
className="text-content-secondary hover:text-content-primary"
125121
>
126122
<EditSquare/>
127-
</IconButton>
123+
</Button>
128124
</Tooltip>
129125
</PopoverTrigger>
130126

131-
<PopoverContentclasses={{ paper}}disablePortal={false}>
127+
<PopoverContentclassName="w-80"disablePortal={false}>
132128
<fieldset
133-
css={styles.fieldset}
129+
className="border-0 m-0 p-0 disabled:opacity-50"
134130
disabled={isLoading}
135131
title="Available roles"
136132
>
137-
<Stackcss={styles.options}spacing={3}>
133+
<divclassName="flex flex-col gap-4 p-6">
138134
{roles.map((role)=>(
139135
<Option
140136
key={role.name}
@@ -145,88 +141,20 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
145141
description={roleDescriptions[role.name]??""}
146142
/>
147143
))}
148-
</Stack>
144+
</div>
149145
</fieldset>
150-
<divcss={styles.footer}>
151-
<Stackdirection="row"alignItems="flex-start">
152-
<UserIconcss={styles.userIcon}/>
153-
<Stackspacing={0}>
146+
<divclassName="p-6 border-t-1 border-solid border-border text-sm">
147+
<divclassName="flex gap-4">
148+
<UserIconclassName="size-icon-sm"/>
149+
<divclassName="flex flex-col">
154150
<strong>Member</strong>
155-
<spancss={styles.optionDescription}>
151+
<spanclassName="text-xs text-content-secondary">
156152
{roleDescriptions.member}
157153
</span>
158-
</Stack>
159-
</Stack>
154+
</div>
155+
</div>
160156
</div>
161157
</PopoverContent>
162158
</Popover>
163159
);
164160
};
165-
166-
constclassNames={
167-
paper:(css,theme)=>css`
168-
width:360px;
169-
margin-top:8px;
170-
background:${theme.palette.background.paper};
171-
`,
172-
}satisfiesRecord<string,ClassName>;
173-
174-
conststyles={
175-
editButton:(theme)=>({
176-
color:theme.palette.text.secondary,
177-
178-
"& .MuiSvgIcon-root":{
179-
width:16,
180-
height:16,
181-
position:"relative",
182-
top:-2,// Align the pencil square
183-
},
184-
185-
"&:hover":{
186-
color:theme.palette.text.primary,
187-
backgroundColor:"transparent",
188-
},
189-
}),
190-
fieldset:{
191-
border:0,
192-
margin:0,
193-
padding:0,
194-
195-
"&:disabled":{
196-
opacity:0.5,
197-
},
198-
},
199-
options:{
200-
padding:24,
201-
},
202-
option:{
203-
cursor:"pointer",
204-
fontSize:14,
205-
},
206-
checkbox:{
207-
padding:0,
208-
position:"relative",
209-
top:1,// Alignment
210-
211-
"& svg":{
212-
width:20,
213-
height:20,
214-
},
215-
},
216-
optionDescription:(theme)=>({
217-
fontSize:13,
218-
color:theme.palette.text.secondary,
219-
lineHeight:"160%",
220-
}),
221-
footer:(theme)=>({
222-
padding:24,
223-
backgroundColor:theme.palette.background.paper,
224-
borderTop:`1px solid${theme.palette.divider}`,
225-
fontSize:14,
226-
}),
227-
userIcon:(theme)=>({
228-
width:20,// Same as the checkbox
229-
height:20,
230-
color:theme.palette.primary.main,
231-
}),
232-
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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