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$': '/pngTransform.js', + '^.+\\.svg$': '/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 ( + + ); +}; 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/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 (