address some feedback

quiltdata · Jun 18, 2024 · 10d4302 · 10d4302
1 parent 46d982f
commit 10d4302
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up @@
     const useDialogFormStyles = M.makeStyles((t) => ({
       root: {
-        marginTop: t.spacing(-3),
+        marginTop: t.spacing(-2),
       },
     }))
@@ Expand Down @@