fix(suite): Fix banners when page changed

Author: jvaclavik

packages/components/src/components/Tooltip/TooltipDelay.ts

@@ -2,9 +2,11 @@ export const TOOLTIP_DELAY_NONE = 0;
 export const TOOLTIP_DELAY_SHORT = 200;
 export const TOOLTIP_DELAY_NORMAL = 500;
 export const TOOLTIP_DELAY_LONG = 1000;
+export const TOOLTIP_DELAY_EXTRA_LONG = 3000;
 
 export type TooltipDelay =
     | typeof TOOLTIP_DELAY_NONE
     | typeof TOOLTIP_DELAY_SHORT
     | typeof TOOLTIP_DELAY_NORMAL
-    | typeof TOOLTIP_DELAY_LONG;
+    | typeof TOOLTIP_DELAY_LONG
+    | typeof TOOLTIP_DELAY_EXTRA_LONG;

packages/suite/src/components/suite/banners/SuiteBanners/SuiteBanners.tsx

@@ -9,7 +9,7 @@ import {
     selectIsDeviceBackupUnfinished,
     selectSelectedDevice,
 } from '@suite-common/wallet-core';
-import { Column, TOOLTIP_DELAY_LONG, Tooltip, motionEasing } from '@trezor/components';
+import { Column, TOOLTIP_DELAY_EXTRA_LONG, Text, Tooltip, motionEasing } from '@trezor/components';
 import { isWeb } from '@trezor/env-utils';
 import { spacingsPx } from '@trezor/theme';
 
@@ -31,10 +31,10 @@ import { NoBackup } from './NoBackupBanner';
 import { NoConnectionBanner } from './NoConnectionBanner';
 import { SafetyChecksBanner } from './SafetyChecksBanner';
 
-const Container = styled.div<{ $fill?: boolean; $cursor?: string }>`
+const Container = styled.div<{ $fill?: boolean; $cursor?: string; $hasPadding?: boolean }>`
     width: 100%;
     max-width: ${({ $fill }) => ($fill ? 'none' : MAX_CONTENT_WIDTH)};
-    padding: ${spacingsPx.sm} ${spacingsPx.md};
+    padding: ${({ $hasPadding }) => ($hasPadding ? `${spacingsPx.sm} ${spacingsPx.md}` : 0)};
     position: relative; /* because it must be on the top of the draggable area on Mac */
     cursor: ${({ $cursor }) => $cursor || 'unset'};
 `;
@@ -55,7 +55,7 @@ const BannerWrapper = ({ scale, children, isExpanded, index }: BannerWrapperProp
 
     return (
         <BannerWrapperContainer
-            initial={{ height: 1 }}
+            initial={false}
             transition={{
                 duration: 0.4,
                 ease: motionEasing.transition,
@@ -178,17 +178,21 @@ export const SuiteBanners = ({ isOnboarding, fill }: SuiteBannersProps) => {
             $cursor={hasMultipleItems ? 'pointer' : 'unset'}
             $fill={fill}
             onClick={() => setIsExpanded(!isExpanded)}
+            $hasPadding
         >
             <Tooltip
                 isFullWidth
+                placement="right"
                 content={
-                    isExpanded
-                        ? 'Click to collapse notifications'
-                        : 'Click to show all notifications'
+                    <Text typographyStyle="label">
+                        {isExpanded
+                            ? 'Click to collapse notifications'
+                            : 'Click to show all notifications'}
+                    </Text>
                 }
                 hasArrow
                 isActive={hasMultipleItems}
-                delayShow={TOOLTIP_DELAY_LONG}
+                delayShow={TOOLTIP_DELAY_EXTRA_LONG}
             >
                 <Column gap={8} width="100%">
                     <AnimatePresence>