From ddb528774bb280f2c3979f8a711074c173918cef Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 2 May 2023 09:13:57 -0400
Subject: [PATCH] :lipstick: Fix toast UI in dark mode

Closes #478
---
 apps/builder/src/components/Toast.tsx           | 17 ++++++++++++++---
 .../src/components/inputs/CodeEditor.tsx        |  3 +++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/builder/src/components/Toast.tsx b/apps/builder/src/components/Toast.tsx
index 622d11de3..62450e7d6 100644
--- a/apps/builder/src/components/Toast.tsx
+++ b/apps/builder/src/components/Toast.tsx
@@ -1,4 +1,11 @@
-import { Flex, HStack, IconButton, Stack, Text } from '@chakra-ui/react'
+import {
+  Flex,
+  HStack,
+  IconButton,
+  Stack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import { AlertIcon, CloseIcon, InfoIcon, SmileIcon } from './icons'
 import { CodeEditor } from './inputs/CodeEditor'
 import { LanguageName } from '@uiw/codemirror-extensions-langs'
@@ -27,11 +34,13 @@ export const Toast = ({
   secondaryButton,
   onClose,
 }: ToastProps) => {
+  const bgColor = useColorModeValue('white', 'gray.800')
+
   return (
     <Flex
       p={3}
       rounded="md"
-      bgColor="white"
+      bgColor={bgColor}
       borderWidth="1px"
       shadow="sm"
       fontSize="sm"
@@ -51,6 +60,7 @@ export const Toast = ({
               isReadOnly
               value={details.content}
               lang={details.lang}
+              minWidth="300px"
               maxHeight="200px"
               maxWidth="calc(450px - 100px)"
             />
@@ -85,11 +95,12 @@ const Icon = ({
   customIcon?: React.ReactNode
   status: ToastProps['status']
 }) => {
+  const accentColor = useColorModeValue('50', '0')
   const color = parseColor(status)
   const icon = parseIcon(status, customIcon)
   return (
     <Flex
-      bgColor={`${color}.50`}
+      bgColor={`${color}.${accentColor}`}
       boxSize="40px"
       justifyContent="center"
       alignItems="center"
diff --git a/apps/builder/src/components/inputs/CodeEditor.tsx b/apps/builder/src/components/inputs/CodeEditor.tsx
index d0cdb5327..ab8c5c58b 100644
--- a/apps/builder/src/components/inputs/CodeEditor.tsx
+++ b/apps/builder/src/components/inputs/CodeEditor.tsx
@@ -26,6 +26,7 @@ type Props = {
   withVariableButton?: boolean
   height?: string
   maxHeight?: string
+  minWidth?: string
   onChange?: (value: string) => void
 }
 export const CodeEditor = ({
@@ -34,6 +35,7 @@ export const CodeEditor = ({
   onChange,
   height = '250px',
   maxHeight = '70vh',
+  minWidth,
   withVariableButton = true,
   isReadOnly = false,
   debounceTimeout = 1000,
@@ -93,6 +95,7 @@ export const CodeEditor = ({
       width="full"
       h="full"
       pos="relative"
+      minW={minWidth}
       onMouseEnter={onOpen}
       onMouseLeave={onClose}
       maxWidth={props.maxWidth}