Improve log modal style

Author: sembrestels

packages/evmcrispr-terminal/src/components/LogModal/index.tsx

@@ -45,41 +45,21 @@ export default function LogModal({
   closeModal: () => void;
   logs: string[];
 }) {
-  const hasError = logs.find((log) => log.startsWith(':error:'));
-  const hasSuccess = logs.find((log) => log.startsWith(':success:'));
-  const statusColor = hasError
-    ? 'warning.300'
-    : hasSuccess
-    ? 'green.300'
-    : 'yellow.300';
-
   return (
     <Modal
       size="xl"
       isOpen={isOpen}
       onClose={closeModal}
       isCentered
-      colorScheme={hasError ? 'warning' : hasSuccess ? 'green' : 'yellow'}
+      colorScheme={'yellow'}
     >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>Logs</ModalHeader>
         <ModalCloseButton />
-        <ModalBody overflow="scroll">
+        <ModalBody overflow="auto">
           <VStack spacing={10} w={'full'} height="100%">
-            <Icon
-              as={
-                hasError
-                  ? XCircleIcon
-                  : hasSuccess
-                  ? CheckCircleIcon
-                  : InformationCircleIcon
-              }
-              color={statusColor}
-              boxSize={20}
-              mt={10}
-            />
-            <VStack spacing={2} w={'full'} pb="20px">
+            <VStack spacing={2} w={'full'} py="30px">
               {logs.map((log, i) => {
                 const _status = status(log);
                 const _statusColor =

packages/evmcrispr-terminal/src/components/Toast/index.tsx

@@ -2,7 +2,7 @@ import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
 
 export default function Toast({ status, description }: any) {
   return (
-    <Alert status={status}>
+    <Alert variant="solid" status={status}>
       <AlertIcon />
       <AlertDescription>{description}</AlertDescription>
     </Alert>

packages/evmcrispr-terminal/src/theme/AlertCustomization.ts

@@ -10,16 +10,21 @@ const baseStyle = definePartsStyle((props) => {
       color: 'white',
     },
     container: {
-      fontFamily: 'Ubuntu Mono, monospace',
+      '& p': {
+        marginBottom: '0px',
+        fontFamily: '"Ubuntu Mono", monospace',
+      },
+      fontFamily: '"Ubuntu Mono", monospace',
+      paddingY: '14px',
       bgColor:
         props.status === 'error'
           ? 'pink.700'
           : props.status === 'success'
           ? 'green.800'
           : props.status === 'info'
-          ? 'blue.500'
+          ? 'grey.500'
           : 'orange.700',
-      border: '1px solid',
+      border: '0',
       borderColor: 'white',
     },
     title: {
@@ -38,6 +43,13 @@ const baseStyle = definePartsStyle((props) => {
 
 const alertTheme = defineMultiStyleConfig({
   baseStyle,
+  variants: {
+    solid: {
+      container: {
+        border: '1px solid',
+      },
+    },
+  },
 });
 
 export default alertTheme;

packages/evmcrispr-terminal/src/theme/ModalCustomization.ts

@@ -18,21 +18,16 @@ const baseStyle = definePartsStyle((props) => {
     closeButton: {
       color: `${c}.300`,
     },
+    dialogContainer: {
+      '& > section': {
+        boxShadow: `6px 6px var(--chakra-colors-${c}-800)`,
+      },
+    },
     dialog: {
       bgColor: 'black',
       border: '2px solid',
       borderColor: `${c}.300`,
       borderRadius: 'none',
-
-      '&:before': {
-        boxSizing: 'border-box',
-        borderRight: '10px solid',
-        borderBottom: '10px solid',
-        borderColor: `${c}.800`,
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-      },
     },
     body: {
       w: 'full',
@@ -55,26 +50,13 @@ const headerBase = defineStyle({
 const mdDialog = defineStyle({
   fontSize: 'md',
   lineHeight: 'base',
-
-  '&:before': {
-    h: 'full',
-    w: 'full',
-    top: '13px',
-    left: '13px',
-  },
 });
 
 const lgDialog = defineStyle({
   w: '2xl',
   maxW: 'unset',
   fontSize: '2xl',
   lineHeight: 'base',
-  '&:before': {
-    w: '2xl',
-    h: 'full',
-    top: '13px',
-    left: '9px',
-  },
 });
 
 const xlDialog = defineStyle({
@@ -83,13 +65,6 @@ const xlDialog = defineStyle({
   h: 'lg',
   fontSize: '2xl',
   lineHeight: 'base',
-  '&:before': {
-    maxW: 'unset',
-    w: '4xl',
-    h: 'lg',
-    top: '9px',
-    left: '9px',
-  },
 });
 
 const xlBody = defineStyle({