add more css mixins

9 files changed, 27 insertions, 19 deletions

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/Labelled.js
index ddd963d..0d7fe39 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/Labelled.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components'
+import styled from "styled-components";
+import React from "react";
 
 const StyledLabel = styled.label`
   position: relative;
@@ -17,6 +17,14 @@ const StyledLabel = styled.label`
   }
 `
 
-export default (props) => <StyledLabel label={props.label}>
+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