Skip to content

Commit ab7e676

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Refactor user menu (#5591)
1 parent dcf6c20 commit ab7e676

File tree

4 files changed

+65
-107
lines changed

4 files changed

+65
-107
lines changed

‎site/src/components/BorderedMenu/BorderedMenu.stories.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,6 @@ const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
2727
</BorderedMenu>
2828
)
2929

30-
export const AdminVariant = Template.bind({})
31-
AdminVariant.args = {
32-
variant: "admin-dropdown",
33-
open: true,
34-
}
35-
3630
export const UserVariant = Template.bind({})
3731
UserVariant.args = {
3832
variant: "user-dropdown",

‎site/src/components/BorderedMenu/BorderedMenu.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Popover, { PopoverProps } from "@material-ui/core/Popover"
22
import { makeStyles } from "@material-ui/core/styles"
33
import { FC, PropsWithChildren } from "react"
44

5-
type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
5+
type BorderedMenuVariant = "user-dropdown"
66

77
export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
88
variant?: BorderedMenuVariant
@@ -17,7 +17,7 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
1717

1818
return (
1919
<Popover
20-
classes={{ root: styles.root, paper: styles.paperRoot }}
20+
classes={{ paper: styles.paperRoot }}
2121
data-variant={variant}
2222
{...rest}
2323
>
@@ -27,19 +27,8 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
2727
}
2828

2929
const useStyles = makeStyles((theme) => ({
30-
root: {
31-
"&[data-variant='admin-dropdown'] $paperRoot": {
32-
padding: `${theme.spacing(3)}px 0`,
33-
},
34-
35-
"&[data-variant='user-dropdown'] $paperRoot": {
36-
paddingBottom: theme.spacing(1),
37-
minWidth: 292,
38-
},
39-
},
4030
paperRoot: {
41-
minWidth: 292,
42-
border: `2px solid ${theme.palette.secondary.dark}`,
31+
width: 260,
4332
borderRadius: theme.shape.borderRadius,
4433
boxShadow: theme.shadows[6],
4534
},

‎site/src/components/UserDropdown/UsersDropdown.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,12 @@ export const useStyles = makeStyles((theme) => ({
8080
marginTop: theme.spacing(1),
8181
marginBottom: theme.spacing(1),
8282
},
83-
8483
inner: {
8584
display: "flex",
8685
alignItems: "center",
8786
minWidth: 0,
8887
maxWidth: 300,
8988
},
90-
9189
menuItem: {
9290
height: navHeight,
9391
padding: theme.spacing(1.5, 0),

‎site/src/components/UserDropdownContent/UserDropdownContent.tsx

Lines changed: 62 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Divider from "@material-ui/core/Divider"
2-
import ListItemIcon from "@material-ui/core/ListItemIcon"
3-
import ListItemText from "@material-ui/core/ListItemText"
42
import MenuItem from "@material-ui/core/MenuItem"
53
import { makeStyles } from "@material-ui/core/styles"
6-
import Tooltip from "@material-ui/core/Tooltip"
7-
import Typography from "@material-ui/core/Typography"
84
import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
95
import BugIcon from "@material-ui/icons/BugReportOutlined"
10-
import ChatIcon from "@material-ui/icons/Chat"
11-
import LaunchIcon from "@material-ui/icons/Launch"
6+
import ChatIcon from "@material-ui/icons/ChatOutlined"
7+
import LaunchIcon from "@material-ui/icons/LaunchOutlined"
8+
import { Stack } from "components/Stack/Stack"
129
import { FC } from "react"
1310
import { Link } from "react-router-dom"
1411
import * as TypesGen from "../../api/typesGenerated"
15-
import { navHeight } from "../../theme/constants"
16-
import { DocsIcon } from "../Icons/DocsIcon"
17-
import { LogoutIcon } from "../Icons/LogoutIcon"
18-
import { UserAvatar } from "../UserAvatar/UserAvatar"
12+
import DocsIcon from "@material-ui/icons/MenuBook"
13+
import LogoutIcon from "@material-ui/icons/ExitToAppOutlined"
14+
import { combineClasses } from "util/combineClasses"
1915

2016
export const Language = {
2117
accountLabel: "Account",
@@ -46,38 +42,27 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
4642
const discordUrl = `https://coder.com/chat?utm_source=coder&utm_medium=coder&utm_campaign=server-footer`
4743

4844
return (
49-
<div className={styles.userInfo}>
50-
<div className={styles.root}>
51-
<div className={styles.avatarContainer}>
52-
<UserAvatar
53-
className={styles.avatar}
54-
username={user.username}
55-
avatarURL={user.avatar_url}
56-
/>
57-
</div>
58-
<Typography className={styles.userName}>{user.username}</Typography>
59-
<Typography className={styles.userEmail}>{user.email}</Typography>
60-
</div>
61-
62-
<Divider />
45+
<div>
46+
<Stack className={styles.info} spacing={0}>
47+
<span className={styles.userName}>{user.username}</span>
48+
<span className={styles.userEmail}>{user.email}</span>
49+
</Stack>
50+
51+
<Divider className={styles.divider} />
6352

6453
<Link to="/settings/account" className={styles.link}>
6554
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
66-
<ListItemIcon className={styles.icon}>
67-
<AccountIcon />
68-
</ListItemIcon>
69-
<ListItemText primary={Language.accountLabel} />
55+
<AccountIcon className={styles.menuItemIcon} />
56+
<span className={styles.menuItemText}>{Language.accountLabel}</span>
7057
</MenuItem>
7158
</Link>
7259

7360
<MenuItem className={styles.menuItem} onClick={onSignOut}>
74-
<ListItemIcon className={styles.icon}>
75-
<LogoutIcon />
76-
</ListItemIcon>
77-
<ListItemText primary={Language.signOutLabel} />
61+
<LogoutIcon className={styles.menuItemIcon} />
62+
<span className={styles.menuItemText}>{Language.signOutLabel}</span>
7863
</MenuItem>
7964

80-
<Divider />
65+
<Divider className={styles.divider} />
8166

8267
<a
8368
href="https://coder.com/docs/coder-oss"
@@ -86,10 +71,8 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
8671
className={styles.link}
8772
>
8873
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
89-
<ListItemIcon className={styles.icon}>
90-
<DocsIcon />
91-
</ListItemIcon>
92-
<ListItemText primary={Language.docsLabel} />
74+
<DocsIcon className={styles.menuItemIcon} />
75+
<span className={styles.menuItemText}>{Language.docsLabel}</span>
9376
</MenuItem>
9477
</a>
9578

@@ -100,10 +83,8 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
10083
className={styles.link}
10184
>
10285
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
103-
<ListItemIcon className={styles.icon}>
104-
<BugIcon />
105-
</ListItemIcon>
106-
<ListItemText primary={Language.bugLabel} />
86+
<BugIcon className={styles.menuItemIcon} />
87+
<span className={styles.menuItemText}>{Language.bugLabel}</span>
10788
</MenuItem>
10889
</a>
10990

@@ -114,93 +95,89 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
11495
className={styles.link}
11596
>
11697
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
117-
<ListItemIcon className={styles.icon}>
118-
<ChatIcon />
119-
</ListItemIcon>
120-
<ListItemText primary={Language.discordLabel} />
98+
<ChatIcon className={styles.menuItemIcon} />
99+
<span className={styles.menuItemText}>{Language.discordLabel}</span>
121100
</MenuItem>
122101
</a>
123102

124-
<Divider />
103+
<Divider className={styles.divider} />
125104

126-
<Tooltip title="Browse Source Code">
105+
<Stack className={styles.info} spacing={0}>
127106
<a
128-
className={styles.footerText}
107+
title="Browse Source Code"
108+
className={combineClasses([styles.footerText, styles.buildInfo])}
129109
href={buildInfo?.external_url}
130110
target="_blank"
131111
rel="noreferrer"
132112
>
133113
{buildInfo?.version} <LaunchIcon />
134114
</a>
135-
</Tooltip>
136115

137-
<div className={styles.footerText}>{Language.copyrightText}</div>
116+
<div className={styles.footerText}>{Language.copyrightText}</div>
117+
</Stack>
138118
</div>
139119
)
140120
}
141121

142122
const useStyles = makeStyles((theme) => ({
143-
root: {
144-
padding: theme.spacing(3, 2),
145-
textAlign: "center",
146-
},
147-
avatarContainer: {
148-
width: "100%",
149-
display: "flex",
150-
alignItems: "center",
151-
justifyContent: "center",
152-
},
153-
avatar: {
154-
width: 48,
155-
height: 48,
156-
borderRadius: "50%",
157-
marginBottom: theme.spacing(1),
158-
transition: `transform .2s`,
159-
160-
"&:hover": {
161-
transform: `scale(1.1)`,
162-
},
123+
info: {
124+
padding: theme.spacing(2.5),
163125
},
164126
userName: {
165-
fontSize: 16,
166-
marginTop: theme.spacing(1),
127+
fontWeight: 600,
167128
},
168129
userEmail: {
169-
fontSize: 14,
170-
letterSpacing: 0.2,
171130
color: theme.palette.text.secondary,
131+
width: "100%",
132+
textOverflow: "ellipsis",
133+
overflow: "hidden",
172134
},
173135
link: {
174136
textDecoration: "none",
175137
color: "inherit",
176138
},
177139
menuItem: {
178-
height: navHeight,
179-
padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
140+
gap: theme.spacing(2.5),
141+
padding: theme.spacing(1, 2.5),
180142

181143
"&:hover": {
182144
backgroundColor: theme.palette.action.hover,
183145
transition: "background-color 0.3s ease",
184146
},
185147
},
186-
userInfo: {
187-
marginBottom: theme.spacing(1),
188-
},
189-
icon: {
148+
menuItemIcon: {
190149
color: theme.palette.text.secondary,
150+
width: theme.spacing(2.5),
151+
height: theme.spacing(2.5),
152+
},
153+
menuItemText: {
154+
fontSize: 14,
155+
},
156+
divider: {
157+
margin: theme.spacing(1, 0),
158+
159+
"&:first-of-type": {
160+
marginTop: 0,
161+
},
162+
163+
"&:last-of-type": {
164+
marginBottom: 0,
165+
},
191166
},
192167
footerText: {
168+
fontSize: 12,
193169
textDecoration: "none",
194170
color: theme.palette.text.secondary,
195-
marginTop: theme.spacing(1.5),
196171
display: "flex",
197172
alignItems: "center",
198-
justifyContent: "center",
173+
gap: 4,
199174

200175
"& svg": {
201-
width: 14,
202-
height: 14,
203-
marginLeft: theme.spacing(0.5),
176+
width: 12,
177+
height: 12,
204178
},
205179
},
180+
buildInfo: {
181+
color: theme.palette.text.primary,
182+
},
206183
}))

0 commit comments

Comments
 (0)