fix: add isFullWidth for mobile viewport modal buttons

opengovsg · Jul 20, 2022 · 53ee64d · 53ee64d
1 parent 4f73b23
commit 53ee64d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/frontend/src/features/workspace/components/WorkspaceModals/CreateWorkspaceModal.tsx b/frontend/src/features/workspace/components/WorkspaceModals/CreateWorkspaceModal.tsx
@@ -13,6 +13,7 @@ import {
   useBreakpointValue,
 } from '@chakra-ui/react'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { WORKSPACE_TITLE_VALIDATION_RULES } from '~utils/workspaceValidation'
 import Button from '~components/Button'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
@@ -45,6 +46,7 @@ export const CreateWorkspaceModal = ({
     xs: 'mobile',
     md: 'md',
   })
+  const isMobile = useIsMobile()
 
   // TODO (hans): Implement create workspace functionality
   const handleCreateWorkspace = handleSubmit((data) => {
@@ -78,10 +80,17 @@ export const CreateWorkspaceModal = ({
             flexDir={{ base: 'column-reverse', md: 'inherit' }}
             justifyContent="flex-end"
           >
-            <Button onClick={onClose} variant="clear" colorScheme="secondary">
+            <Button
+              onClick={onClose}
+              variant="clear"
+              colorScheme="secondary"
+              isFullWidth={isMobile}
+            >
               Cancel
             </Button>
-            <Button onClick={handleCreateWorkspace}>Create workspace</Button>
+            <Button onClick={handleCreateWorkspace} isFullWidth={isMobile}>
+              Create workspace
+            </Button>
           </Stack>
         </ModalFooter>
       </ModalContent>

diff --git a/frontend/src/features/workspace/components/WorkspaceModals/DeleteWorkspaceModal.tsx b/frontend/src/features/workspace/components/WorkspaceModals/DeleteWorkspaceModal.tsx
@@ -14,6 +14,7 @@ import {
 } from '@chakra-ui/react'
 import { isEmpty } from 'lodash'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import Button from '~components/Button'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import Radio from '~components/Radio'
@@ -42,6 +43,7 @@ export const DeleteWorkspaceModal = ({
     xs: 'mobile',
     md: 'md',
   })
+  const isMobile = useIsMobile()
 
   // TODO (hans): Implement delete workspace functionality
   const handleDeleteWorkspace = handleSubmit((data) => {
@@ -88,10 +90,19 @@ export const DeleteWorkspaceModal = ({
             flexDir={{ base: 'column-reverse', md: 'inherit' }}
             justifyContent="flex-end"
           >
-            <Button onClick={onClose} variant="clear" colorScheme="secondary">
+            <Button
+              onClick={onClose}
+              variant="clear"
+              colorScheme="secondary"
+              isFullWidth={isMobile}
+            >
               Cancel
             </Button>
-            <Button onClick={handleDeleteWorkspace} colorScheme="danger">
+            <Button
+              onClick={handleDeleteWorkspace}
+              colorScheme="danger"
+              isFullWidth={isMobile}
+            >
               Yes, delete workspace
             </Button>
           </Stack>

diff --git a/frontend/src/features/workspace/components/WorkspaceModals/RenameWorkspaceModal.tsx b/frontend/src/features/workspace/components/WorkspaceModals/RenameWorkspaceModal.tsx
@@ -13,6 +13,7 @@ import {
   useBreakpointValue,
 } from '@chakra-ui/react'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { WORKSPACE_TITLE_VALIDATION_RULES } from '~utils/workspaceValidation'
 import Button from '~components/Button'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
@@ -45,6 +46,7 @@ export const RenameWorkspaceModal = ({
     xs: 'mobile',
     md: 'md',
   })
+  const isMobile = useIsMobile()
 
   // TODO (hans): Implement rename workspace functionality
   const handleRenameWorkspace = handleSubmit((data) => {
@@ -78,10 +80,17 @@ export const RenameWorkspaceModal = ({
             flexDir={{ base: 'column-reverse', md: 'inherit' }}
             justifyContent="flex-end"
           >
-            <Button onClick={onClose} variant="clear" colorScheme="secondary">
+            <Button
+              onClick={onClose}
+              variant="clear"
+              colorScheme="secondary"
+              isFullWidth={isMobile}
+            >
               Cancel
             </Button>
-            <Button onClick={handleRenameWorkspace}>Rename workspace</Button>
+            <Button onClick={handleRenameWorkspace} isFullWidth={isMobile}>
+              Rename workspace
+            </Button>
           </Stack>
         </ModalFooter>
       </ModalContent>