update watermark styling

10 files changed, 53 insertions, 41 deletions

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 99e71ae..a8da469 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import NewPaste from './components/NewPaste'
 import ViewPaste from './components/ViewPaste'
-import Footer from './components/Footer'
 import styled from 'styled-components'
 import {
   BrowserRouter as Router,
@@ -47,7 +46,6 @@ const App = () => {
                   <NewPaste />
                 </Route>
               </Switch>
-              <Footer />
             </Main>
           </Route>
         </Switch>
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index 1074fcb..4afc7ba 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -2,7 +2,9 @@ import React from 'react';
 import styled from 'styled-components'
 
 const SpacedFooter = styled.div`
-    margin: 2em 0;
+    & > p {
+        font-size: 0.8em;
+    }
     & a {
         color: ${p => p.theme.colors.text};
     }
@@ -17,7 +19,7 @@ const Link = (props) => {
 const Footer = () => {
     return (
         <SpacedFooter>
-            <p>(c) 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" /></p>
+            <p>(c) 2020 // <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" /></p>
         </SpacedFooter>
     );
 }
diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js
index 7396ca1..146919a 100644
--- a/frontend/src/components/Form/Button.js
+++ b/frontend/src/components/Form/Button.js
@@ -22,7 +22,7 @@ const Secondary = css`
 `
 
 export const Button = styled.button`
-  ${p => p.secondary ? css`${Primary}` : css`${Secondary}` }
+  ${p => p.secondary ? css`${Secondary}` : css`${Primary}`  }
 `
 
 export const SubmitButton = styled.input`
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index ff2759f..ca338d3 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -46,7 +46,7 @@ export const CodeLike = css`
 export const ButtonLike = css`
   font-family: 'JetBrains Mono', serif;
   font-weight: 700;
-  padding: 0.6em 1.5em;
+  padding: calc(0.6em + 1px) 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 6817db2..0767808 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -5,6 +5,9 @@ import Editor from 'react-simple-code-editor';
 import {Highlighter} from "../renderers/Code";
 import {CodeLike, Hover} from "../Form/mixins";
 
+const Wrapper = styled.div`
+  position: relative;
+`
 const EditorWrapper = styled(Editor)`
   overflow: visible !important;
   
@@ -31,7 +34,7 @@ const EditorWrapper = styled(Editor)`
 
 export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
   return (
-    <div>
+    <Wrapper>
       <EditorWrapper
         name="content"
         readOnly={readOnly}
@@ -46,6 +49,6 @@ export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
       <CharLimit
         content={content}
         maxLength={props.maxLength} />
-    </div>
+    </Wrapper>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 5bc35a2..1420ce9 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -34,7 +34,7 @@ const NewPaste = () =>  {
     const [title, setTitle] = useState('');
     const [content, setContent] = useState('');
     const [pass, setPass] = useState('');
-    const [language, setLanguage] = useState(LANGS.detect);
+    const [language, setLanguage] = useState('detect');
     const [expiry, setExpiry] = useState('');
     const [hash, setHash] = useState('');
     const [isPreview, setIsPreview] = useState(false);
@@ -138,12 +138,15 @@ const NewPaste = () =>  {
                 onPassChange={(e) => { setPass(e.target.value) }} 
                 onLangChange={(e) => { setLanguage(e.target.value) }} 
                 onExpiryChange={(e) => { setExpiry(e.target.value) }} />
-            <SubmitButton type="submit" value="new paste" />
-            {language !== LANGS.detect && <Button
-              type="button"
-              onClick={() => setIsPreview(!isPreview)}>
-              preview
-            </Button>}
+            <div>
+              <SubmitButton type="submit" value="new paste" />
+              {language !== 'detect' && <Button
+                secondary
+                type="button"
+                onClick={() => setIsPreview(!isPreview)}>
+                preview
+              </Button>}
+            </div>
             <br />
             <Error ref={ErrorLabel} />
         </form>
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index eeb79ed..97d3127 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -14,7 +14,6 @@ const Flex = styled.div`
 
     @media (max-width: 850px) {
         float: none !important;
-        transform: translateX(-2em);
     }
 `
 
diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js
index 6ab212b..2f6c8c6 100644
--- a/frontend/src/components/Watermark.js
+++ b/frontend/src/components/Watermark.js
@@ -1,25 +1,32 @@
 import styled from "styled-components";
 import React from "react";
+import Footer from "./Footer";
 
-const Logo = styled.h1`
-  position: fixed;
-  bottom: 0.3em;
-  left: 0.5em;
-  opacity: 0.3;
-  font-size: 50px;
-  margin: 0 0;
-  transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+const Logo = styled.div`
+    position: fixed;
+    bottom: 1em;
+    left: 2em;
+    opacity: 0.3;
+    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+    
+    &:hover {
+        opacity: 1;
+    }
 
-  & > a {
-    text-decoration: none;
-    position: relative;
-    color: ${p => p.theme.colors.text};
-  }
-  
-  &:hover {
-    opacity: 1;
-  }
+    & > h1 {
+        font-size: 50px;
+        margin: 0 0;
+      
+        & > a {
+            text-decoration: none;
+            position: relative;
+            color: ${p => p.theme.colors.text};
+        }
+    }
 `
 export const Watermark = () => <Logo>
-    <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
+    <h1>
+        <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
+    </h1>
+    <Footer />
 </Logo>
\ No newline at end of file
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index fcf14d0..3d1d981 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -18,7 +18,7 @@ const Chars = styled.p`
 
 const CharLimit = (props) => {
     return (
-        <Chars {...props} >{props.maxLength - props.content.length}/{props.maxLength}</Chars>
+        <Chars {...props}>{props.maxLength - props.content.length}/{props.maxLength}</Chars>
     );
 }
 
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index c91bbb4..ff2e639 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -4,6 +4,7 @@ import {LeftPad, ModalHeader, modalStyles, RightPad} from './shared'
 import { useHistory } from 'react-router-dom';
 import { Text } from '../Inputs'
 import { useClipboard } from 'use-clipboard-copy';
+import {Button} from "../Form/Button";
 
 const PasteModal = (props) => {
     const history = useHistory();
@@ -35,17 +36,16 @@ const PasteModal = (props) => {
                             ref={clipboard.target} />
                     </RightPad>
                 <LeftPad>
-                    <button 
-                        className="lt-button lt-shadow lt-hover"
+                    <Button
                         type="submit">
                             view
-                    </button>
-                    <button 
-                        className="lt-button lt-shadow lt-hover"
+                    </Button>
+                    <Button
+                        secondary
                         type="button" 
                         onClick={clipboard.copy}>
                             {clipboard.copied ? 'copied' : 'copy url'}
-                    </button>
+                    </Button>
                 </LeftPad>
             </form>
         </Modal>