Merge pull request #70 from jackyzha0/visual-overhaul

3 files changed, 50 insertions, 75 deletions

diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index bf373cc..a829091 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,19 +1,9 @@
 import React, { useRef } from 'react';
 import Modal from 'react-modal';
-import { PassInput } from '../Inputs'
-import { RightPad, LeftPad, ModalHeader, Padding } from './shared'
+import { Password } from '../Inputs'
+import {ModalHeader, Padding, modalStyles, Form} from './shared'
 import Error from '../Err';
-
-const modalStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '400px',
-        height: '250px',
-        border: '1px solid #11111188'
-    }
-};
+import {SubmitButton} from "../Common/Button";
 
 const PasswordModal = (props) => {
     const ErrorLabel = useRef(null);
@@ -31,21 +21,16 @@ const PasswordModal = (props) => {
             style={modalStyles}
             contentLabel="enter paste password"
         >
-            <form onSubmit={submitPassword}>
-                <LeftPad>
-                    <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
-                </LeftPad>
-                <RightPad>
-                    <PassInput
-                        value={props.value}
-                        onChange={props.onChange} />
-                </RightPad>
-                <LeftPad>
-                    <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
-                    <Padding />
-                    <Error ref={ErrorLabel} />
-                </LeftPad>
-            </form>
+            <Form onSubmit={submitPassword}>
+                <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
+                <Password
+                    placeholder="hunter2"
+                    value={props.value}
+                    onChange={props.onChange} />
+                <SubmitButton type="submit" value="continue" />
+                <Padding />
+                <Error ref={ErrorLabel} />
+            </Form>
         </Modal>
     );
 }
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index 7b28abb..e7dbed2 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -1,20 +1,10 @@
 import React from 'react';
 import Modal from 'react-modal';
-import { LeftPad, ModalHeader, RightPad } from './shared'
+import {Form, ModalHeader, modalStyles} from './shared'
 import { useHistory } from 'react-router-dom';
-import { PasteURLInput } from '../Inputs'
+import { Text } from '../Inputs'
 import { useClipboard } from 'use-clipboard-copy';
-
-const modalStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '500px',
-        height: '250px',
-        border: '1px solid #11111188'
-    }
-};
+import {Button} from "../Common/Button";
 
 const PasteModal = (props) => {
     const history = useHistory();
@@ -34,35 +24,27 @@ const PasteModal = (props) => {
             style={modalStyles}
             contentLabel="paste created"
         >
-            <form onSubmit={redir}>
-                <LeftPad>
-                    <ModalHeader><span role="img" aria-label="success">📎&nbsp;</span>paste created</ModalHeader>
-                </LeftPad>
-                    <RightPad>
-                        <PasteURLInput 
-                            id="paste_modal"
-                            fullURL={fullURL} />
-                        <input 
-                            hidden
-                            type="text"
-                            value={fullURL} 
-                            readOnly
-                            ref={clipboard.target} />
-                    </RightPad>
-                <LeftPad>
-                    <button 
-                        className="lt-button lt-shadow lt-hover"
-                        type="submit">
-                            view
-                    </button>
-                    <button 
-                        className="lt-button lt-shadow lt-hover"
-                        type="button" 
-                        onClick={clipboard.copy}>
-                            {clipboard.copied ? 'copied' : 'copy url'}
-                    </button>
-                </LeftPad>
-            </form>
+            <Form onSubmit={redir}>
+                <ModalHeader>
+                    <span role="img" aria-label="success">📎&nbsp;</span>paste created
+                </ModalHeader>
+                <Text
+                    label="url"
+                    type="text"
+                    value={fullURL}
+                    readOnly
+                    ref={clipboard.target} />
+                <Button
+                    type="submit">
+                        go to paste
+                </Button>
+                <Button
+                    secondary
+                    type="button"
+                    onClick={clipboard.copy}>
+                        {clipboard.copied ? 'copied' : 'copy url'}
+                </Button>
+            </Form>
         </Modal>
     );
 }
diff --git a/frontend/src/components/modals/shared.js b/frontend/src/components/modals/shared.js
index d63be06..0336818 100644
--- a/frontend/src/components/modals/shared.js
+++ b/frontend/src/components/modals/shared.js
@@ -1,11 +1,19 @@
 import styled from 'styled-components'
 
-export const RightPad = styled.div`
-    margin-right: 3em;
-`
+export const modalStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '500px',
+    height: '250px',
+    border: '1px solid #11111188',
+  },
+};
 
-export const LeftPad = styled.div`
-    margin-left: 2em;
+export const Form = styled.form`
+  margin: 2em;
+  margin-right: 3em;
 `
 
 export const ModalHeader = styled.h3`