Merge pull request #80 from Siddhant-K-code/master

4 files changed, 104 insertions, 85 deletions

diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index 4afc7ba..b487e6e 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -1,27 +1,32 @@
-import React from 'react';
-import styled from 'styled-components'
+import React from "react";
+import styled from "styled-components";
 
 const SpacedFooter = styled.div`
-    & > p {
-        font-size: 0.8em;
-    }
-    & a {
-        color: ${p => p.theme.colors.text};
-    }
-`
+  & > p {
+    font-size: 0.8em;
+  }
+  & a {
+    color: ${(p) => p.theme.colors.text};
+  }
+`;
 
 const Link = (props) => {
-    return (
-        <a href={props.link} target="_blank" rel="noopener noreferrer">{props.name}</a>
-    );
-}
+  return (
+    <a href={props.link} target="_blank" rel="noopener noreferrer">
+      {props.name}
+    </a>
+  );
+};
 
 const Footer = () => {
-    return (
-        <SpacedFooter>
-            <p>(c) 2020 // <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" /></p>
-        </SpacedFooter>
-    );
-}
+  return (
+    <SpacedFooter>
+      <p>
+        (c) 2021 // <Link link="https://jzhao.xyz/" name="jacky" />,{" "}
+        <Link link="https://ryanmehri.tech/" name="ryan" />
+      </p>
+    </SpacedFooter>
+  );
+};
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
index 099aae4..c242b45 100644
--- a/frontend/src/components/Inputs/Password.js
+++ b/frontend/src/components/Inputs/Password.js
@@ -1,14 +1,17 @@
 import React from "react";
-import {Labelled} from "../decorators/Labelled";
-import {Input} from "../Common/Input";
+import { Labelled } from "../decorators/Labelled";
+import { Input } from "../Common/Input";
 
-export const Password = (props) => <Labelled label="password">
-  <Input
-    name="pass"
-    placeholder={props.placeholder ?? "add password"}
-    type="password"
-    autoComplete="off"
-    onChange={props.onChange}
-    value={props.value}
-    id={props.id} />
-</Labelled>
\ No newline at end of file
+export const Password = (props) => (
+  <Labelled label="password">
+    <Input
+      name="pass"
+      placeholder={props.placeholder ?? "add password"}
+      type="password"
+      autoComplete="off"
+      onChange={props.onChange}
+      value={props.value}
+      id={props.id}
+    />
+  </Labelled>
+);
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index 97d3127..3c55a20 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -1,39 +1,41 @@
-import React from 'react';
-import styled from 'styled-components'
-import { Password, Expiry, Language } from './Inputs'
+import React from "react";
+import styled from "styled-components";
+import { Password, Expiry, Language } from "./Inputs";
 
 const Flex = styled.div`
-    float: right;
-    display: flex;
-    flex-direction: row;
-    transform: translateY(0.2em);
-    
+  float: right;
+  display: flex;
+  flex-direction: row;
+  transform: translateY(0.2em);
+
+  @media (min-width: 650px) {
     & > *:not(:first-child) {
       margin-left: 2em;
     }
+  }
 
-    @media (max-width: 850px) {
-        float: none !important;
-    }
-`
+  @media (max-width: 650px) {
+    position: relative;
+    float: none !important;
+    flex-direction: column;
+  }
+`;
 
-const OptionsContainer = ({pass, lang, expiry, onPassChange, onLangChange, onExpiryChange}) => {
-    return (
-        <Flex>
-            <Password
-                value={pass}
-                onChange={onPassChange}
-                id="passwordInput" />
-            <Language
-                value={lang}
-                onChange={onLangChange}
-                id="langInput" />
-            <Expiry
-                value={expiry}
-                onChange={onExpiryChange}
-                id="expiryInput" />
-        </Flex>
-    );
-}
+const OptionsContainer = ({
+  pass,
+  lang,
+  expiry,
+  onPassChange,
+  onLangChange,
+  onExpiryChange,
+}) => {
+  return (
+    <Flex>
+      <Password value={pass} onChange={onPassChange} id="passwordInput" />
+      <Language value={lang} onChange={onLangChange} id="langInput" />
+      <Expiry value={expiry} onChange={onExpiryChange} id="expiryInput" />
+    </Flex>
+  );
+};
 
-export default OptionsContainer
\ No newline at end of file
+export default OptionsContainer;
diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js
index 2f6c8c6..60c0407 100644
--- a/frontend/src/components/Watermark.js
+++ b/frontend/src/components/Watermark.js
@@ -3,30 +3,39 @@ import React from "react";
 import Footer from "./Footer";
 
 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;
-    }
+  position: fixed;
+  bottom: 1em;
+  left: 2em;
+  opacity: 0.3;
+  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &:hover {
+    opacity: 1;
+  }
 
-    & > h1 {
-        font-size: 50px;
-        margin: 0 0;
-      
-        & > a {
-            text-decoration: none;
-            position: relative;
-            color: ${p => p.theme.colors.text};
-        }
+  & > h1 {
+    font-size: 50px;
+    margin: 0 0;
+
+    & > a {
+      text-decoration: none;
+      position: relative;
+      color: ${(p) => p.theme.colors.text};
     }
-`
-export const Watermark = () => <Logo>
+  }
+
+  @media (max-width: 960px) {
+    position: relative;
+    display: grid;
+    left: -6em;
+    font-size: 10px;
+  }
+`;
+export const Watermark = () => (
+  <Logo>
     <h1>
-        <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
+      <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
     </h1>
     <Footer />
-</Logo>
\ No newline at end of file
+  </Logo>
+);