fix(suite): Fix close button in suite desktop promo

trezor · Dec 11, 2024 · b051a4e · b051a4e
1 parent f95983d
commit b051a4e
Showing 1 changed file with 17 additions and 39 deletions.
diff --git a/packages/suite/src/views/settings/SettingsGeneral/DesktopSuiteBanner.tsx b/packages/suite/src/views/settings/SettingsGeneral/DesktopSuiteBanner.tsx
@@ -3,10 +3,11 @@ import { useState } from 'react';
 import styled from 'styled-components';
 import { AnimatePresence, HTMLMotionProps, motion } from 'framer-motion';
 
-import { Button, H2, Icon, Image, Paragraph, motionEasing } from '@trezor/components';
+import { Button, H2, Icon, Image, Paragraph, motionEasing, Box } from '@trezor/components';
 import { analytics, EventType } from '@trezor/suite-analytics';
 import { SUITE_URL } from '@trezor/urls';
 import { SCREEN_QUERY } from '@trezor/components/src/config/variables';
+import { palette } from '@trezor/theme';
 
 import { useDispatch } from 'src/hooks/suite/useDispatch';
 import { setFlag } from 'src/actions/suite/suiteActions';
@@ -23,36 +24,7 @@ const Container = styled(motion.div)`
     overflow: hidden;
 `;
 
-// eslint-disable-next-line local-rules/no-override-ds-component
-const CloseButton = styled(Icon)`
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    width: auto;
-    height: auto;
-    padding: 4px;
-    border-radius: 4px;
-    transition:
-        opacity 0.15s,
-        background 0.15s;
-    cursor: pointer;
-
-    path {
-        fill: ${({ theme }) => theme.legacy.BG_WHITE};
-    }
-
-    &:hover {
-        background: ${({ theme }) => theme.legacy.BG_GREEN_HOVER};
-        opacity: 0.7;
-    }
-
-    &:active {
-        opacity: 0.9;
-    }
-`;
-
-// eslint-disable-next-line local-rules/no-override-ds-component
-const StyledImage = styled(Image)`
+const ImageContainer = styled.div`
     margin-right: 24px;
 
     ${SCREEN_QUERY.BELOW_LAPTOP} {
@@ -135,14 +107,20 @@ export const DesktopSuiteBanner = () => {
                     }
                     {...animationConfig}
                 >
-                    <CloseButton
-                        size={18}
-                        name="close"
-                        onClick={handleClose}
-                        data-testid="@banner/install-desktop-suite/close-button"
-                    />
-
-                    <StyledImage image="TREZOR_PATTERN" width={140} />
+                    <Box position={{ type: 'absolute', top: 16, right: 16 }} cursor="pointer">
+                        <Icon
+                            size={24}
+                            name="close"
+                            onClick={handleClose}
+                            data-testid="@banner/install-desktop-suite/close-button"
+                            color={palette.lightWhiteAlpha1000}
+                            hoverColor={palette.lightWhiteAlpha400}
+                        />
+                    </Box>
+
+                    <ImageContainer>
+                        <Image image="TREZOR_PATTERN" width={140} />
+                    </ImageContainer>
 
                     <Content>
                         <TextContainer>