Merge pull request #775 from oasisprotocol/lw/confirm-modal

Restyle confirmation modal to match transaction preview modal
oasisprotocol · Mar 25, 2022 · 09cbc04 · 09cbc04
2 parents e9c5ac7 + 3cf2735
commit 09cbc04
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -1,6 +1,7 @@
 import { createContext, useCallback, useContext, useState } from 'react'
 import { Box, Button, Layer, Heading, Paragraph } from 'grommet'
 import { useTranslation } from 'react-i18next'
+import { Alert, Checkmark, Close } from 'grommet-icons/icons'
 
 interface Modal {
   title: string
@@ -34,19 +35,27 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
 
   return (
     <Layer onEsc={closeModal} onClickOutside={closeModal} background="background-front">
-      <Heading margin="medium" size="small">
-        {modal.title}
-      </Heading>
-      <Paragraph margin="medium">{modal.description}</Paragraph>
-      <Box justify="between" margin="medium" direction="row">
-        <Button label={t('common.cancel')} onClick={closeModal} />
-        <Button
-          label={t('common.confirm')}
-          disabled={modal.isDangerous}
-          onClick={confirm}
-          primary={modal.isDangerous}
-          color={modal.isDangerous ? 'status-error' : ''}
-        />
+      <Box margin="medium">
+        <Heading size="small">{modal.title}</Heading>
+        <Paragraph fill>{modal.description}</Paragraph>
+        <Box direction="row" gap="small" alignSelf="end" pad={{ top: 'large' }}>
+          <Button
+            label={t('common.cancel', 'Cancel')}
+            onClick={closeModal}
+            secondary
+            style={{ borderRadius: '4px' }}
+            icon={<Close size="18px" />}
+          />
+          <Button
+            label={t('common.confirm', 'Confirm')}
+            onClick={confirm}
+            disabled={modal.isDangerous}
+            primary={modal.isDangerous}
+            color={modal.isDangerous ? 'status-error' : ''}
+            style={{ borderRadius: '4px' }}
+            icon={modal.isDangerous ? <Alert size="18px" /> : <Checkmark size="18px" />}
+          />
+        </Box>
       </Box>
     </Layer>
   )