2
0

Add dark mode (#191)

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

View File

@ -111,7 +111,7 @@ export const ChatEmbedSettings = ({
/>
</HStack>
<HStack justifyContent="space-between">
<FormLabel htmlFor="custom-icon" mb="1" flexShrink={0}>
<FormLabel htmlFor="custom-icon" mb="0" flexShrink={0}>
Custom button icon?
</FormLabel>
<Switch
@ -139,9 +139,8 @@ export const ChatEmbedSettings = ({
alignItems="center"
w="full"
justifyContent="space-between"
pr={1}
>
<FormLabel htmlFor="fullscreen-option" mb="1">
<FormLabel htmlFor="fullscreen-option" mb="0">
Enable popup message?
</FormLabel>
<Switch

View File

@ -2,18 +2,22 @@ import { Icon, IconProps } from '@chakra-ui/react'
export const NotionLogo = (props: IconProps) => (
<Icon
width="246"
height="246"
viewBox="0 0 246 246"
fill="none"
width="100"
height="100"
viewBox="0 0 100 100"
fill="white"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
fill="#fff"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M46.0982 43.7783C53.7102 49.9627 56.5657 49.4909 70.8599 48.5371L205.616 40.4456C208.474 40.4456 206.098 37.5944 205.144 37.1206L182.764 20.9415C178.476 17.6122 172.763 13.7995 161.813 14.7532L31.3283 24.2703C26.5695 24.7422 25.6191 27.1216 27.5142 29.0287L46.0982 43.7783ZM54.1887 75.1833V216.97C54.1887 224.59 57.9966 227.441 66.5672 226.97L214.664 218.4C223.239 217.929 224.194 212.688 224.194 206.497V65.6619C224.194 59.4818 221.817 56.1491 216.568 56.6248L61.805 65.6619C56.0934 66.1419 54.1883 68.9989 54.1883 75.1833H54.1887ZM200.39 82.789C201.339 87.0755 200.39 91.3581 196.095 91.84L188.96 93.2618V197.938C182.764 201.268 177.051 203.172 172.291 203.172C164.668 203.172 162.759 200.791 157.05 193.658L110.375 120.384V191.278L125.145 194.611C125.145 194.611 125.145 203.172 113.229 203.172L80.3785 205.077C79.4242 203.172 80.3785 198.418 83.7107 197.465L92.2832 195.089V101.353L80.3809 100.399C79.4261 96.1126 81.8036 89.932 88.4753 89.4525L123.716 87.0769L172.291 161.305V95.6407L159.906 94.2194C158.955 88.9792 162.759 85.1742 167.522 84.7023L200.39 82.789ZM20.3726 11.4244L156.097 1.42918C172.765 -0.000288379 177.053 0.957344 187.529 8.56689L230.854 39.0181C238.003 44.2545 240.386 45.6801 240.386 51.3884V218.4C240.386 228.867 236.572 235.057 223.242 236.005L65.624 245.523C55.6168 246 50.8541 244.574 45.6134 237.908L13.7082 196.513C7.99173 188.893 5.61426 183.192 5.61426 176.523V28.0715C5.61426 19.512 9.42842 12.3719 20.3726 11.4244V11.4244Z"
fill="black"
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
fill="#000"
/>
</Icon>
)

View File

@ -1,31 +1,35 @@
import { Icon, IconProps } from '@chakra-ui/react'
import { colors } from '@/lib/theme'
import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
export const OtherLogo = (props: IconProps) => (
<Icon
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M256 282C270.359 282 282 270.359 282 256C282 241.641 270.359 230 256 230C241.641 230 230 241.641 230 256C230 270.359 241.641 282 256 282Z"
fill="black"
/>
<path
d="M346 282C360.359 282 372 270.359 372 256C372 241.641 360.359 230 346 230C331.641 230 320 241.641 320 256C320 270.359 331.641 282 346 282Z"
fill="black"
/>
<path
d="M166 282C180.359 282 192 270.359 192 256C192 241.641 180.359 230 166 230C151.641 230 140 241.641 140 256C140 270.359 151.641 282 166 282Z"
fill="black"
/>
<path
d="M448 256C448 150 362 64 256 64C150 64 64 150 64 256C64 362 150 448 256 448C362 448 448 362 448 256Z"
stroke="black"
strokeWidth="32"
strokeMiterlimit="10"
/>
</Icon>
)
export const OtherLogo = (props: IconProps) => {
const stroke = useColorModeValue('black', colors.gray[200])
return (
<Icon
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M256 282C270.359 282 282 270.359 282 256C282 241.641 270.359 230 256 230C241.641 230 230 241.641 230 256C230 270.359 241.641 282 256 282Z"
fill={stroke}
/>
<path
d="M346 282C360.359 282 372 270.359 372 256C372 241.641 360.359 230 346 230C331.641 230 320 241.641 320 256C320 270.359 331.641 282 346 282Z"
fill={stroke}
/>
<path
d="M166 282C180.359 282 192 270.359 192 256C192 241.641 180.359 230 166 230C151.641 230 140 241.641 140 256C140 270.359 151.641 282 166 282Z"
fill={stroke}
/>
<path
d="M448 256C448 150 362 64 256 64C150 64 64 150 64 256C64 362 150 448 256 448C362 448 448 362 448 256Z"
stroke={stroke}
strokeWidth="32"
strokeMiterlimit="10"
/>
</Icon>
)
}

View File

@ -1,29 +1,32 @@
import { Icon, IconProps } from '@chakra-ui/react'
import { Icon, IconProps, useColorModeValue } from '@chakra-ui/react'
export const WixLogo = (props: IconProps) => (
<Icon
width="311"
height="121"
viewBox="0 0 311 121"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M178 2.29971C172 5.29971 169.4 10.8997 169.4 26.0997C169.4 26.0997 172.4 23.0997 177.2 21.2997C180.7 19.9997 183.2 18.2997 185 16.9997C190.2 13.0997 191 8.39971 191 0.199713C190.9 0.199713 182.7 -0.300287 178 2.29971Z"
fill="#FBBD71"
/>
<path
d="M141.3 5.79963C136.1 10.0996 134.8 17.4996 134.8 17.4996L118 81.8996L104.2 29.1996C102.9 23.5996 100.3 16.6996 96.4 11.8996C91.6 5.79963 81.6 5.39963 80.4 5.39963C79.5 5.39963 69.6 5.79963 64.4 11.8996C60.5 16.6996 57.9 23.5996 56.6 29.1996L43.6 81.8996L26.8 17.4996C26.8 17.4996 25.5 10.5996 20.3 5.79963C12.1 -1.60037 0 0.199629 0 0.199629L32 120.7C32 120.7 42.4 121.6 47.6 119C54.5 115.5 58 113 61.9 96.4996C65.8 81.7996 76.2 38.9996 77 35.9996C77.4 34.6996 78.3 30.7996 80.9 30.7996C83.5 30.7996 84.4 34.2996 84.8 35.9996C85.7 38.9996 96 81.7996 99.9 96.4996C104.2 112.9 107.2 115.5 114.2 119C119.4 121.6 129.8 120.7 129.8 120.7L161.6 0.199629C161.6 0.199629 149.5 -1.50037 141.3 5.79963Z"
fill="black"
/>
<path
d="M190.9 19.5996C190.9 19.5996 188.7 22.5996 184.4 25.1996C181.4 26.8996 178.8 27.7996 175.8 29.4996C170.6 32.0996 169.3 34.6996 169.3 38.5996V39.8996V46.3996V47.6996V120.3C169.3 120.3 177.5 121.2 182.7 118.6C189.6 115.1 190.9 111.7 190.9 96.9996V24.3996V19.5996Z"
fill="black"
/>
<path
d="M270.4 60.7003L311 0.600311C311 0.600311 294.2 -2.39969 285.5 5.40031C279.9 10.2003 274.3 19.2003 274.3 19.2003L259.6 40.8003C258.7 42.1003 257.9 43.0003 256.6 43.0003C255.3 43.0003 254 41.7003 253.6 40.8003L238.9 19.2003C238.9 19.2003 232.9 10.6003 227.7 5.40031C219.1 -2.39969 202.2 0.600311 202.2 0.600311L241.5 60.6003L201.3 120.6C201.3 120.6 219 122.8 227.7 115C233.3 110.2 238.5 102 238.5 102L253.2 80.4003C254.1 79.1003 254.9 78.2003 256.2 78.2003C257.5 78.2003 258.8 79.5003 259.2 80.4003L273.9 102C273.9 102 279.5 110.2 284.7 115C293.3 122.8 310.6 120.6 310.6 120.6L270.4 60.7003Z"
fill="black"
/>
</Icon>
)
export const WixLogo = (props: IconProps) => {
const fill = useColorModeValue('black', 'white')
return (
<Icon
width="311"
height="121"
viewBox="0 0 311 121"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M178 2.29971C172 5.29971 169.4 10.8997 169.4 26.0997C169.4 26.0997 172.4 23.0997 177.2 21.2997C180.7 19.9997 183.2 18.2997 185 16.9997C190.2 13.0997 191 8.39971 191 0.199713C190.9 0.199713 182.7 -0.300287 178 2.29971Z"
fill="#FBBD71"
/>
<path
d="M141.3 5.79963C136.1 10.0996 134.8 17.4996 134.8 17.4996L118 81.8996L104.2 29.1996C102.9 23.5996 100.3 16.6996 96.4 11.8996C91.6 5.79963 81.6 5.39963 80.4 5.39963C79.5 5.39963 69.6 5.79963 64.4 11.8996C60.5 16.6996 57.9 23.5996 56.6 29.1996L43.6 81.8996L26.8 17.4996C26.8 17.4996 25.5 10.5996 20.3 5.79963C12.1 -1.60037 0 0.199629 0 0.199629L32 120.7C32 120.7 42.4 121.6 47.6 119C54.5 115.5 58 113 61.9 96.4996C65.8 81.7996 76.2 38.9996 77 35.9996C77.4 34.6996 78.3 30.7996 80.9 30.7996C83.5 30.7996 84.4 34.2996 84.8 35.9996C85.7 38.9996 96 81.7996 99.9 96.4996C104.2 112.9 107.2 115.5 114.2 119C119.4 121.6 129.8 120.7 129.8 120.7L161.6 0.199629C161.6 0.199629 149.5 -1.50037 141.3 5.79963Z"
fill={fill}
/>
<path
d="M190.9 19.5996C190.9 19.5996 188.7 22.5996 184.4 25.1996C181.4 26.8996 178.8 27.7996 175.8 29.4996C170.6 32.0996 169.3 34.6996 169.3 38.5996V39.8996V46.3996V47.6996V120.3C169.3 120.3 177.5 121.2 182.7 118.6C189.6 115.1 190.9 111.7 190.9 96.9996V24.3996V19.5996Z"
fill={fill}
/>
<path
d="M270.4 60.7003L311 0.600311C311 0.600311 294.2 -2.39969 285.5 5.40031C279.9 10.2003 274.3 19.2003 274.3 19.2003L259.6 40.8003C258.7 42.1003 257.9 43.0003 256.6 43.0003C255.3 43.0003 254 41.7003 253.6 40.8003L238.9 19.2003C238.9 19.2003 232.9 10.6003 227.7 5.40031C219.1 -2.39969 202.2 0.600311 202.2 0.600311L241.5 60.6003L201.3 120.6C201.3 120.6 219 122.8 227.7 115C233.3 110.2 238.5 102 238.5 102L253.2 80.4003C254.1 79.1003 254.9 78.2003 256.2 78.2003C257.5 78.2003 258.8 79.5003 259.2 80.4003L273.9 102C273.9 102 279.5 110.2 284.7 115C293.3 122.8 310.6 120.6 310.6 120.6L270.4 60.7003Z"
fill={fill}
/>
</Icon>
)
}

View File

@ -1,33 +1,37 @@
import { Icon, IconProps } from '@chakra-ui/react'
import { colors } from '@/lib/theme'
import * as react from '@chakra-ui/react'
export const WordpressLogo = (props: IconProps) => (
<Icon
width="123"
height="123"
viewBox="0 0 123 123"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.70801 61.2601C8.70801 82.0621 20.797 100.039 38.327 108.558L13.258 39.8721C10.342 46.4081 8.70801 53.6411 8.70801 61.2601Z"
fill="#464342"
/>
<path
d="M96.7396 58.608C96.7396 52.113 94.4066 47.615 92.4056 44.114C89.7416 39.785 87.2446 36.119 87.2446 31.79C87.2446 26.959 90.9086 22.462 96.0696 22.462C96.3026 22.462 96.5236 22.491 96.7506 22.504C87.4006 13.938 74.9436 8.70801 61.2616 8.70801C42.9016 8.70801 26.7486 18.128 17.3516 32.396C18.5846 32.433 19.7466 32.459 20.7336 32.459C26.2306 32.459 34.7396 31.792 34.7396 31.792C37.5726 31.625 37.9066 35.786 35.0766 36.121C35.0766 36.121 32.2296 36.456 29.0616 36.622L48.1996 93.547L59.7006 59.054L51.5126 36.62C48.6826 36.454 46.0016 36.119 46.0016 36.119C43.1696 35.953 43.5016 31.623 46.3336 31.79C46.3336 31.79 55.0126 32.457 60.1766 32.457C65.6726 32.457 74.1826 31.79 74.1826 31.79C77.0176 31.623 77.3506 35.784 74.5196 36.119C74.5196 36.119 71.6666 36.454 68.5046 36.62L87.4966 93.114L92.7386 75.597C95.0106 68.328 96.7396 63.107 96.7396 58.608Z"
fill="#464342"
/>
<path
d="M62.184 65.8574L46.416 111.676C51.124 113.06 56.103 113.817 61.262 113.817C67.382 113.817 73.251 112.759 78.714 110.838C78.573 110.613 78.445 110.374 78.34 110.114L62.184 65.8574Z"
fill="#464342"
/>
<path
d="M107.376 36.0459C107.602 37.7199 107.73 39.5169 107.73 41.4499C107.73 46.7829 106.734 52.7779 103.734 60.2739L87.6807 106.687C103.305 97.5759 113.814 80.6489 113.814 61.2609C113.815 52.1239 111.481 43.5319 107.376 36.0459Z"
fill="#464342"
/>
<path
d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z"
fill="#464342"
/>
</Icon>
)
export const WordpressLogo = (props: react.IconProps) => {
const fill = react.useColorModeValue('#464342', colors.gray[400])
return (
<react.Icon
width="123"
height="123"
viewBox="0 0 123 123"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.70801 61.2601C8.70801 82.0621 20.797 100.039 38.327 108.558L13.258 39.8721C10.342 46.4081 8.70801 53.6411 8.70801 61.2601Z"
fill={fill}
/>
<path
d="M96.7396 58.608C96.7396 52.113 94.4066 47.615 92.4056 44.114C89.7416 39.785 87.2446 36.119 87.2446 31.79C87.2446 26.959 90.9086 22.462 96.0696 22.462C96.3026 22.462 96.5236 22.491 96.7506 22.504C87.4006 13.938 74.9436 8.70801 61.2616 8.70801C42.9016 8.70801 26.7486 18.128 17.3516 32.396C18.5846 32.433 19.7466 32.459 20.7336 32.459C26.2306 32.459 34.7396 31.792 34.7396 31.792C37.5726 31.625 37.9066 35.786 35.0766 36.121C35.0766 36.121 32.2296 36.456 29.0616 36.622L48.1996 93.547L59.7006 59.054L51.5126 36.62C48.6826 36.454 46.0016 36.119 46.0016 36.119C43.1696 35.953 43.5016 31.623 46.3336 31.79C46.3336 31.79 55.0126 32.457 60.1766 32.457C65.6726 32.457 74.1826 31.79 74.1826 31.79C77.0176 31.623 77.3506 35.784 74.5196 36.119C74.5196 36.119 71.6666 36.454 68.5046 36.62L87.4966 93.114L92.7386 75.597C95.0106 68.328 96.7396 63.107 96.7396 58.608Z"
fill={fill}
/>
<path
d="M62.184 65.8574L46.416 111.676C51.124 113.06 56.103 113.817 61.262 113.817C67.382 113.817 73.251 112.759 78.714 110.838C78.573 110.613 78.445 110.374 78.34 110.114L62.184 65.8574Z"
fill={fill}
/>
<path
d="M107.376 36.0459C107.602 37.7199 107.73 39.5169 107.73 41.4499C107.73 46.7829 106.734 52.7779 103.734 60.2739L87.6807 106.687C103.305 97.5759 113.814 80.6489 113.814 61.2609C113.815 52.1239 111.481 43.5319 107.376 36.0459Z"
fill={fill}
/>
<path
d="M61.262 0C27.483 0 0 27.481 0 61.26C0 95.043 27.483 122.523 61.262 122.523C95.04 122.523 122.527 95.043 122.527 61.26C122.526 27.481 95.04 0 61.262 0ZM61.262 119.715C29.032 119.715 2.809 93.492 2.809 61.26C2.809 29.03 29.031 2.809 61.262 2.809C93.491 2.809 119.712 29.03 119.712 61.26C119.712 93.492 93.491 119.715 61.262 119.715Z"
fill={fill}
/>
</react.Icon>
)
}