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: {
+const baseStyleDialog: SystemStyleFunction = (props) => {
+  return {
+    padding: 8,
+    borderRadius: 'lg',
+    bg: mode('white', 'gray.800')(props),
+  }
+}
+
+const baseStyleHeader = {
+  padding: 0,
+  marginBottom: 8,
+  fontSize: '2xl',
+  lineHeight: 10,
+}
+
+const baseStyleBody = {
+  padding: 0,
+  marginBottom: 8,
+}
+
+const baseStyleFooter = {
+  padding: 0,
+  justifyContent: 'flex-start',
+}
+
+const baseStyleCloseButton: SystemStyleFunction = (props) => {
+  return {
+    top: 8,
+    right: 8,
+    height: 10,
+    width: 10,
+    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: {
-      padding: 8,
-      borderRadius: 'lg',
-    },
-    header: {
-      padding: 0,
-      marginBottom: 8,
-      fontSize: '2xl',
-      lineHeight: 10,
-    },
-    body: {
-      padding: 0,
-      marginBottom: 8,
-    },
-    footer: {
-      padding: 0,
-      justifyContent: 'flex-start',
-    },
-    closeButton: {
-      top: 8,
-      right: 8,
-      height: 10,
-      width: 10,
-      color: 'gray.700',
-      _hover: { color: 'blue.400' },
-      _active: { bg: 'none' },
+      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>