From bca8d661c03d2b2d05baa434614ebdedd116e947 Mon Sep 17 00:00:00 2001
From: salvatorediocaro <54940197+salvatorediocaro@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:09:36 +0100
Subject: [PATCH] [B2BP-1053] - Prefooter : change store buttons direction
 (#508)

* change store buttons direction

* add review changes
---
 .changeset/spicy-windows-kneel.md             |  5 ++++
 .../components/PreFooter/PreFooter.tsx        | 27 ++++++-------------
 2 files changed, 13 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/spicy-windows-kneel.md

diff --git a/.changeset/spicy-windows-kneel.md b/.changeset/spicy-windows-kneel.md
new file mode 100644
index 00000000..d5eaa908
--- /dev/null
+++ b/.changeset/spicy-windows-kneel.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Prefooter - change store buttons direction
diff --git a/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx b/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx
index bf1ab331..950b5f34 100644
--- a/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx
+++ b/apps/nextjs-website/react-components/components/PreFooter/PreFooter.tsx
@@ -1,6 +1,5 @@
 import { Box, Stack, Typography } from '@mui/material';
 import Button from '@mui/material/Button';
-import Image from 'next/image';
 import { BackgroundColor } from '../common/Common.helpers';
 import { PreFooterProps } from '@react-components/types/PreFooter/PreFooter';
 import { useTheme, useMediaQuery } from '@mui/material';
@@ -111,30 +110,23 @@ const PreFooter = (props: PreFooterProps) => {
                 justifyContent='center'
                 alignItems='center'
                 spacing={2}
-                direction={
-                  isSmallScreen || layout === 'center' ? 'column' : 'row'
-                }
-                sx={{
-                  marginLeft: isSmallScreen || layout === 'center' ? 0 : 2,
-                }}
+                direction={isSmallScreen ? 'column' : 'row'}
+                marginLeft={0}
               >
                 {storeButtons.hrefGoogle && (
                   <Button
                     sx={{
                       padding: '0px',
-                      marginLeft:
-                        isSmallScreen || layout === 'center' ? '0px' : '16px',
                       justifyContent: 'start',
+                      display: 'flex',
                     }}
                     key='google'
                     href={storeButtons.hrefGoogle}
                   >
-                    <Image
+                    <img
                       src={googleBadgeBase64}
                       alt='Download on Google Play'
-                      height={0}
-                      width={0}
-                      style={{ height: '3em', width: 'auto' }}
+                      style={{ height: '3em', width: 'auto', display: 'block' }}
                     />
                   </Button>
                 )}
@@ -142,19 +134,16 @@ const PreFooter = (props: PreFooterProps) => {
                   <Button
                     sx={{
                       padding: '0px',
-                      marginLeft:
-                        isSmallScreen || layout === 'center' ? '0px' : '16px',
                       justifyContent: 'start',
+                      display: 'flex',
                     }}
                     key='apple'
                     href={storeButtons.hrefApple}
                   >
-                    <Image
+                    <img
                       src={appleBadgeBase64}
                       alt='Download on App Store'
-                      height={0}
-                      width={0}
-                      style={{ height: '3em', width: 'auto' }}
+                      style={{ height: '3em', width: 'auto', display: 'block' }}
                     />
                   </Button>
                 )}