From 10d4302b5f9d507c389b47eefa6e70ff41e119ef Mon Sep 17 00:00:00 2001
From: nl_0 <nl.imbecile@gmail.com>
Date: Tue, 18 Jun 2024 15:25:03 +0200
Subject: [PATCH] address some feedback

---
 .../Admin/UsersAndRoles/RoleSelect.tsx           |  5 ++++-
 .../app/containers/Admin/UsersAndRoles/Users.tsx |  2 +-
 catalog/app/containers/NavBar/RoleSwitcher.tsx   | 16 +++++++---------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx b/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx
index 50a1bdd8278..49ced465f89 100644
--- a/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx
+++ b/catalog/app/containers/Admin/UsersAndRoles/RoleSelect.tsx
@@ -24,6 +24,8 @@ export const validate: FF.FieldValidator<Value> = (v) => {
 
 export const ROLE_NAME_ASC = R.ascend((r: Role) => r.name)
 
+const ITEM_HEIGHT = 46
+
 const useRoleSelectStyles = M.makeStyles((t) => ({
   grid: {
     alignItems: 'center',
@@ -33,7 +35,8 @@ const useRoleSelectStyles = M.makeStyles((t) => ({
     marginTop: t.spacing(2),
   },
   list: ({ roles }: { roles: number }) => ({
-    height: `${46 * R.clamp(3, 4.5, roles)}px`,
+    // show no less than 3 and no more than 4 and a half items
+    height: `${ITEM_HEIGHT * R.clamp(3, 4.5, roles)}px`,
     overflowY: 'auto',
   }),
   listEmpty: {
diff --git a/catalog/app/containers/Admin/UsersAndRoles/Users.tsx b/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
index 292f06e846b..4b884cc79f2 100644
--- a/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
+++ b/catalog/app/containers/Admin/UsersAndRoles/Users.tsx
@@ -37,7 +37,7 @@ const DIALOG_PROPS: Dialogs.ExtraDialogProps = { maxWidth: 'xs', fullWidth: true
 
 const useDialogFormStyles = M.makeStyles((t) => ({
   root: {
-    marginTop: t.spacing(-3),
+    marginTop: t.spacing(-2),
   },
 }))
 
diff --git a/catalog/app/containers/NavBar/RoleSwitcher.tsx b/catalog/app/containers/NavBar/RoleSwitcher.tsx
index 22e27a4ac08..0689fd340f4 100644
--- a/catalog/app/containers/NavBar/RoleSwitcher.tsx
+++ b/catalog/app/containers/NavBar/RoleSwitcher.tsx
@@ -14,7 +14,7 @@ import SWITCH_ROLE_MUTATION from './gql/SwitchRole.generated'
 
 type Me = NonNullable<GQL.DataForDoc<typeof ME_QUERY>['me']>
 
-const useRoleSwitcherStyles = M.makeStyles({
+const useRoleSwitcherStyles = M.makeStyles((t) => ({
   content: {
     position: 'relative',
   },
@@ -41,7 +41,11 @@ const useRoleSwitcherStyles = M.makeStyles({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
-})
+  hint: {
+    color: t.palette.text.hint,
+    fontWeight: t.typography.fontWeightLight,
+  },
+}))
 
 interface RoleSwitcherProps {
   user: Me
@@ -130,13 +134,7 @@ function RoleSwitcher({ user, close }: RoleSwitcherProps) {
                       <M.ListItemText classes={{ primary: classes.name }}>
                         {role.name}
                         {role.name === user.role.name && (
-                          <M.Box
-                            component="span"
-                            color="text.hint"
-                            fontWeight="fontWeightLight"
-                          >
-                            &nbsp;(current)
-                          </M.Box>
+                          <span className={classes.hint}>&nbsp;(current)</span>
                         )}
                       </M.ListItemText>
                     </M.ListItem>