From edc4e7844dc3de8f2a7048cbc1ffb7d5c9d1a843 Mon Sep 17 00:00:00 2001
From: Prochmi99 <152851523+MiroslavProchazka@users.noreply.github.com>
Date: Tue, 26 Nov 2024 20:06:32 +0100
Subject: [PATCH] fix(suite): align promo buttons to the right

---
 .../suite/src/views/dashboard/PromoBanner.tsx | 59 ++++++++-----------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/packages/suite/src/views/dashboard/PromoBanner.tsx b/packages/suite/src/views/dashboard/PromoBanner.tsx
index 25e8b5bb17f..9eef9f4a1e8 100644
--- a/packages/suite/src/views/dashboard/PromoBanner.tsx
+++ b/packages/suite/src/views/dashboard/PromoBanner.tsx
@@ -4,9 +4,9 @@ import styled, { css } from 'styled-components';
 
 import { SUITE_MOBILE_APP_STORE, SUITE_MOBILE_PLAY_STORE, SUITE_URL } from '@trezor/urls';
 import { EventType, analytics } from '@trezor/suite-analytics';
-import { Button, Icon, Image, Tooltip, variables } from '@trezor/components';
+import { Button, Icon, Image, Tooltip, variables, Row } from '@trezor/components';
 import { isWeb } from '@trezor/env-utils';
-import { spacingsPx } from '@trezor/theme';
+import { spacings } from '@trezor/theme';
 
 import { Translation, QrCode, TrezorLink } from 'src/components/suite';
 import { useLayoutSize } from 'src/hooks/suite/useLayoutSize';
@@ -53,14 +53,10 @@ const DesktopPromoContainer = styled.div`
 const MobilePromoContainer = styled.div`
     ${promoContainerCss}
     justify-content: start;
-    margin: ${spacingsPx.sm} ${spacingsPx.xxxl} auto auto;
-    padding-bottom: ${spacingsPx.sm};
 
     ${variables.SCREEN_QUERY.MOBILE} {
         flex-direction: column;
-        gap: 0;
         padding: 20px 16px;
-        justify-content: space-between;
     }
 `;
 
@@ -92,15 +88,6 @@ const DesktopLinkButton = styled(Button)`
     }
 `;
 
-const BadgeContainer = styled.div`
-    display: flex;
-    gap: 10px;
-
-    ${variables.SCREEN_QUERY.MOBILE} {
-        margin: 0;
-    }
-`;
-
 // eslint-disable-next-line local-rules/no-override-ds-component
 const StyledTooltip = styled(Tooltip)`
     display: flex;
@@ -241,27 +228,29 @@ export const PromoBanner = () => {
             )}
 
             <MobilePromoContainer>
-                <Translation
-                    values={{ b: text => <b>{text}</b> }}
-                    id="TR_MOBILE_APP_PROMO_TEXT_FOOTER"
-                />
-
-                <BadgeContainer>
-                    <StoreBadge
-                        url={SUITE_MOBILE_APP_STORE}
-                        image="APP_STORE"
-                        type="app-store"
-                        analyticsPayload="ios"
-                        shownQRState={shownQRState}
+                <Row justifyContent="space-between" width="100%">
+                    <Translation
+                        values={{ b: text => <b>{text}</b> }}
+                        id="TR_MOBILE_APP_PROMO_TEXT_FOOTER"
                     />
-                    <StoreBadge
-                        url={SUITE_MOBILE_PLAY_STORE}
-                        image="PLAY_STORE"
-                        type="play-store"
-                        analyticsPayload="android"
-                        shownQRState={shownQRState}
-                    />
-                </BadgeContainer>
+
+                    <Row gap={spacings.xxs}>
+                        <StoreBadge
+                            url={SUITE_MOBILE_APP_STORE}
+                            image="APP_STORE"
+                            type="app-store"
+                            analyticsPayload="ios"
+                            shownQRState={shownQRState}
+                        />
+                        <StoreBadge
+                            url={SUITE_MOBILE_PLAY_STORE}
+                            image="PLAY_STORE"
+                            type="play-store"
+                            analyticsPayload="android"
+                            shownQRState={shownQRState}
+                        />
+                    </Row>
+                </Row>
             </MobilePromoContainer>
         </Container>
     );