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

This reverts commit 35e0ce3.
opengovsg · Jun 19, 2024 · 5e5d60e · 5e5d60e
1 parent 290f5a5
commit 5e5d60e
Show file tree

Hide file tree

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

diff --git a/packages/frontend/src/components/FlowRow/MenuAlertDialog.tsx b/packages/frontend/src/components/FlowRow/MenuAlertDialog.tsx
@@ -55,7 +55,9 @@ export default function MenuAlertDialog(props: MenuAlertDialogProps) {
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader>{header}</AlertDialogHeader>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {header}
+          </AlertDialogHeader>
 
           <AlertDialogBody>{body}</AlertDialogBody>
 
@@ -68,12 +70,7 @@ export default function MenuAlertDialog(props: MenuAlertDialogProps) {
             >
               Cancel
             </Button>
-            <Button
-              colorScheme="critical"
-              onClick={onClick}
-              ml={3}
-              isLoading={isLoading}
-            >
+            <Button 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="critical" onClick={deleteBranch} ml={3}>
+              <Button colorScheme="red" 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 : 'sm'}
+      boxShadow={collapsed ? undefined : 'base'}
       data-test="flow-step" // adding to identify element for e2e testing
     >
       {/*
@@ -74,16 +74,8 @@ export default function FlowStepHeader(
       <Flex
         p={4}
         alignItems="center"
-        borderRadius="inherit"
-        _hover={{
-          bg: 'interaction.muted.neutral.hover',
-          cursor: 'pointer',
-          borderBottomRadius: collapsed ? 'inherit' : 'none',
-        }}
-        _active={{
-          bg: 'interaction.muted.neutral.active',
-          borderBottomRadius: collapsed ? 'inherit' : 'none',
-        }}
+        _hover={{ bg: 'interaction.muted.neutral.hover', cursor: 'pointer' }}
+        _active={{ bg: 'interaction.muted.neutral.active' }}
         w="full"
         onClick={handleClick}
       >
@@ -93,6 +85,7 @@ 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,8 +8,10 @@ import type {
 
 import { useContext, useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Box, Collapse, Stack } from '@chakra-ui/react'
-import { Button } from '@opengovsg/design-system-react'
+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 FlowSubstepTitle from 'components/FlowSubstepTitle'
 import InputCreator from 'components/InputCreator'
 import { EditorContext } from 'contexts/Editor'
@@ -122,9 +124,16 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
         title={settingsLabel ?? name}
         valid={validationStatus}
       />
-      <Collapse in={expanded} unmountOnExit>
-        <Box p="1rem 1rem 1.5rem">
-          <Stack w="100%" spacing={2}>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem
+          sx={{
+            pt: 2,
+            pb: 3,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          }}
+        >
+          <Stack width="100%" spacing={3}>
             {args?.map((argument) => (
               <InputCreator
                 key={argument.key}
@@ -137,16 +146,17 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
           </Stack>
 
           <Button
-            isFullWidth
+            fullWidth
+            variant="contained"
             onClick={onSubmit}
-            mt={4}
+            sx={{ mt: 2 }}
             disabled={!validationStatus || editorContext.readOnly}
             type="submit"
             data-test="flow-substep-continue-button"
           >
             Continue
           </Button>
-        </Box>
+        </ListItem>
       </Collapse>
     </>
   )

diff --git a/packages/frontend/src/components/TestSubstep/index.tsx b/packages/frontend/src/components/TestSubstep/index.tsx
@@ -9,8 +9,10 @@ import type {
 
 import { useCallback, useContext, useMemo } from 'react'
 import { useMutation } from '@apollo/client'
-import { Box, Collapse } from '@chakra-ui/react'
-import { Button } from '@opengovsg/design-system-react'
+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 ErrorResult from 'components/ErrorResult'
 import FlowSubstepTitle from 'components/FlowSubstepTitle'
 import WebhookUrlInfo from 'components/WebhookUrlInfo'
@@ -108,8 +110,15 @@ function TestSubstep(props: TestSubstepProps): JSX.Element {
   return (
     <>
       <FlowSubstepTitle expanded={expanded} onClick={onToggle} title={name} />
-      <Collapse in={expanded} unmountOnExit>
-        <Box p="1rem 1rem 1.5rem">
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem
+          sx={{
+            pt: 2,
+            pb: 3,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          }}
+        >
           {step.webhookUrl && (
             <WebhookUrlInfo
               webhookUrl={step.webhookUrl}
@@ -143,31 +152,33 @@ function TestSubstep(props: TestSubstepProps): JSX.Element {
             isMock={executionStep?.executionSteps[0].metadata?.isMock}
           />
 
-          <Button
-            isFullWidth
-            variant={isCompleted ? 'clear' : 'solid'}
+          <LoadingButton
+            fullWidth
+            variant={isCompleted ? 'text' : 'contained'}
             onClick={executeTestFlow}
-            mt={2}
-            isLoading={loading}
-            isDisabled={editorContext.readOnly}
+            sx={{ mt: 2 }}
+            loading={loading}
+            disabled={editorContext.readOnly}
+            color="primary"
             data-test="flow-substep-continue-button"
           >
             {isCompleted ? 'Test again' : 'Test Step'}
-          </Button>
-
+          </LoadingButton>
           {isCompleted && (
-            <Button
-              isFullWidth
+            <LoadingButton
+              fullWidth
+              variant={'contained'}
               onClick={onContinueClick}
-              mt={2}
-              isLoading={loading}
-              isDisabled={editorContext.readOnly}
+              sx={{ mt: 2 }}
+              loading={loading}
+              disabled={editorContext.readOnly}
+              color="primary"
               data-test="flow-substep-continue-button"
             >
               Continue
-            </Button>
+            </LoadingButton>
           )}
-        </Box>
+        </ListItem>
       </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 { BiTrash } from 'react-icons/bi'
+import { BsTrash } from 'react-icons/bs'
 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%"
-        colorScheme="critical"
-        leftIcon={<BiTrash />}
+        color="red.500"
+        leftIcon={<BsTrash />}
         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,7 +72,9 @@ export default function DeleteRowsModal({
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader>Delete rows</AlertDialogHeader>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            Delete rows
+          </AlertDialogHeader>
 
           <AlertDialogBody>
             {isDeletingRows ? (
@@ -102,7 +104,7 @@ export default function DeleteRowsModal({
               </Button>
             )}
             <Button
-              colorScheme="critical"
+              colorScheme="red"
               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 { BiTrash } from 'react-icons/bi'
+import { BsTrash } from 'react-icons/bs'
 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={<Icon as={BiTrash} boxSize={4} />}
+                leftIcon={<BsTrash />}
                 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,7 +39,9 @@ export default function DeleteColumnModal({
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader>Delete Column</AlertDialogHeader>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            Delete Column
+          </AlertDialogHeader>
 
           <AlertDialogBody>
             Are you sure you want to delete column: <b>{columnName}</b>?
@@ -55,7 +57,7 @@ export default function DeleteColumnModal({
               Cancel
             </Button>
             <Button
-              colorScheme="critical"
+              colorScheme="red"
               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,15 +5,8 @@ import {
   useContext,
   useState,
 } from 'react'
-import { BiTrash } from 'react-icons/bi'
-import {
-  Icon,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-} from '@chakra-ui/react'
+import { BsTrash } from 'react-icons/bs'
+import { Menu, MenuButton, MenuItem, MenuList, Portal } from '@chakra-ui/react'
 
 import DeleteRowsModal from '../components/TableFooter/DeleteRowsModal'
 
@@ -92,8 +85,8 @@ export const ContextMenuContextProvider = ({
             />
             <MenuList m={0}>
               <MenuItem
-                icon={<Icon as={BiTrash} boxSize={5} />}
-                color="interaction.critical.default"
+                icon={<BsTrash size={16} />}
+                color="red.500"
                 onClick={() => setIsDeleteModalOpen(true)}
               >
                 {rowsSelected.length ? 'Delete selected rows' : 'Delete row'}