diff --git a/packages/suite/src/views/settings/SettingsGeneral/DesktopSuiteBanner.tsx b/packages/suite/src/views/settings/SettingsGeneral/DesktopSuiteBanner.tsx index db23e9d4168..c2e720da816 100644 --- 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} > - - - + + + + + + +