PLU-269: add general ui fixes (#591)

## Problem Inconsistencies in our Plumber UI TODO: - [x] Check that dropdown for set up trigger looks ok after adding the `SingleSelect` dropdown PRs ## Details - Standardise Test step + setup action button with ogp ds - Adjust context menus icons etc. - Standardise Alert Dialog texts - Delete button color schemes change to critical - Fix border radius for flow step - Standardise UI for tiles page ## Tests - [x] Still can delete and duplicate pipe - [x] Still can delete tile - [x] Still can delete column - [x] Still can test step with old and new pipes ## Screenshots Before https://github.com/opengovsg/plumber/assets/65110268/fc2a48b5-f051-440b-8e90-f6c18191e281 After https://github.com/opengovsg/plumber/assets/65110268/43ff982b-c3e8-4392-a9a5-cd4c0da2cee8
opengovsg · Jun 19, 2024 · 35e0ce3 · 35e0ce3
1 parent e5a8c6d
commit 35e0ce3
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 96 deletions.
diff --git a/packages/frontend/src/components/FlowRow/FlowContextMenu.tsx b/packages/frontend/src/components/FlowRow/FlowContextMenu.tsx
@@ -1,12 +1,16 @@
 import { IFlow } from '@plumber/types'
 
 import { MouseEvent, useCallback, useRef, useState } from 'react'
-import { BiCopy, BiDotsHorizontalRounded } from 'react-icons/bi'
-import { BsTrash } from 'react-icons/bs'
-import { MdOutlineRemoveRedEye } from 'react-icons/md'
+import {
+  BiDotsHorizontalRounded,
+  BiDuplicate,
+  BiShow,
+  BiTrash,
+} from 'react-icons/bi'
 import { Link } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import {
+  Icon,
   Menu,
   MenuButton,
   MenuItem,
@@ -121,26 +125,35 @@ export default function FlowContextMenu(props: FlowContextMenuProps) {
 
   return (
     <>
-      <Menu onClose={onMenuClose} isOpen={isMenuOpen} placement="bottom-end">
+      <Menu
+        onClose={onMenuClose}
+        isOpen={isMenuOpen}
+        placement="bottom-end"
+        gutter={0}
+      >
         <MenuButton
           as={IconButton}
           aria-label="Flow Row Menu Options"
+          colorScheme="secondary"
           icon={<BiDotsHorizontalRounded />}
           variant="clear"
           onClick={(event) => {
             event.preventDefault()
             onMenuToggle()
           }}
         />
-        <MenuList>
+        <MenuList w="12.5rem">
           <MenuItem
             as={Link}
             to={URLS.FLOW(flow.id)}
-            icon={<MdOutlineRemoveRedEye />}
+            icon={<Icon as={BiShow} boxSize={5} />}
           >
             View
           </MenuItem>
-          <MenuItem onClick={onDuplicateButtonClick} icon={<BiCopy />}>
+          <MenuItem
+            onClick={onDuplicateButtonClick}
+            icon={<Icon as={BiDuplicate} boxSize={5} />}
+          >
             Duplicate
           </MenuItem>
           <TouchableTooltip
@@ -154,8 +167,8 @@ export default function FlowContextMenu(props: FlowContextMenuProps) {
             <MenuItem
               isDisabled={!!flowTransfer}
               onClick={onDeleteButtonClick}
-              icon={<BsTrash />}
-              color="red.500"
+              icon={<Icon as={BiTrash} boxSize={5} />}
+              color="interaction.critical.default"
             >
               Delete
             </MenuItem>

diff --git a/packages/frontend/src/components/FlowRow/MenuAlertDialog.tsx b/packages/frontend/src/components/FlowRow/MenuAlertDialog.tsx
@@ -55,9 +55,7 @@ export default function MenuAlertDialog(props: MenuAlertDialogProps) {
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            {header}
-          </AlertDialogHeader>
+          <AlertDialogHeader>{header}</AlertDialogHeader>
 
           <AlertDialogBody>{body}</AlertDialogBody>
 
@@ -70,7 +68,12 @@ export default function MenuAlertDialog(props: MenuAlertDialogProps) {
             >
               Cancel
             </Button>
-            <Button onClick={onClick} ml={3} isLoading={isLoading}>
+            <Button
+              colorScheme="critical"
+              onClick={onClick}
+              ml={3}
+              isLoading={isLoading}
+            >
               {buttonText}
             </Button>
           </AlertDialogFooter>

diff --git a/packages/frontend/src/components/FlowStepGroup/Content/IfThen/Branch.tsx b/packages/frontend/src/components/FlowStepGroup/Content/IfThen/Branch.tsx
@@ -148,7 +148,7 @@ export default function Branch(props: BranchProps): JSX.Element {
               >
                 Cancel
               </Button>
-              <Button colorScheme="red" onClick={deleteBranch} ml={3}>
+              <Button colorScheme="critical" onClick={deleteBranch} ml={3}>
                 Yes, delete branch
               </Button>
             </AlertDialogFooter>

diff --git a/packages/frontend/src/components/FlowStepHeader/index.tsx b/packages/frontend/src/components/FlowStepHeader/index.tsx
@@ -65,7 +65,7 @@ export default function FlowStepHeader(
       borderRadius="lg"
       p={0}
       bg="white"
-      boxShadow={collapsed ? undefined : 'base'}
+      boxShadow={collapsed ? undefined : 'sm'}
       data-test="flow-step" // adding to identify element for e2e testing
     >
       {/*
@@ -74,8 +74,16 @@ export default function FlowStepHeader(
       <Flex
         p={4}
         alignItems="center"
-        _hover={{ bg: 'interaction.muted.neutral.hover', cursor: 'pointer' }}
-        _active={{ bg: 'interaction.muted.neutral.active' }}
+        borderRadius="inherit"
+        _hover={{
+          bg: 'interaction.muted.neutral.hover',
+          cursor: 'pointer',
+          borderBottomRadius: collapsed ? 'inherit' : 'none',
+        }}
+        _active={{
+          bg: 'interaction.muted.neutral.active',
+          borderBottomRadius: collapsed ? 'inherit' : 'none',
+        }}
         w="full"
         onClick={handleClick}
       >
@@ -85,7 +93,6 @@ export default function FlowStepHeader(
           mr={4}
           borderWidth={1}
           borderColor="base.divider.strong"
-          borderRadius="base"
           justifyContent="center"
           alignItems="center"
         >

diff --git a/packages/frontend/src/components/FlowSubstep/index.tsx b/packages/frontend/src/components/FlowSubstep/index.tsx
@@ -8,10 +8,8 @@ import type {
 
 import { useContext, useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import Button from '@mui/material/Button'
-import Collapse from '@mui/material/Collapse'
-import ListItem from '@mui/material/ListItem'
-import Stack from '@mui/material/Stack'
+import { Box, Collapse, Stack } from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
 import FlowSubstepTitle from 'components/FlowSubstepTitle'
 import InputCreator from 'components/InputCreator'
 import { EditorContext } from 'contexts/Editor'
@@ -124,16 +122,9 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
         title={settingsLabel ?? name}
         valid={validationStatus}
       />
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <ListItem
-          sx={{
-            pt: 2,
-            pb: 3,
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-          }}
-        >
-          <Stack width="100%" spacing={3}>
+      <Collapse in={expanded} unmountOnExit>
+        <Box p="1rem 1rem 1.5rem">
+          <Stack w="100%" spacing={2}>
             {args?.map((argument) => (
               <InputCreator
                 key={argument.key}
@@ -146,17 +137,16 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
           </Stack>
 
           <Button
-            fullWidth
-            variant="contained"
+            isFullWidth
             onClick={onSubmit}
-            sx={{ mt: 2 }}
+            mt={4}
             disabled={!validationStatus || editorContext.readOnly}
             type="submit"
             data-test="flow-substep-continue-button"
           >
             Continue
           </Button>
-        </ListItem>
+        </Box>
       </Collapse>
     </>
   )

diff --git a/packages/frontend/src/components/TestSubstep/index.tsx b/packages/frontend/src/components/TestSubstep/index.tsx
@@ -9,10 +9,8 @@ import type {
 
 import { useCallback, useContext, useMemo } from 'react'
 import { useMutation } from '@apollo/client'
-import { Box } from '@chakra-ui/react'
-import LoadingButton from '@mui/lab/LoadingButton'
-import Collapse from '@mui/material/Collapse'
-import ListItem from '@mui/material/ListItem'
+import { Box, Collapse } from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
 import ErrorResult from 'components/ErrorResult'
 import FlowSubstepTitle from 'components/FlowSubstepTitle'
 import WebhookUrlInfo from 'components/WebhookUrlInfo'
@@ -110,15 +108,8 @@ function TestSubstep(props: TestSubstepProps): JSX.Element {
   return (
     <>
       <FlowSubstepTitle expanded={expanded} onClick={onToggle} title={name} />
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <ListItem
-          sx={{
-            pt: 2,
-            pb: 3,
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-          }}
-        >
+      <Collapse in={expanded} unmountOnExit>
+        <Box p="1rem 1rem 1.5rem">
           {step.webhookUrl && (
             <WebhookUrlInfo
               webhookUrl={step.webhookUrl}
@@ -152,33 +143,31 @@ function TestSubstep(props: TestSubstepProps): JSX.Element {
             isMock={executionStep?.executionSteps[0].metadata?.isMock}
           />
 
-          <LoadingButton
-            fullWidth
-            variant={isCompleted ? 'text' : 'contained'}
+          <Button
+            isFullWidth
+            variant={isCompleted ? 'clear' : 'solid'}
             onClick={executeTestFlow}
-            sx={{ mt: 2 }}
-            loading={loading}
-            disabled={editorContext.readOnly}
-            color="primary"
+            mt={2}
+            isLoading={loading}
+            isDisabled={editorContext.readOnly}
             data-test="flow-substep-continue-button"
           >
             {isCompleted ? 'Test again' : 'Test Step'}
-          </LoadingButton>
+          </Button>
+
           {isCompleted && (
-            <LoadingButton
-              fullWidth
-              variant={'contained'}
+            <Button
+              isFullWidth
               onClick={onContinueClick}
-              sx={{ mt: 2 }}
-              loading={loading}
-              disabled={editorContext.readOnly}
-              color="primary"
+              mt={2}
+              isLoading={loading}
+              isDisabled={editorContext.readOnly}
               data-test="flow-substep-continue-button"
             >
               Continue
-            </LoadingButton>
+            </Button>
           )}
-        </ListItem>
+        </Box>
       </Collapse>
     </>
   )

diff --git a/packages/frontend/src/pages/Tile/components/TableFooter/DeleteRowsButton.tsx b/packages/frontend/src/pages/Tile/components/TableFooter/DeleteRowsButton.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { BsTrash } from 'react-icons/bs'
+import { BiTrash } from 'react-icons/bi'
 import { Button } from '@chakra-ui/react'
 import { ROW_HEIGHT } from 'pages/Tile/constants'
 
@@ -40,8 +40,8 @@ export default function DeleteRowsButton({
         variant="clear"
         size="xs"
         h="100%"
-        color="red.500"
-        leftIcon={<BsTrash />}
+        colorScheme="critical"
+        leftIcon={<BiTrash />}
         onClick={() => setIsDialogOpen(true)}
       >
         Delete

diff --git a/packages/frontend/src/pages/Tile/components/TableFooter/DeleteRowsModal.tsx b/packages/frontend/src/pages/Tile/components/TableFooter/DeleteRowsModal.tsx
@@ -72,9 +72,7 @@ export default function DeleteRowsModal({
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            Delete rows
-          </AlertDialogHeader>
+          <AlertDialogHeader>Delete rows</AlertDialogHeader>
 
           <AlertDialogBody>
             {isDeletingRows ? (
@@ -104,7 +102,7 @@ export default function DeleteRowsModal({
               </Button>
             )}
             <Button
-              colorScheme="red"
+              colorScheme="critical"
               onClick={onDelete}
               ml={3}
               isDisabled={isDeletingRows}

diff --git a/packages/frontend/src/pages/Tile/components/TableHeader/ColumnHeaderCell.tsx b/packages/frontend/src/pages/Tile/components/TableHeader/ColumnHeaderCell.tsx
@@ -1,5 +1,5 @@
 import { memo, useState } from 'react'
-import { BsTrash } from 'react-icons/bs'
+import { BiTrash } from 'react-icons/bi'
 import { GoChevronDown, GoFilter } from 'react-icons/go'
 import { ImSortAlphaAsc, ImSortAlphaDesc } from 'react-icons/im'
 import {
@@ -176,7 +176,7 @@ function ColumnHeaderCell({
           {isEditMode && tableColumns.length > 1 && (
             <PopoverFooter justifyContent="flex-start" display={'flex'} px={4}>
               <Button
-                leftIcon={<BsTrash />}
+                leftIcon={<Icon as={BiTrash} boxSize={4} />}
                 variant="link"
                 py={2}
                 color="interaction.critical.default"

diff --git a/packages/frontend/src/pages/Tile/components/TableHeader/DeleteColumnModal.tsx b/packages/frontend/src/pages/Tile/components/TableHeader/DeleteColumnModal.tsx
@@ -39,9 +39,7 @@ export default function DeleteColumnModal({
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            Delete Column
-          </AlertDialogHeader>
+          <AlertDialogHeader>Delete Column</AlertDialogHeader>
 
           <AlertDialogBody>
             Are you sure you want to delete column: <b>{columnName}</b>?
@@ -57,7 +55,7 @@ export default function DeleteColumnModal({
               Cancel
             </Button>
             <Button
-              colorScheme="red"
+              colorScheme="critical"
               onClick={onDelete}
               ml={3}
               isLoading={isDeletingColumns}

diff --git a/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx b/packages/frontend/src/pages/Tile/contexts/ContextMenuContext.tsx
@@ -5,8 +5,15 @@ import {
   useContext,
   useState,
 } from 'react'
-import { BsTrash } from 'react-icons/bs'
-import { Menu, MenuButton, MenuItem, MenuList, Portal } from '@chakra-ui/react'
+import { BiTrash } from 'react-icons/bi'
+import {
+  Icon,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+} from '@chakra-ui/react'
 
 import DeleteRowsModal from '../components/TableFooter/DeleteRowsModal'
 
@@ -85,8 +92,8 @@ export const ContextMenuContextProvider = ({
             />
             <MenuList m={0}>
               <MenuItem
-                icon={<BsTrash size={16} />}
-                color="red.500"
+                icon={<Icon as={BiTrash} boxSize={5} />}
+                color="interaction.critical.default"
                 onClick={() => setIsDeleteModalOpen(true)}
               >
                 {rowsSelected.length ? 'Delete selected rows' : 'Delete row'}