refactor form -> common

14 files changed, 24 insertions, 35 deletions

diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Common/Button.js
index 290e52a..290e52a 100644
--- a/frontend/src/components/Form/Button.js
+++ b/frontend/src/components/Common/Button.js
diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Common/Input.js
index e000cfb..e000cfb 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Common/Input.js
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Common/mixins.js
index ca338d3..ff2759f 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Common/mixins.js
@@ -46,7 +46,7 @@ export const CodeLike = css`
 export const ButtonLike = css`
   font-family: 'JetBrains Mono', serif;
   font-weight: 700;
-  padding: calc(0.6em + 1px) 1.5em;
+  padding: 0.6em 1.5em;
   margin: 2em 0;
   outline: 0;
 `
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index 0767808..adb1536 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import CharLimit from "../decorators/CharLimit";
 import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
-import {CodeLike, Hover} from "../Form/mixins";
+import {CodeLike, Hover} from "../Common/mixins";
 
 const Wrapper = styled.div`
   position: relative;
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index 27106dc..7166681 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -3,7 +3,7 @@ import React from "react";
 import styled from 'styled-components';
 import {LANGS, THEMES} from "../renderers/Code";
 import {Labelled} from "../decorators/Labelled";
-import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins";
+import {Border, DropShadow, InputLike, Rounded} from "../Common/mixins";
 
 const StyledDropdown = styled(Dropdown)`
   ${Border}
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
index 6394dd2..6877574 100644
--- a/frontend/src/components/Inputs/Password.js
+++ b/frontend/src/components/Inputs/Password.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {Labelled} from "../decorators/Labelled";
-import {Input} from "../Form/Input";
+import {Input} from "../Common/Input";
 
 export const Password = (props) => <Labelled label="password">
   <Input
diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js
index 514ab78..600e653 100644
--- a/frontend/src/components/Inputs/Text.js
+++ b/frontend/src/components/Inputs/Text.js
@@ -1,7 +1,7 @@
 import CharLimit from "../decorators/CharLimit";
 import React from "react";
 import {Labelled} from "../decorators/Labelled";
-import {Input} from "../Form/Input";
+import {Input} from "../Common/Input";
 
 export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => {
   return (
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 1420ce9..b322351 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -4,12 +4,11 @@ import OptionsContainer from './Options'
 import Error from './Err'
 import { PostNewPaste } from '../helpers/httpHelper'
 import PasteModal from './modals/PasteModal'
-import { LANGS } from './renderers/Code'
 import styled from 'styled-components'
 import CodeRenderer from './renderers/Code'
 import Latex from './renderers/Latex'
 import Markdown from './renderers/Markdown'
-import {Button, SubmitButton} from "./Form/Button";
+import {Button, SubmitButton} from "./Common/Button";
 
 const Flex = styled.div`
     display: flex;
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 114d0e1..cb48b20 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { useHistory } from 'react-router-dom';
 import { Theme } from './Inputs'
 import { exportComponentAsPNG } from "react-component-export-image";
+import {Button} from "./Common/Button";
 
 const Bold = styled.span`
     font-weight: 700
@@ -13,14 +14,11 @@ const StyledDiv = styled.div`
     margin: 2em 0;
 `
 
-const Button = styled.button`
-    margin-right: 0 !important;
-    margin-left: 2em !important;
-    height: calc(16px + 1.6em);
+const ShiftedButton = styled(Button)`
     margin-top: 1.6em !important;
 `
 
-const SpacedText = styled.span`
+const SpacedText = styled.p`
     margin-right: 1em;
 `
 
@@ -28,7 +26,6 @@ const Flex = styled.div`
     float: right;
     display: flex;
     flex-direction: row;
-    transform: translateY(0.2em);
 `
 
 const PasteInfo = (props) => {
@@ -42,12 +39,12 @@ const PasteInfo = (props) => {
         const buttonTxt = props.isRenderMode ? 'text' : 'render'
         if (props.lang === 'latex' || props.lang === 'markdown') {
             return (
-                <Button
-                    className="lt-shadow lt-hover"
+                <ShiftedButton
+                    secondary
                     type="button"
                     onClick={props.toggleRenderCallback}>
                     {buttonTxt}
-                </Button>
+                </ShiftedButton>
             );
         }
     }
@@ -55,18 +52,18 @@ const PasteInfo = (props) => {
     return (
         <div>
             <Flex>
-                <Button
-                    className="lt-shadow lt-hover"
+                <ShiftedButton
+                    secondary
                     type="button"
                     onClick={redirRaw}>
                     view raw
-                </Button>
-                <Button
-                    className="lt-shadow lt-hover"
+                </ShiftedButton>
+                <ShiftedButton
+                    secondary
                     type="button"
                     onClick={() => exportComponentAsPNG(props.compref, `paste-${props.hash}.png`)}>
                     save png
-                </Button>
+                </ShiftedButton>
                 {renderable()}
                 <Theme
                     value={props.theme}
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index dc8eab5..55d26f7 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -7,7 +7,6 @@ import PasswordModal from './modals/PasswordModal'
 import { FetchPaste, FetchPasswordPaste } from '../helpers/httpHelper'
 import { LANGS } from './renderers/Code'
 import RenderDispatch from './renderers/RenderDispatch'
-import MetaTags from 'react-meta-tags';
 
 function fmtDateStr(dateString) {
     const d = new Date(dateString)
@@ -120,10 +119,6 @@ const ViewPaste = (props) => {
 
     return (
         <div>
-            <MetaTags>
-                <meta name="description" content={`${language}, expires ${expiry}. hosted on ctrl-v`} />
-                <meta property="og:title" content={title} />
-            </MetaTags>
             <PasswordModal
                 hasPass={hasPass}
                 validPass={validPass}
diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index 64e984b..813c1e3 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import Modal from 'react-modal';
 import { Password } from '../Inputs'
-import {RightPad, LeftPad, ModalHeader, Padding, modalStyles, Form} from './shared'
+import {ModalHeader, Padding, modalStyles, Form} from './shared'
 import Error from '../Err';
 
 const PasswordModal = (props) => {
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index a6d637f..e7dbed2 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import Modal from 'react-modal';
-import {Form, LeftPad, ModalHeader, modalStyles, RightPad} from './shared'
+import {Form, ModalHeader, modalStyles} from './shared'
 import { useHistory } from 'react-router-dom';
 import { Text } from '../Inputs'
 import { useClipboard } from 'use-clipboard-copy';
-import {Button} from "../Form/Button";
+import {Button} from "../Common/Button";
 
 const PasteModal = (props) => {
     const history = useHistory();
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index d110f79..5c8457c 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -3,7 +3,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import styled from 'styled-components'
-import {Border, CodeLike, DropShadow, Hover, Rounded} from "../Form/mixins";
+import {Border, CodeLike, DropShadow, Rounded} from "../Common/mixins";
 
 export const THEMES = Object.freeze({
     'atom': atomOneLight,
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index d4dc830..182bfff 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
+import {CodeLike} from "../Common/mixins";
 
 const RawText = styled.pre`
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    line-height: initial;
-    font-size: 0.8em;
+    ${CodeLike}
     padding: 0 1em;
 `