refactor: user alerts on destructive actions

apps/client/src/theme/OntimeAlert.ts

@@ -10,3 +10,11 @@ export const ontimeAlertOnDark = {
     color: '#578AF4', // $blue-500
   },
 };
+
+export const ontimeDialog = {
+  container: {
+    backgroundColor: '#1a1a1a', // $gray-1300
+    color: '#e2e2e2', // $gray-200
+    borderRadius: '3px',
+  },
+};

apps/client/src/theme/theme.ts

@@ -1,6 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { ontimeAlertOnDark } from './OntimeAlert';
+import { ontimeAlertOnDark, ontimeDialog } from './OntimeAlert';
 import {
   ontimeButtonFilled,
   ontimeButtonGhosted,
@@ -35,6 +35,11 @@ const theme = extendTheme({
         'ontime-on-dark-info': { ...ontimeAlertOnDark },
       },
     },
+    AlertDialog: {
+      variants: {
+        ontime: { ...ontimeDialog },
+      },
+    },
     Button: {
       baseStyle: {
         letterSpacing: '0.3px',