model dark mode styling

theme/components/Modal.ts

+import { modalAnatomy as parts } from '@chakra-ui/anatomy'
+import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools'
+import { mode } from '@chakra-ui/theme-tools'
 import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 
-const Modal: ComponentMultiStyleConfig = {
-  parts: [ ],
-  sizes: {
-    md: {
-      dialog: {
-        maxW: '760px',
-      },
-    },
-  },
-  baseStyle: {
-    dialog: {
+const baseStyleDialog: SystemStyleFunction = (props) => {
+  return {
     padding: 8,
     borderRadius: 'lg',
-    },
-    header: {
+    bg: mode('white', 'gray.800')(props),
+  }
+}
+
+const baseStyleHeader = {
   padding: 0,
   marginBottom: 8,
   fontSize: '2xl',
   lineHeight: 10,
-    },
-    body: {
+}
+
+const baseStyleBody = {
   padding: 0,
   marginBottom: 8,
-    },
-    footer: {
+}
+
+const baseStyleFooter = {
   padding: 0,
   justifyContent: 'flex-start',
-    },
-    closeButton: {
+}
+
+const baseStyleCloseButton: SystemStyleFunction = (props) => {
+  return {
     top: 8,
     right: 8,
     height: 10,
     width: 10,
-      color: 'gray.700',
+    color: mode('gray.700', 'gray.600')(props),
     _hover: { color: 'blue.400' },
     _active: { bg: 'none' },
+  }
+}
+
+const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
+  dialog: baseStyleDialog(props),
+  header: baseStyleHeader,
+  body: baseStyleBody,
+  footer: baseStyleFooter,
+  closeButton: baseStyleCloseButton(props),
+})
+
+const sizes = {
+  md: {
+    dialog: {
+      maxW: '760px',
     },
   },
 }
 
+const Modal: ComponentMultiStyleConfig = {
+  parts: parts.keys,
+  sizes,
+  baseStyle,
+}
+
 export default Modal;

ui/watchlist/AddressModal/AddressForm.tsx

@@ -93,11 +93,11 @@ const AddressModal: React.FC<Props> = ({ data }) => {
         <Grid templateColumns="repeat(3, max-content)" gap="20px 24px">
           { NOTIFICATIONS.map((notification: string) => {
             return (
-              <>
+              <React.Fragment key={ notification }>
                 <GridItem>{ notification }</GridItem>
                 <GridItem><Checkbox colorScheme="blue" size="lg">Incoming</Checkbox></GridItem>
                 <GridItem><Checkbox colorScheme="blue" size="lg">Outgoing</Checkbox></GridItem>
-              </>
+              </React.Fragment>
             )
           }) }
         </Grid>