fix: upload assets and update Ctas.tsx file

pagopa · Mar 14, 2024 · f2f07b4 · f2f07b4
1 parent e2e57b2
commit f2f07b4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 24 deletions.
diff --git a/src/assets/images/app-store-badge.png b/src/assets/images/app-store-badge.png
diff --git a/src/assets/images/google-play-badge.png b/src/assets/images/google-play-badge.png
diff --git a/src/components/Editorial/Ctas.tsx b/src/components/Editorial/Ctas.tsx
@@ -2,13 +2,28 @@ import Button, { type ButtonProps } from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import { isValidElement } from 'react';
 import { type CommonProps } from 'types/components';
+import appleBadge from '../../assets/images/app-store-badge.png';
+import googleBadge from '../../assets/images/google-play-badge.png';
+import { ThemeProvider, createTheme } from '@mui/material';
 
 interface CtaButtonProps extends Partial<ButtonProps> {
   text: string;
 }
 
 type CtaButton = CtaButtonProps | JSX.Element;
 
+const customTheme = createTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 420,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 export interface StoreButtonsProps {
   hrefGoogle?: string;
   hrefApple?: string;
@@ -41,30 +56,48 @@ export const Ctas = ({
 
   if (storeButtons) {
     return (
-      <Stack
-        direction={{ md: 'row-reverse', xs: 'row' }}
-        justifyContent="left"
-        spacing={2}
-      >
-        {storeButtons.hrefGoogle && (
-          <Button
-            sx={{ width: { md: 'auto', xs: '100%' } }}
-            key="google"
-            href={storeButtons.hrefGoogle}
-          >
-            Google Play
-          </Button>
-        )}
-        {storeButtons.hrefApple && (
-          <Button
-            sx={{ width: { md: 'auto', xs: '100%' } }}
-            key="apple"
-            href={storeButtons.hrefApple}
-          >
-            App Store
-          </Button>
-        )}
-      </Stack>
+      <ThemeProvider theme={customTheme}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row-reverse' }}
+          justifyContent="left"
+          spacing={2}
+        >
+          {storeButtons.hrefGoogle && (
+            <Button
+              sx={{
+                padding: '0px',
+                margin: '0px',
+                justifyContent: 'start',
+              }}
+              key="google"
+              href={storeButtons.hrefGoogle}
+            >
+              <img
+                src={googleBadge}
+                alt="Download on the App Store"
+                style={{ height: '3em' }}
+              />
+            </Button>
+          )}
+          {storeButtons.hrefApple && (
+            <Button
+              sx={{
+                padding: '0px',
+                margin: '0px',
+                justifyContent: 'start',
+              }}
+              key="apple"
+              href={storeButtons.hrefApple}
+            >
+              <img
+                src={appleBadge}
+                alt="Download on the App Store"
+                style={{ height: '3em' }}
+              />
+            </Button>
+          )}
+        </Stack>
+      </ThemeProvider>
     );
   }