Update users page colors

ethyca · Jan 17, 2025 · fe2e0b4 · fe2e0b4
1 parent de7a6c2
commit fe2e0b4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 44 deletions.
diff --git a/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx b/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx
@@ -94,7 +94,12 @@ const DeleteUserModal = ({
               <ModalHeader>Delete User</ModalHeader>
               <ModalCloseButton />
               <ModalBody>
-                <Alert status="warning" overflow="visible">
+                <Alert
+                  status="warning"
+                  overflow="visible"
+                  colorScheme="warn"
+                  marginBottom={4}
+                >
                   <AlertIcon />
                   <AlertDescription>
                     <Text as="span" mb={2}>
@@ -125,7 +130,7 @@ const DeleteUserModal = ({
               </ModalBody>
 
               <ModalFooter>
-                <div className="w-full gap-2">
+                <div className="flex w-full gap-2">
                   <Button onClick={onClose} className="w-1/2">
                     Cancel
                   </Button>

diff --git a/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx b/clients/admin-ui/src/features/user-management/RoleDescriptionDrawer.tsx
@@ -14,11 +14,11 @@ const RoleDescriptionDrawer = () => (
           key={role.roleKey}
           padding={4}
           borderRadius="md"
-          backgroundColor="blue.50"
+          backgroundColor="gray.75"
           fontSize="14px"
         >
           <Box fontWeight="semibold">{role.label}</Box>
-          <Box color="gray.500">{role.description}</Box>
+          <Box color="gray.700">{role.description}</Box>
         </Box>
       ))}
     </VStack>

diff --git a/clients/admin-ui/src/features/user-management/UserManagementRow.tsx b/clients/admin-ui/src/features/user-management/UserManagementRow.tsx
@@ -64,19 +64,7 @@ const UserManagementRow = ({ user }: UserManagementRowProps) => {
         <Td pl={0} py={1} onClick={handleEditUser}>
           {user.username}{" "}
           {user.disabled && (
-            <Badge
-              bg="green.500"
-              color="white"
-              paddingLeft="2"
-              textTransform="none"
-              paddingRight="8px"
-              height="18px"
-              lineHeight="18px"
-              borderRadius="6px"
-              fontWeight="500"
-              textAlign="center"
-              data-testid="invite-sent-badge"
-            >
+            <Badge colorScheme="success" data-testid="invite-sent-badge">
               Invite sent
             </Badge>
           )}
@@ -92,38 +80,13 @@ const UserManagementRow = ({ user }: UserManagementRowProps) => {
         </Td>
         <Td pl={0} py={1} onClick={handleEditUser}>
           {permissionsLabels.map((permission) => (
-            <Badge
-              bg="gray.500"
-              color="white"
-              paddingLeft="2"
-              textTransform="none"
-              paddingRight="8px"
-              height="18px"
-              lineHeight="18px"
-              borderRadius="6px"
-              fontWeight="500"
-              textAlign="center"
-              data-testid="user-permissions-badge"
-              key={permission}
-            >
+            <Badge data-testid="user-permissions-badge" key={permission}>
               {permission}
             </Badge>
           ))}
         </Td>
         <Td pl={0} py={1} onClick={handleEditUser}>
-          <Badge
-            bg="gray.500"
-            color="white"
-            paddingLeft="2"
-            textTransform="none"
-            paddingRight="8px"
-            height="18px"
-            lineHeight="18px"
-            borderRadius="6px"
-            fontWeight="500"
-            textAlign="center"
-            data-testid="user-systems-badge"
-          >
+          <Badge textAlign="center" data-testid="user-systems-badge">
             {userSystems ? userSystems.length : 0}
           </Badge>
         </Td>