blsmedia/bot
2
0
Fork 0
Code Activity

💄 Improve new version popup ui

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-17 16:30:02 +01:00
parent b73282d810
commit 0e1fa4e339
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/builder/src/components/NewVersionPopup.tsx
View File

@ -1,14 +1,13 @@
import { useTypebot } from '@/features/editor' import { useTypebot } from '@/features/editor'
import { HStack, Stack, Text } from '@chakra-ui/react' import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { sendRequest } from 'utils' import { sendRequest } from 'utils'
import { PackageIcon } from './icons' import { PackageIcon } from './icons'
import { MotionStack } from './MotionStack'
const intervalDuration = 1000 * 30 // 30 seconds const intervalDuration = 1000 * 60 // 30 seconds
export const NewVersionPopup = () => { export const NewVersionPopup = () => {
const { save } = useTypebot() const { typebot, save } = useTypebot()
const [currentVersion, setCurrentVersion] = useState<string>() const [currentVersion, setCurrentVersion] = useState<string>()
const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false) const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false)
const [isReloading, setIsReloading] = useState(false) const [isReloading, setIsReloading] = useState(false)
@ -46,35 +45,40 @@ export const NewVersionPopup = () => {
if (!isNewVersionAvailable) return null if (!isNewVersionAvailable) return null
return ( return (
<MotionStack <Stack
pos="fixed" pos="fixed"
bottom="20px" bottom="18px"
left="20px" left="18px"
bgColor="blue.400" bgColor="blue.400"
color="white"
cursor="pointer"
p="4" p="4"
px="4" px="4"
rounded="xl" rounded="lg"
shadow="lg" shadow="lg"
onClick={saveAndReload}
zIndex={10} zIndex={10}
initial={{ opacity: 0, scale: 0.5 }} borderWidth="1px"
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
borderWidth="2px"
borderColor="blue.300" borderColor="blue.300"
maxW="320px"
> >
<HStack spacing={3}> <HStack spacing={3}>
<PackageIcon boxSize="32px" /> <Stack spacing={4}>
<Stack spacing={0}> <Stack spacing={1} color="white">
<Text fontWeight="bold">Typebot is ready to update!</Text> <HStack>
<Text fontSize="sm" color="gray.200"> <PackageIcon />{' '}
Click to restart <Text fontWeight="bold">New version available!</Text>
</Text> </HStack>
<Text fontSize="sm" color="gray.100">
An improved version of Typebot is available. Please reload now to
upgrade.
</Text>
</Stack>
<Flex justifyContent="flex-end">
<Button size="sm" onClick={saveAndReload}>
{typebot?.id ? 'Save and reload' : 'Reload'}
</Button>
</Flex>
</Stack> </Stack>
</HStack> </HStack>
</MotionStack> </Stack>
) )
} }