Fix light mode for rule builder

timokoenig · Feb 15, 2022 · 76a5690 · 76a5690
1 parent 5f85d87
commit 76a5690
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/components/builder/left-column.tsx b/components/builder/left-column.tsx
@@ -10,6 +10,7 @@ import {
   SimpleGrid,
   Spacer,
   Text,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -28,7 +29,7 @@ const LeftColumn = (props: Props) => {
 
   return (
     <Box
-      bg="gray.700"
+      bg={useColorModeValue('gray.200', 'gray.700')}
       px="10"
       py="5"
       minWidth="350"

diff --git a/components/builder/right-column/overview.tsx b/components/builder/right-column/overview.tsx
@@ -10,6 +10,7 @@ import {
   Th,
   Thead,
   Tr,
+  useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react'
 import React from 'react'
@@ -47,7 +48,7 @@ const Overview = (props: Props) => {
           </Button>
         </Box>
         {props.customRule.description !== '' && <Text mb="5">{props.customRule.description}</Text>}
-        <Box backgroundColor="gray.700" borderRadius="5" mb="10">
+        <Box backgroundColor={useColorModeValue('gray.200', 'gray.700')} borderRadius="5" mb="10">
           <Box display="flex" alignItems="center" flexDirection="row" m="5">
             <Text flex="1" fontWeight="semibold">
               {t('builder.rules.immunization')}

diff --git a/components/builder/right-column/rule.tsx b/components/builder/right-column/rule.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Text, useColorModeValue } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CertificateRule, immunizationTypeName } from '../../../utils/certlogic'
@@ -13,7 +13,7 @@ type Props = {
 const Rule = (props: Props) => {
   const { t } = useTranslation('common')
   return (
-    <Box borderRadius="10" backgroundColor="gray.700" padding="5">
+    <Box borderRadius="10" backgroundColor={useColorModeValue('gray.200', 'gray.700')} padding="5">
       <Flex>
         <Box flex="1" display="flex" flexDireaction="row" alignItems="center">
           <Box>

diff --git a/pages/builder.tsx b/pages/builder.tsx
@@ -51,7 +51,7 @@ const BuilderPage = () => {
   return (
     <>
       <PageMeta allowIndex={false} />
-      <Flex color="white" height="100vh">
+      <Flex height="100vh">
         <LeftColumn
           customRule={currentCustomRule}
           onCreate={onCreate}

diff --git a/utils/builder-state-rules-de.json b/utils/builder-state-rules-de.json
@@ -51,7 +51,7 @@
             },
             {
               "lang": "de",
-              "desc": "Die Probenahme für einen NAA-Test (z.B. PCR) darf maximal 72 Stunden zurückliegen."
+              "desc": "Die Probenahme für einen NAA-Test (z.B. PCR) darf maximal 48 Stunden zurückliegen."
             }
           ],
           "validTo": 48