From cf59188dff4526a358d0386f8113f542e24fffc2 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 09:44:00 -0800
Subject: add more css mixins

---
 frontend/src/components/Form/Input.js              |  2 +-
 frontend/src/components/Form/mixins.js             | 10 ++++++++
 frontend/src/components/Inputs/Code.js             |  2 +-
 frontend/src/components/Inputs/Dropdown.js         |  2 +-
 frontend/src/components/Inputs/Password.js         |  2 +-
 frontend/src/components/Inputs/Text.js             |  2 +-
 frontend/src/components/Inputs/shared.js           | 10 --------
 frontend/src/components/NewPaste.js                |  2 +-
 .../src/components/decorators/FloatingLabel.js     | 22 ----------------
 frontend/src/components/decorators/Labelled.js     | 30 ++++++++++++++++++++++
 10 files changed, 46 insertions(+), 38 deletions(-)
 delete mode 100644 frontend/src/components/Inputs/shared.js
 delete mode 100644 frontend/src/components/decorators/FloatingLabel.js
 create mode 100644 frontend/src/components/decorators/Labelled.js

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js
index e000cfb..7c9e413 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Form/Input.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {Border, DropShadow, InputLike, Rounded} from "./mixins";
+import {Border, DropShadow, InputLike, Rounded, Transition} from "./mixins";
 
 export const Input = styled.input`
   ${Border}
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index 38ea394..64b7cc0 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -4,6 +4,15 @@ export const DropShadow = css`
   box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02);
 `
 
+export const Hover = css`
+  opacity: 0.5;
+  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+  
+  &:focus, &:hover, &:focus span {
+    opacity: 1;
+  }
+`
+
 export const Rounded = css`
   border-radius: 3px;
 `
@@ -13,6 +22,7 @@ export const Border = css`
 `
 
 export const InputLike = css`
+  ${Hover}
   font-family: 'JetBrains Mono', monospace;
   width: 100%;
   font-size: 0.8em;
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index 0fd6240..67b3f76 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from "react";
 import * as indentation from "indent-textarea";
 import CharLimit from "../decorators/CharLimit";
-import {Labelled} from "./shared";
+import {Labelled} from "../decorators/Labelled";
 
 export const Code = ({content, ...props}) => {
   const textInput = useRef(null);
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index 9f7c246..1c2e0b7 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -2,7 +2,7 @@ import Dropdown from "react-dropdown";
 import React from "react";
 import styled from 'styled-components';
 import {LANGS, THEMES} from "../renderers/Code";
-import {Labelled} from "./shared";
+import {Labelled} from "../decorators/Labelled";
 import {Border, DropShadow, InputLike, Rounded} from "../Form/mixins";
 
 const StyledDropdown = styled(Dropdown)`
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
index ca00f27..6c37d3c 100644
--- a/frontend/src/components/Inputs/Password.js
+++ b/frontend/src/components/Inputs/Password.js
@@ -1,5 +1,5 @@
 import React from "react";
-import {Labelled} from "./shared";
+import {Labelled} from "../decorators/Labelled";
 import {Input} from "../Form/Input";
 
 export const Password = (props) => <Labelled label="password">
diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js
index 0a26d42..514ab78 100644
--- a/frontend/src/components/Inputs/Text.js
+++ b/frontend/src/components/Inputs/Text.js
@@ -1,6 +1,6 @@
 import CharLimit from "../decorators/CharLimit";
 import React from "react";
-import {Labelled} from "./shared";
+import {Labelled} from "../decorators/Labelled";
 import {Input} from "../Form/Input";
 
 export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => {
diff --git a/frontend/src/components/Inputs/shared.js b/frontend/src/components/Inputs/shared.js
deleted file mode 100644
index 2f6ee3f..0000000
--- a/frontend/src/components/Inputs/shared.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "styled-components";
-import React from "react";
-import FloatingLabel from "../decorators/FloatingLabel";
-
-export const Labelled = ({label, value, children}) => <div>
-  <FloatingLabel label={label} value={value} >
-    <span>{label}</span>
-    {children}
-  </FloatingLabel>
-</div>
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index f741c7e..419f39d 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -128,6 +128,7 @@ const NewPaste = () =>  {
                 label="title"
                 onChange={(e) => {setTitle(e.target.value)}}
                 value={title}
+                autoFocus
                 maxLength="100"
                 id="titleInput" />
             {renderPreview()}
@@ -140,7 +141,6 @@ const NewPaste = () =>  {
                 onExpiryChange={(e) => { setExpiry(e.target.value) }} />
             <SubmitButton type="submit" value="new paste" />
             <Button
-                className="lt-shadow lt-hover"
                 type="button"
                 onClick={() => setIsPreview(!isPreview)}>
                 preview
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
deleted file mode 100644
index ddd963d..0000000
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-
-const StyledLabel = styled.label`
-  position: relative;
-  & > span {
-    position: absolute;
-    transform: translateY(-0.2em);
-    font-weight: 700;
-    font-size: 1em;
-    opacity: 0.5;
-    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
-  }
-  
-  &:hover > span {
-    opacity: 1;
-  }
-`
-
-export default (props) => <StyledLabel label={props.label}>
-  {props.children}
-</StyledLabel>
diff --git a/frontend/src/components/decorators/Labelled.js b/frontend/src/components/decorators/Labelled.js
new file mode 100644
index 0000000..0d7fe39
--- /dev/null
+++ b/frontend/src/components/decorators/Labelled.js
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import React from "react";
+
+const StyledLabel = styled.label`
+  position: relative;
+  & > span {
+    position: absolute;
+    transform: translateY(-0.2em);
+    font-weight: 700;
+    font-size: 1em;
+    opacity: 0.5;
+    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+  }
+  
+  &:hover > span {
+    opacity: 1;
+  }
+`
+
+const FloatingLabel = (props) => <StyledLabel label={props.label}>
+  {props.children}
+</StyledLabel>
+
+
+export const Labelled = ({label, value, children}) => <div>
+  <FloatingLabel label={label} value={value} >
+    <span>{label}</span>
+    {children}
+  </FloatingLabel>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3