From 1a3abdefa4d9656b2c1a49e03f85e08987340627 Mon Sep 17 00:00:00 2001
From: Meolocious <90854445+Meolocious@users.noreply.github.com>
Date: Tue, 2 Apr 2024 10:08:45 +0200
Subject: [PATCH] fix: remove custom theme

---
 src/components/Editorial/Ctas.tsx | 104 ++++++++++++++----------------
 1 file changed, 49 insertions(+), 55 deletions(-)

diff --git a/src/components/Editorial/Ctas.tsx b/src/components/Editorial/Ctas.tsx
index 516e8e96..78f06235 100644
--- a/src/components/Editorial/Ctas.tsx
+++ b/src/components/Editorial/Ctas.tsx
@@ -4,7 +4,6 @@ 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;
@@ -12,18 +11,6 @@ interface CtaButtonProps extends Partial<ButtonProps> {
 
 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;
@@ -56,48 +43,55 @@ export const Ctas = ({
 
   if (storeButtons) {
     return (
-      <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>
+      <Stack
+        sx={{
+          flexDirection: 'column',
+          '@media screen and (min-width: 420px)': {
+            flexDirection: 'row-reverse',
+          },
+        }}
+        justifyContent="left"
+        spacing={2}
+        alignItems="baseline"
+      >
+        {storeButtons.hrefGoogle && (
+          <Button
+            sx={{
+              padding: '0px',
+              marginLeft: '0px',
+              '@media screen and (min-width: 420px)': {
+                marginLeft: '16px',
+              },
+              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>
     );
   }