diff options
| author | Oliver <oliver@mohlin.dev> | 2025-03-28 13:13:45 +0100 |
|---|---|---|
| committer | Tobias Järvelöv <tobias.jarvelov@mullvad.net> | 2025-05-28 10:33:24 +0200 |
| commit | 39ef005ca99268ff973e8e133fef4ec8ca0a45ab (patch) | |
| tree | b1ea3c872bb290e3ea6860f200d0707933e781db | |
| parent | 69f2b7bb1b0af94155ca2ebe58e2fb9616a9484a (diff) | |
| download | mullvadvpn-39ef005ca99268ff973e8e133fef4ec8ca0a45ab.tar.xz mullvadvpn-39ef005ca99268ff973e8e133fef4ec8ca0a45ab.zip | |
Add animation for UpdateAvailableListItem entering
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx index 547260f1f8..ef24719981 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/AppInfoView.tsx @@ -1,9 +1,10 @@ import { messages } from '../../../../shared/gettext'; import { Flex } from '../../../lib/components'; +import { Animate } from '../../../lib/components/animate'; import { useHistory } from '../../../lib/history'; import { AppNavigationHeader } from '../../'; import { BackAction } from '../../KeyboardNavigation'; -import { Layout, SettingsContainer, SettingsStack } from '../../Layout'; +import { Layout, SettingsContainer } from '../../Layout'; import { NavigationContainer } from '../../NavigationContainer'; import { NavigationScrollbars } from '../../NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; @@ -30,16 +31,20 @@ export function AppInfoView() { <SettingsHeader> <HeaderTitle>{messages.pgettext('app-info-view', 'App info')}</HeaderTitle> </SettingsHeader> - <SettingsContainer> - <SettingsStack> - {showUpdateAvailable && <UpdateAvailableListItem />} - <Flex $flexDirection="column"> - <VersionListItem /> - <ChangelogListItem /> - </Flex> - <BetaListItem /> - </SettingsStack> - </SettingsContainer> + <Animate + present={showUpdateAvailable} + animations={[{ type: 'fade' }, { type: 'wipe', direction: 'vertical' }]}> + <Flex $margin={{ bottom: 'medium' }}> + <UpdateAvailableListItem /> + </Flex> + </Animate> + <Flex $flexDirection="column" $gap="medium"> + <Flex $flexDirection="column"> + <VersionListItem /> + <ChangelogListItem /> + </Flex> + <BetaListItem /> + </Flex> </NavigationScrollbars> </NavigationContainer> </SettingsContainer> |