Skip to content

Commit 00e76b8

Browse files
jaaydenhjaaydenh
authored
chore: migrate to tailwind (#16543)
Moving styles to Tailwind
1 parent e38bd27 commit 00e76b8

File tree

1 file changed

+24
-96
lines changed

1 file changed

+24
-96
lines changed

‎site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx

+24-96
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
21
import UserIcon from "@mui/icons-material/PersonOutline";
32
import Checkbox from "@mui/material/Checkbox";
4-
import IconButton from "@mui/material/IconButton";
53
import Tooltip from "@mui/material/Tooltip";
64
import type { 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 { type ClassName, useClassName } from "hooks/useClassName";
2219
import type { FC } from "react";
2320

2421
const roleDescriptions: Record<string, string> = {
@@ -47,23 +44,23 @@ const Option: FC<OptionProps> = ({
4744
onChange,
4845
}) => {
4946
return (
50-
<label htmlFor={name} css={styles.option}>
51-
<Stack direction="row" alignItems="flex-start">
47+
<label htmlFor={name} className="cursor-pointer">
48+
<div className="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-
<Stack spacing={0}>
59+
<div className="flex flex-col">
6360
<strong>{name}</strong>
64-
<span css={styles.optionDescription}>{description}</span>
65-
</Stack>
66-
</Stack>
61+
<span className="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-
const paper = useClassName(classNames.paper, []);
89-
9085
const handleChange = (roleName: string) => {
9186
if (selectedRoleNames.has(roleName)) {
9287
const serialized = [...selectedRoleNames];
@@ -118,23 +113,24 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
118113
<Popover>
119114
<PopoverTrigger>
120115
<Tooltip title="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-
<PopoverContent classes={{ paper }} disablePortal={false}>
127+
<PopoverContent className="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-
<Stack css={styles.options} spacing={3}>
133+
<div className="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-
<div css={styles.footer}>
151-
<Stack direction="row" alignItems="flex-start">
152-
<UserIcon css={styles.userIcon} />
153-
<Stack spacing={0}>
146+
<div className="p-6 border-t-1 border-solid border-border text-sm">
147+
<div className="flex gap-4">
148+
<UserIcon className="size-icon-sm" />
149+
<div className="flex flex-col">
154150
<strong>Member</strong>
155-
<span css={styles.optionDescription}>
151+
<span className="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-
const classNames = {
167-
paper: (css, theme) => css`
168-
width: 360px;
169-
margin-top: 8px;
170-
background: ${theme.palette.background.paper};
171-
`,
172-
} satisfies Record<string, ClassName>;
173-
174-
const styles = {
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-
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)