From 9b59c5967ea79f9d4ba4c852bee2cce8c9a628c0 Mon Sep 17 00:00:00 2001
From: perdi8 <perdi666@gmai.com>
Date: Thu, 28 Jan 2021 10:13:37 +0100
Subject: [PATCH 1/5] updated smaller footer

---
 .../components/footer/footer.styles.ts        |  7 ++++---
 front/static/styles.css                       | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/front/src/common-app/components/footer/footer.styles.ts b/front/src/common-app/components/footer/footer.styles.ts
index ee78f54..0f6a9f8 100644
--- a/front/src/common-app/components/footer/footer.styles.ts
+++ b/front/src/common-app/components/footer/footer.styles.ts
@@ -8,8 +8,8 @@ export const footerContainer = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: ${spacing(37.5)};
-  padding: ${spacing(2.5)} ${spacing(12.5)};
+  height: ${spacing(20.5)};
+  padding: ${spacing(2)} ${spacing(12.5)};
   background-color: ${color.secondary};
   @media (max-width: ${breakpoints.values.md}px) {
     padding: ${spacing(2.5)} ${spacing(5)} ${spacing(3.75)} ${spacing(5)};
@@ -54,7 +54,8 @@ export const bottomContainer = css`
 `;
 
 export const lemoncodeIcon = css`
-  height: ${spacing(12.5)};
+  height: ${spacing(12)};
+  padding-bottom: ${spacing(1)}
 `;
 
 export const iconContainer = css`
diff --git a/front/static/styles.css b/front/static/styles.css
index 2e85771..cc30eae 100644
--- a/front/static/styles.css
+++ b/front/static/styles.css
@@ -569,8 +569,8 @@ form textarea {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 30rem;
-  padding: 2rem 10rem;
+  height: 16rem;
+  padding: 0rem 10rem;
   background-color: var(--color-dark);
 }
 
@@ -604,8 +604,15 @@ form textarea {
 }
 
 .footer__logo {
-  height: 10rem;
-  width: 11.2rem;
+  height: 9rem;
+  width: 10.2rem;
+}
+
+@media only screen and (max-width: 728px) {
+  .footer__logo {
+    height: 9rem;
+    width: 8.5rem;
+  }
 }
 
 .footer__list {
@@ -660,8 +667,8 @@ form textarea {
   top: 0.8rem;
   right: 1.6rem;
   fill: var(--color-light);
-  height: 10rem;
-  width: 10rem;
+  height: 8rem;
+  width: 8rem;
 }
 
 .footer__icon-list {

From 1040048144837e99a6ce24e1b02d2c4ca76be558 Mon Sep 17 00:00:00 2001
From: perdi8 <perdi666@gmai.com>
Date: Tue, 2 Feb 2021 13:59:58 +0100
Subject: [PATCH 2/5] update-small-footer

---
 .../components/footer/footer.component.tsx    |  13 +-
 .../components/footer/footer.styles.ts        |  48 ++-----
 front/src/pods/student/student.component.tsx  |   1 -
 .../pods/trainer/components/session.styles.ts |   1 +
 front/static/index.html                       |   4 +-
 front/static/styles.css                       | 122 +++++-------------
 6 files changed, 54 insertions(+), 135 deletions(-)

diff --git a/front/src/common-app/components/footer/footer.component.tsx b/front/src/common-app/components/footer/footer.component.tsx
index 66ef0de..b0095cf 100644
--- a/front/src/common-app/components/footer/footer.component.tsx
+++ b/front/src/common-app/components/footer/footer.component.tsx
@@ -9,38 +9,37 @@ import LanguageIcon from '@material-ui/icons/Language';
 export const FooterComponent: React.FC = () => {
   const {
     footerContainer,
-    topContainerCenter,
+    logoContainer,
     lemoncodeIcon,
     bottomContainer,
     iconContainer,
-    iconListItem,
     icon,
     githubIcon,
     copyright,
   } = classes;
   return (
     <footer className={footerContainer}>
-      <div className={topContainerCenter}>
+      <div className={logoContainer}>
         <LemoncodeLogo className={lemoncodeIcon} />
       </div>
       <div className={bottomContainer}>
         <ul className={iconContainer}>
-          <li className={iconListItem}>
+          <li>
             <a href="https://github.com/Lemoncode" target="_blank">
               <GithubIcon className={githubIcon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="https://twitter.com/lemoncoders" target="_blank">
               <TwitterIcon className={icon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="https://lemoncode.net/" target="_blank">
               <LanguageIcon className={icon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="mailto:formacion@lemoncode.net" target="_blank">
               <EmailRoundedIcon className={icon} />
             </a>
diff --git a/front/src/common-app/components/footer/footer.styles.ts b/front/src/common-app/components/footer/footer.styles.ts
index 0f6a9f8..ba76e61 100644
--- a/front/src/common-app/components/footer/footer.styles.ts
+++ b/front/src/common-app/components/footer/footer.styles.ts
@@ -8,43 +8,19 @@ export const footerContainer = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: ${spacing(20.5)};
-  padding: ${spacing(2)} ${spacing(12.5)};
   background-color: ${color.secondary};
-  @media (max-width: ${breakpoints.values.md}px) {
-    padding: ${spacing(2.5)} ${spacing(5)} ${spacing(3.75)} ${spacing(5)};
-  }
-  @media (max-width: ${breakpoints.values.xs}px) {
-    height: ${spacing(43.75)};
-  }
 `;
 
-export const topContainer = css`
-  display: flex;
-  justify-content: space-between;
-  height: ${spacing(24.375)};
-  padding: 0 ${spacing(2)};
-  align-items: center;
-  @media (max-width: ${breakpoints.values.xs}px) {
-    flex-direction: column-reverse;
-    justify-content: center;
-    align-items: center;
-    height: ${spacing(27.5)};
-  }
-`;
-
-export const topContainerCenter = css`
+export const logoContainer = css`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: ${spacing(24.375)};
-  padding: 0 ${spacing(2)};
 `;
 
 export const bottomContainer = css`
   display: flex;
   justify-content: space-between;
-  padding-top: ${spacing(2)};
+  padding: ${spacing(3)};
   border-top: 1px solid ${color.primary};
   @media (max-width: ${breakpoints.values.xs}px) {
     flex-direction: column;
@@ -54,24 +30,22 @@ export const bottomContainer = css`
 `;
 
 export const lemoncodeIcon = css`
-  height: ${spacing(12)};
-  padding-bottom: ${spacing(1)}
+  max-width: 100px;
+  padding: ${spacing(3)} 0;
 `;
 
 export const iconContainer = css`
   display: flex;
+  justify-content: space-between;
+  width: 50%;
   margin: 0;
-  padding: 0;
+  padding: 0 0 ${spacing(1)};
   list-style: none;
-`;
-
-export const iconListItem = css`
-  margin-right: ${spacing(1)};
-  &:first-of-type {
-    margin-right: ${spacing(1.4)};
+  @media (min-width: ${breakpoints.values.sm}px) {
+    width: 20%;
   }
-  &:last-of-type {
-    margin-right: 0;
+  @media (min-width: ${breakpoints.values.lg}px) {
+    width: 10%;
   }
 `;
 
diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx
index eaa5db1..c6fbef5 100644
--- a/front/src/pods/student/student.component.tsx
+++ b/front/src/pods/student/student.component.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import * as innerClasses from './student.styles';
-
 interface Props {
   room: string;
   log: string;
diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts
index a2cfd4c..20f666e 100644
--- a/front/src/pods/trainer/components/session.styles.ts
+++ b/front/src/pods/trainer/components/session.styles.ts
@@ -118,3 +118,4 @@ export const undoIcon = css`
     display: initial;
   }
 `;
+
diff --git a/front/static/index.html b/front/static/index.html
index f1751ad..04cb73c 100644
--- a/front/static/index.html
+++ b/front/static/index.html
@@ -405,7 +405,7 @@ <h3>6. NON-WAIVER</h3>
       </div>
     </main>
     <footer class="footer">
-      <div class="footer__top-container">
+      <div class="footer-container">
         <nav>
           <ul class="footer__list">
             <li class="footer__list__item">
@@ -432,7 +432,7 @@ <h3>6. NON-WAIVER</h3>
             </li>
             <li class="footer__icon-list-item">
               <a href="https://twitter.com/lemoncoders" target="_blank">
-                <svg class="footer__icon-twitter">
+                <svg class="footer__icon">
                   <use xlink:href="assets/sprite.svg#twitter-icon"></use>
                 </svg>
               </a>
diff --git a/front/static/styles.css b/front/static/styles.css
index cc30eae..20be485 100644
--- a/front/static/styles.css
+++ b/front/static/styles.css
@@ -568,68 +568,39 @@ form textarea {
 .footer {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  height: 16rem;
-  padding: 0rem 10rem;
+  justify-content: space-around;
   background-color: var(--color-dark);
 }
-
-@media only screen and (max-width: 728px) {
-  .footer {
-    padding: 2rem 4rem 3rem 4rem;
-  }
-}
-
-@media only screen and (max-width: 380px) {
-  .footer {
-    height: 35rem;
-  }
+.footer-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 10rem;
 }
 
-.footer__top-container {
-  padding: 0 2rem;
+.footer__bottom-container {
   display: flex;
   justify-content: space-between;
-  height: 19.5rem;
-  align-items: center;
+  border-top: 1px solid #d9d900;
+  padding: 1.5rem 0 3.5rem 0;
 }
 
 @media only screen and (max-width: 380px) {
-  .footer__top-container {
-    flex-direction: column-reverse;
-    align-items: center;
+  .footer__bottom-container {
+    flex-direction: column;
     justify-content: center;
-    height: 22rem;
-  }
-}
-
-.footer__logo {
-  height: 9rem;
-  width: 10.2rem;
-}
-
-@media only screen and (max-width: 728px) {
-  .footer__logo {
-    height: 9rem;
-    width: 8.5rem;
+    align-items: center;
   }
 }
 
 .footer__list {
-  padding: 0;
-  margin: 0;
+  font-size: 1.5rem;
   list-style: none;
-}
-
-@media only screen and (max-width: 380px) {
-  .footer__list {
-    text-align: center;
-    margin-top: 2.4rem;
-  }
+  padding-top: 4rem;
 }
 
 .footer__list__item {
-  margin-top: 0.5rem;
+  margin-top: 1.5rem;
 }
 
 .footer__list__item a {
@@ -643,47 +614,33 @@ form textarea {
   color: var(--color-primary-main);
 }
 
-.footer__bottom-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid #d9d900;
-  padding-top: 1rem;
-}
-
 @media only screen and (max-width: 380px) {
-  .footer__bottom-container {
-    flex-direction: column;
-    align-items: center;
+  .footer__list {
+    text-align: center;
+    margin-top: 2.4rem;
   }
 }
 
-.footer--logo-lemon-container:hover .footer--logo-lemon {
-  fill: var(--color-secondary-main);
-}
-
-.footer--logo-lemon {
-  position: absolute;
-  top: 0.8rem;
-  right: 1.6rem;
-  fill: var(--color-light);
-  height: 8rem;
-  width: 8rem;
+.footer__logo {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  max-width: 100px;
+  padding: 0.5rem 0;
 }
 
 .footer__icon-list {
   display: flex;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+  padding: 0 5rem;
 }
 
 .footer__icon-list-item {
-  margin-right: 1.2rem;
+  margin-right: 1.5rem;
+  fill: var(--color-grey-light);
 }
-.footer__icon-list-item:last-of-type {
-  margin-right: 0;
+
+.footer__list__item a:hover {
+  color: var(--color-primary-main);
 }
 
 .footer__icon {
@@ -694,25 +651,14 @@ form textarea {
 
 .footer__icon:hover {
   fill: var(--color-primary-main);
-}
-
-.footer__icon-twitter {
-  height: 3.5rem;
-  width: 3.5rem;
-  margin-top: 0.2rem;
-  margin-right: -0.6rem;
-  margin-left: -0.6rem;
-  fill: var(--color-grey-light);
-}
-
-.footer__icon-twitter:hover {
-  fill: var(--color-primary-main);
+  cursor: pointer;
 }
 
 .footer__copyright {
+  font-weight: 400;
+  font-size: 1.5rem;
+  padding: 0 5rem;
   color: var(--color-grey-light);
-  font-weight: 300;
-  font-size: 1.4rem;
 }
 
 @media only screen and (max-width: 578px) {

From cfc5ed3f12020b1738a421184731b06a024c791b Mon Sep 17 00:00:00 2001
From: perdi8 <perdi666@gmai.com>
Date: Thu, 4 Feb 2021 09:34:50 +0100
Subject: [PATCH 3/5] update static footer screen

---
 front/static/styles.css | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/front/static/styles.css b/front/static/styles.css
index 20be485..5b8793f 100644
--- a/front/static/styles.css
+++ b/front/static/styles.css
@@ -571,6 +571,7 @@ form textarea {
   justify-content: space-around;
   background-color: var(--color-dark);
 }
+
 .footer-container {
   display: flex;
   flex-direction: row;
@@ -585,14 +586,6 @@ form textarea {
   padding: 1.5rem 0 3.5rem 0;
 }
 
-@media only screen and (max-width: 380px) {
-  .footer__bottom-container {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 .footer__list {
   font-size: 1.5rem;
   list-style: none;
@@ -614,13 +607,6 @@ form textarea {
   color: var(--color-primary-main);
 }
 
-@media only screen and (max-width: 380px) {
-  .footer__list {
-    text-align: center;
-    margin-top: 2.4rem;
-  }
-}
-
 .footer__logo {
   display: flex;
   justify-content: right;
@@ -660,9 +646,3 @@ form textarea {
   padding: 0 5rem;
   color: var(--color-grey-light);
 }
-
-@media only screen and (max-width: 578px) {
-  .footer__copyright {
-    margin-top: 0.4rem;
-  }
-}

From 2f6f360f3d89839990010ad54e5f1709b0c56dda Mon Sep 17 00:00:00 2001
From: perdi8 <perdi666@gmai.com>
Date: Thu, 4 Feb 2021 11:17:46 +0100
Subject: [PATCH 4/5] Add-download-text-button and bug-ci-github

---
 front/config/test/jest.js                     |  1 +
 .../download-text/download-text.component.tsx | 31 +++++++++++++
 .../download-text/download-text.styles.ts     | 46 +++++++++++++++++++
 .../components/download-text/index.ts         |  1 +
 front/src/common-app/index.ts                 |  1 +
 front/src/pods/student/student.component.tsx  |  5 +-
 .../trainer/components/session.component.tsx  |  3 ++
 front/svgTransform.js                         |  8 ++++
 8 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 front/src/common-app/components/download-text/download-text.component.tsx
 create mode 100644 front/src/common-app/components/download-text/download-text.styles.ts
 create mode 100644 front/src/common-app/components/download-text/index.ts
 create mode 100644 front/svgTransform.js

diff --git a/front/config/test/jest.js b/front/config/test/jest.js
index b5f4557..31b95a0 100644
--- a/front/config/test/jest.js
+++ b/front/config/test/jest.js
@@ -7,5 +7,6 @@ module.exports = {
   modulePathIgnorePatterns: ['cypress'],
   moduleNameMapper: {
     '^.+\\.png$': '<rootDir>/pngTransform.js',
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
   }
 };
diff --git a/front/src/common-app/components/download-text/download-text.component.tsx b/front/src/common-app/components/download-text/download-text.component.tsx
new file mode 100644
index 0000000..77a445b
--- /dev/null
+++ b/front/src/common-app/components/download-text/download-text.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import * as innerClasses from './download-text.styles';
+import Button from '@material-ui/core/Button';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+export const DownloadTxtFile: React.FC = () => {
+  const handleDownloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob(
+      [(document.getElementById('session') as HTMLInputElement).value],
+      {
+        type: 'text/json;charset=utf-8,',
+      }
+    );
+    element.href = URL.createObjectURL(file);
+    element.download = 'Codepaster.txt';
+    document.body.appendChild(element);
+    element.click();
+  };
+
+  return (
+    <Button
+      variant="contained"
+      className={innerClasses.downloadButton}
+      onClick={() => handleDownloadTxtFile()}
+    >
+      <ArrowDownwardIcon className={innerClasses.downloadIcon} />
+      Download File
+    </Button>
+  );
+};
diff --git a/front/src/common-app/components/download-text/download-text.styles.ts b/front/src/common-app/components/download-text/download-text.styles.ts
new file mode 100644
index 0000000..8844f64
--- /dev/null
+++ b/front/src/common-app/components/download-text/download-text.styles.ts
@@ -0,0 +1,46 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+const { typography, spacing, palette, breakpoints } = theme;
+const color = palette.customPalette;
+
+export const downloadButton = css`
+  grid-area: span;
+  display: flex;
+  align-items: center;
+  padding: ${spacing(1.25)} ${spacing(1.875)};
+  font-size: 1.188rem;
+  font-weight: 400;
+  text-transform: capitalize;
+  color: ${color.primary};
+  background-color: white;
+  border-radius: 0;
+  border: 2px solid ${color.primary};
+  transition: all 0.2s;
+  &:hover,
+  &:active {
+    color: white;
+    background-color: ${color.primary};
+    border: 2px solid ${color.primary};
+    outline: none;
+  }
+  @media (max-width: ${breakpoints.values.xs}px) {
+    color: white;
+    background-color: ${color.primary};
+    border: none;
+    &:hover,
+    &:active {
+      background-color: ${color.primary};
+      border: none;
+    }
+  }
+`;
+
+export const downloadIcon = css`
+  margin-right: ${spacing(1.25)};
+  font-size: 1.25rem;
+  display: none;
+  @media (min-width: ${breakpoints.values.xs}px) {
+    display: initial;
+  }
+`;
diff --git a/front/src/common-app/components/download-text/index.ts b/front/src/common-app/components/download-text/index.ts
new file mode 100644
index 0000000..b03a8e8
--- /dev/null
+++ b/front/src/common-app/components/download-text/index.ts
@@ -0,0 +1 @@
+export * from './download-text.component'
diff --git a/front/src/common-app/index.ts b/front/src/common-app/index.ts
index ce2cae9..b66055e 100644
--- a/front/src/common-app/index.ts
+++ b/front/src/common-app/index.ts
@@ -1,2 +1,3 @@
 export * from './components/appbar';
 export * from './components/footer';
+export * from './components/download-text';
diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx
index c6fbef5..55b7e76 100644
--- a/front/src/pods/student/student.component.tsx
+++ b/front/src/pods/student/student.component.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import * as innerClasses from './student.styles';
+import { DownloadTxtFile } from 'common-app';
+
 interface Props {
   room: string;
   log: string;
 }
 
-export const StudentComponent: React.FC<Props> = props => {
+export const StudentComponent: React.FC<Props> = (props) => {
   const { room, log } = props;
 
   return (
@@ -29,6 +31,7 @@ export const StudentComponent: React.FC<Props> = props => {
         className={innerClasses.textarea}
         value={log ?? ''}
       />
+      <DownloadTxtFile />
     </main>
   );
 };
diff --git a/front/src/pods/trainer/components/session.component.tsx b/front/src/pods/trainer/components/session.component.tsx
index 5216240..70c5600 100644
--- a/front/src/pods/trainer/components/session.component.tsx
+++ b/front/src/pods/trainer/components/session.component.tsx
@@ -5,6 +5,7 @@ import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
 import UndoIcon from '@material-ui/icons/Undo';
 import Button from '@material-ui/core/Button';
 import * as innerClasses from './session.styles';
+import { DownloadTxtFile } from 'common-app';
 
 interface Props {
   log: string;
@@ -66,6 +67,8 @@ export const SessionComponent: React.FC<Props> = props => {
         Send Full Content
         <ArrowForwardRoundedIcon className={innerClasses.sendIcon} />
       </Button>
+
+      <DownloadTxtFile />
     </form>
   );
 };
diff --git a/front/svgTransform.js b/front/svgTransform.js
new file mode 100644
index 0000000..094c8e4
--- /dev/null
+++ b/front/svgTransform.js
@@ -0,0 +1,8 @@
+const createReactClass = require('create-react-class');
+
+const Greeting = createReactClass({
+  render: function() {
+    return null;
+  }
+});
+module.exports = Greeting;

From 3fe6735c7629f0f21bbe9883bef8d2dbfcb3eb07 Mon Sep 17 00:00:00 2001
From: perdi8 <perdi666@gmai.com>
Date: Thu, 4 Feb 2021 11:22:57 +0100
Subject: [PATCH 5/5] update bug ci and download text button

---
 front/svgTransform.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/front/svgTransform.js b/front/svgTransform.js
index 094c8e4..e69de29 100644
--- a/front/svgTransform.js
+++ b/front/svgTransform.js
@@ -1,8 +0,0 @@
-const createReactClass = require('create-react-class');
-
-const Greeting = createReactClass({
-  render: function() {
-    return null;
-  }
-});
-module.exports = Greeting;