blsmedia/bot
2
0
Fork 0
Code Activity

💄 Improve new version popup animation

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-22 16:59:04 +01:00
parent 00b6acca8e
commit 31711dc24d
4 changed files with 61 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,13 @@
import { useTypebot } from '@/features/editor'
import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
import {
Button,
DarkMode,
Flex,
HStack,
SlideFade,
Stack,
Text,
} from '@chakra-ui/react'
import { useEffect, useState } from 'react'
import { sendRequest } from 'utils'
import { PackageIcon } from './icons'
@@ -42,43 +50,51 @@ export const NewVersionPopup = () => {
window.location.reload()
}
if (!isNewVersionAvailable) return null
return (
<Stack
pos="fixed"
bottom="18px"
left="18px"
bgColor="blue.400"
p="4"
px="4"
rounded="lg"
shadow="lg"
zIndex={10}
borderWidth="1px"
borderColor="blue.300"
maxW="320px"
>
<HStack spacing={3}>
<Stack spacing={4}>
<Stack spacing={1} color="white">
<HStack>
<PackageIcon />{' '}
<Text fontWeight="bold">New version available!</Text>
</HStack>
<DarkMode>
<SlideFade
in={isNewVersionAvailable}
offsetY="20px"
style={{
position: 'fixed',
bottom: '18px',
left: '18px',
zIndex: 42,
}}
unmountOnExit
>
<Stack
bgColor="blue.400"
p="4"
px="4"
rounded="lg"
shadow="lg"
borderWidth="1px"
borderColor="blue.300"
maxW="320px"
>
<HStack spacing={3}>
<Stack spacing={4} color="white">
<Stack spacing={1}>
<HStack>
<PackageIcon />{' '}
<Text fontWeight="bold">New version available!</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>
<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>
</HStack>
</Stack>
</HStack>
</Stack>
</SlideFade>
</DarkMode>
)
}