blsmedia/bot
2
0
Fork 0
Code Activity

✨ Add dark mode (#191)

Browse Source 
Closes #189
This commit is contained in:
Baptiste Arnaud
2022-12-20 16:55:43 +01:00
committed by GitHub
parent 054cbb3585
commit 3394fa5e0a
77 changed files with 1782 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx
View File

@ -1,4 +1,9 @@
import { Flex, Spinner, useDisclosure } from '@chakra-ui/react'
import {
Flex,
Spinner,
useColorModeValue,
useDisclosure,
} from '@chakra-ui/react'
import { useToast } from '@/hooks/useToast'
import { useTypebot } from '@/features/editor'
import { Stats } from 'models'
@ -24,7 +29,13 @@ export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
<Flex
w="full"
pos="relative"
bgColor="gray.50"
bgColor={useColorModeValue('white', 'gray.850')}
backgroundImage={useColorModeValue(
'radial-gradient(#c6d0e1 1px, transparent 0)',
'radial-gradient(#2f2f39 1px, transparent 0)'
)}
backgroundSize="40px 40px"
backgroundPosition="-19px -19px"
h="full"
justifyContent="center"
>

9
apps/builder/src/features/analytics/components/StatsCards.tsx
View File

@ -5,6 +5,7 @@ import {
Stat,
StatLabel,
StatNumber,
useColorModeValue,
} from '@chakra-ui/react'
import { Stats } from 'models'
import React from 'react'
@ -13,9 +14,11 @@ export const StatsCards = ({
stats,
...props
}: { stats?: Stats } & GridProps) => {
const bg = useColorModeValue('white', 'gray.900')
return (
<SimpleGrid columns={{ base: 1, md: 3 }} spacing="6" {...props}>
<Stat bgColor="white" p="4" rounded="md" boxShadow="md">
<Stat bgColor={bg} p="4" rounded="md" boxShadow="md">
<StatLabel>Views</StatLabel>
{stats ? (
<StatNumber>{stats.totalViews}</StatNumber>
@ -23,7 +26,7 @@ export const StatsCards = ({
<Skeleton w="50%" h="10px" mt="2" />
)}
</Stat>
<Stat bgColor="white" p="4" rounded="md" boxShadow="md">
<Stat bgColor={bg} p="4" rounded="md" boxShadow="md">
<StatLabel>Starts</StatLabel>
{stats ? (
<StatNumber>{stats.totalStarts}</StatNumber>
@ -31,7 +34,7 @@ export const StatsCards = ({
<Skeleton w="50%" h="10px" mt="2" />
)}
</Stat>
<Stat bgColor="white" p="4" rounded="md" boxShadow="md">
<Stat bgColor={bg} p="4" rounded="md" boxShadow="md">
<StatLabel>Completion rate</StatLabel>
{stats ? (
<StatNumber>