Updated smaller footer

front/config/test/jest.js

@@ -7,5 +7,6 @@ module.exports = {
   modulePathIgnorePatterns: ['cypress'],
   moduleNameMapper: {
     '^.+\\.png$': '<rootDir>/pngTransform.js',
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
   }
 };

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>
+  );
+};

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;
+  }
+`;

front/src/common-app/components/download-text/index.ts

@@ -0,0 +1 @@
+export * from './download-text.component'

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:[email protected]" target="_blank">
               <EmailRoundedIcon className={icon} />
             </a>

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(37.5)};
-  padding: ${spacing(2.5)} ${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,23 +30,22 @@ export const bottomContainer = css`
 `;
 
 export const lemoncodeIcon = css`
-  height: ${spacing(12.5)};
+  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%;
   }
 `;
 

front/src/common-app/index.ts

@@ -1,2 +1,3 @@
 export * from './components/appbar';
 export * from './components/footer';
+export * from './components/download-text';

front/src/pods/student/student.component.tsx

@@ -2,13 +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 (
@@ -30,6 +31,7 @@ export const StudentComponent: React.FC<Props> = props => {
         className={innerClasses.textarea}
         value={log ?? ''}
       />
+      <DownloadTxtFile />
     </main>
   );
 };

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>
   );
 };

front/src/pods/trainer/components/session.styles.ts

@@ -118,3 +118,4 @@ export const undoIcon = css`
     display: initial;
   }
 `;
+

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>