💄 Fix key component in tooltip for dark mode

Closes #1212
baptisteArno · Feb 5, 2024 · 5e9dfaa · 5e9dfaa
1 parent 9b5436d
commit 5e9dfaa
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/apps/builder/src/features/settings/components/GeneralSettingsForm.tsx b/apps/builder/src/features/settings/components/GeneralSettingsForm.tsx
@@ -5,6 +5,7 @@ import {
   Stack,
   Tag,
   Text,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { Settings } from '@typebot.io/schemas'
 import React from 'react'
@@ -27,6 +28,7 @@ export const GeneralSettingsForm = ({
   generalSettings,
   onGeneralSettingsChange,
 }: Props) => {
+  const keyBg = useColorModeValue(undefined, 'gray.600')
   const toggleRememberUser = (isEnabled: boolean) =>
     onGeneralSettingsChange({
       ...generalSettings,
@@ -98,12 +100,19 @@ export const GeneralSettingsForm = ({
             <MoreInfoTooltip>
               <Stack>
                 <Text>
-                  Choose <Tag size="sm">session</Tag> to remember the user as
-                  long as he does not closes the tab or the browser.
+                  Choose{' '}
+                  <Tag size="sm" bgColor={keyBg}>
+                    session
+                  </Tag>{' '}
+                  to remember the user as long as he does not closes the tab or
+                  the browser.
                 </Text>
                 <Text>
-                  Choose <Tag size="sm">local</Tag> to remember the user
-                  forever.
+                  Choose{' '}
+                  <Tag size="sm" bgColor={keyBg}>
+                    local
+                  </Tag>{' '}
+                  to remember the user forever.
                 </Text>
               </Stack>
             </MoreInfoTooltip>