From 685ff9aecd1a5dd156939d242b65ccae674556cf Mon Sep 17 00:00:00 2001
From: MTeresaMB <milanesteresa@gmail.com>
Date: Fri, 7 Jul 2023 19:40:55 +0200
Subject: [PATCH 1/4] add new export buttons

---
 .../template-export.component.tsx             | 34 ++++++++++++++-----
 .../template-export/template-export.styles.ts | 31 +++++++++++++++++
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/apps/react-app/src/pods/template-export/template-export.component.tsx b/apps/react-app/src/pods/template-export/template-export.component.tsx
index f041f9ce..b056c9f9 100644
--- a/apps/react-app/src/pods/template-export/template-export.component.tsx
+++ b/apps/react-app/src/pods/template-export/template-export.component.tsx
@@ -32,14 +32,32 @@ export const TemplateExport: React.FC<Props> = props => {
           placeholder="Pega aquí tu JSON en formato MAC"
           className={classes.textarea}
         ></textarea>
-        <Button
-          disabled={text ? false : true}
-          onClick={handleOnExport}
-          className={classes.buttonClass}
-          showIcon={false}
-        >
-          Export
-        </Button>
+        <div className={classes.buttonContainer}>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleOnExport}
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To Word
+          </Button>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleOnExport} /* TODO functionality for Markdown export */
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To Markdwon
+          </Button>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleOnExport} /* TODO functionality for HTML export */
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To HTML
+          </Button>
+        </div>
       </div>
       <Footer />
     </div>
diff --git a/apps/react-app/src/pods/template-export/template-export.styles.ts b/apps/react-app/src/pods/template-export/template-export.styles.ts
index fbccce69..0a914d6d 100644
--- a/apps/react-app/src/pods/template-export/template-export.styles.ts
+++ b/apps/react-app/src/pods/template-export/template-export.styles.ts
@@ -48,7 +48,38 @@ export const textarea = css`
   color: ${theme.palette.light[700]};
 `;
 
+export const buttonContainer = css `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: ${theme.spacing(4)};
+  width: 100%;
+
+  @media (max-width: 1024px) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    gap: ${theme.spacing(4)};
+  }
+
+  @media (max-width: 725px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: ${theme.spacing(4)};
+  }
+`;
+
 export const buttonClass = css`
   width: 50%;
   cursor: pointer;
+
+  @media (max-width: 725px) {
+    width: 100%;
+  }
 `;
+

From 173dfde186a0abd960c6e11fc4f09688f543d653 Mon Sep 17 00:00:00 2001
From: MTeresaMB <milanesteresa@gmail.com>
Date: Mon, 10 Jul 2023 11:22:56 +0200
Subject: [PATCH 2/4] delete button export html

---
 .../pods/template-export/template-export.component.tsx    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/react-app/src/pods/template-export/template-export.component.tsx b/apps/react-app/src/pods/template-export/template-export.component.tsx
index b056c9f9..60df2cb9 100644
--- a/apps/react-app/src/pods/template-export/template-export.component.tsx
+++ b/apps/react-app/src/pods/template-export/template-export.component.tsx
@@ -49,14 +49,6 @@ export const TemplateExport: React.FC<Props> = props => {
           >
             Export To Markdwon
           </Button>
-          <Button
-            disabled={text ? false : true}
-            onClick={handleOnExport} /* TODO functionality for HTML export */
-            className={classes.buttonClass}
-            showIcon={false}
-          >
-            Export To HTML
-          </Button>
         </div>
       </div>
       <Footer />

From 85ed5d72a14a8110810abc0fb73c4b88d4e97db2 Mon Sep 17 00:00:00 2001
From: MTeresaMB <milanesteresa@gmail.com>
Date: Mon, 10 Jul 2023 11:29:00 +0200
Subject: [PATCH 3/4] fix styles @media

---
 .../src/pods/template-export/template-export.styles.ts     | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/apps/react-app/src/pods/template-export/template-export.styles.ts b/apps/react-app/src/pods/template-export/template-export.styles.ts
index 0a914d6d..3fdcd39d 100644
--- a/apps/react-app/src/pods/template-export/template-export.styles.ts
+++ b/apps/react-app/src/pods/template-export/template-export.styles.ts
@@ -56,21 +56,14 @@ export const buttonContainer = css `
   width: 100%;
 
   @media (max-width: 1024px) {
-    display: flex;
     flex-direction: column;
-    width: 100%;
     justify-content: center;
     align-items: center;
-    gap: ${theme.spacing(4)};
   }
 
   @media (max-width: 725px) {
-    display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: ${theme.spacing(4)};
   }
 `;
 

From e7314ed87ee5e35742c67ba777276ea3a82df3c4 Mon Sep 17 00:00:00 2001
From: MTeresaMB <milanesteresa@gmail.com>
Date: Mon, 10 Jul 2023 13:26:09 +0200
Subject: [PATCH 4/4] fix @media

---
 .../src/pods/template-export/template-export.styles.ts     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/react-app/src/pods/template-export/template-export.styles.ts b/apps/react-app/src/pods/template-export/template-export.styles.ts
index 3fdcd39d..1f94a2e4 100644
--- a/apps/react-app/src/pods/template-export/template-export.styles.ts
+++ b/apps/react-app/src/pods/template-export/template-export.styles.ts
@@ -55,15 +55,10 @@ export const buttonContainer = css `
   gap: ${theme.spacing(4)};
   width: 100%;
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
   @media (max-width: 725px) {
     flex-direction: column;
     justify-content: center;
+    align-items: center;
   }
 `;