From 7a671bc96ef06df3da3d2dce3caca559f32c6627 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 23:12:28 -0800
Subject: text area styling

---
 frontend/src/components/Form/Input.js              |  9 +++-
 frontend/src/components/Form/mixins.js             | 25 +++++-----
 frontend/src/components/Inputs/Code.js             | 40 ++++++++-------
 frontend/src/components/Inputs/Dropdown.js         | 57 +++++++++++++++++++---
 frontend/src/components/Inputs/Password.js         |  4 +-
 frontend/src/components/Inputs/Text.js             |  4 +-
 frontend/src/components/Inputs/shared.js           | 24 +++------
 frontend/src/components/Watermark.js               |  1 -
 .../src/components/decorators/FloatingLabel.js     | 44 +++++++----------
 9 files changed, 115 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js
index 86af7d1..4dbc002 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Form/Input.js
@@ -1,3 +1,10 @@
-import {RelPositioning} from "../Inputs/shared";
 import React from "react";
+import styled from 'styled-components'
+import {Border, DropShadow, InputLike, Rounded} from "./mixins";
 
+export const Input = styled.input`
+  ${Border}
+  ${Rounded}
+  ${DropShadow}
+  ${InputLike}
+`
\ No newline at end of file
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index dd26f7e..55d6259 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -1,16 +1,22 @@
 import {css} from 'styled-components';
 
-export const Dropshadow = css`
+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 Rounded = css`
+  border-radius: 3px;
+`
+
+export const Border = css`
+  border: 1px solid ${p => p.theme.colors.border};
+`
+
 export const InputLike = css`
-  width: 100%;
   font-family: 'JetBrains Mono', monospace;
+  width: 100%;
   font-size: 0.8em;
-  padding: calc(0.8em - 1px);
-  border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.border};
+  padding: 0.6em;
   outline: none;
   margin: 1.7em 0;
 `
@@ -21,13 +27,4 @@ export const ButtonLike = css`
   padding: 0.8em 2em;
   margin: 2em 0;
   outline: 0;
-  
-  ${p => p.primary ? `
-    color: #faf9f5;
-    background-color: #111111;
-  ` : `
-    color: #faf9f5;
-    background-color: #111111;
-  `}
-
 `
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index 1353d95..0fd6240 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,8 +1,7 @@
 import React, {useEffect, useRef} from "react";
 import * as indentation from "indent-textarea";
-import FloatingLabel from "../decorators/FloatingLabel";
 import CharLimit from "../decorators/CharLimit";
-import {RelPositioning} from "./shared";
+import {Labelled} from "./shared";
 
 export const Code = ({content, ...props}) => {
   const textInput = useRef(null);
@@ -12,24 +11,23 @@ export const Code = ({content, ...props}) => {
   }, [textInput])
 
   return (
-    <RelPositioning>
-      <FloatingLabel
-        label="content"
-        id={props.id}
-        value={content} />
-      <textarea
-        name="content"
-        readOnly={props.readOnly}
-        placeholder="Paste your text here"
-        value={content}
-        id={props.id}
-        ref={textInput}
-        required
-        onChange={props.onChange}
-        className="lt-shadow" />
-      <CharLimit
-        content={content}
-        maxLength={props.maxLength} />
-    </RelPositioning>
+    <Labelled
+      label="content"
+      id={props.id}
+      value={content}>
+        <textarea
+          name="content"
+          readOnly={props.readOnly}
+          placeholder="Paste your text here"
+          value={content}
+          id={props.id}
+          ref={textInput}
+          required
+          onChange={props.onChange}
+          className="lt-shadow" />
+        <CharLimit
+          content={content}
+          maxLength={props.maxLength} />
+    </Labelled>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index c467408..a3f3b48 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -1,8 +1,50 @@
 import Dropdown from "react-dropdown";
 import FloatingLabel from "../decorators/FloatingLabel";
 import React from "react";
+import styled from 'styled-components';
 import {LANGS, THEMES} from "../renderers/Code";
-import {FlexChild} from "./shared";
+import {Labelled} from "./shared";
+import {Border, InputLike, Rounded} from "../Form/mixins";
+
+const StyledDropdown = styled(Dropdown)`
+  ${Border}
+  ${Rounded}
+  ${InputLike}
+  cursor: pointer;
+  
+  & .Dropdown-root {
+    cursor: pointer;
+    
+    &:hover, &.is-open {
+      opacity: 1;
+    }
+    
+    & + label {
+      opacity: 1;
+      top: -0.1em;
+    }
+  }
+  
+  & .Dropdown-placeholder {
+    width: 5.5em;
+  }
+  
+  & .Dropdown-menu {
+    border-top: 1px solid ${p => p.theme.colors.text};
+    margin-top: 0.5em;
+    bottom: auto;
+  }
+  
+  & .Dropdown-option {
+    margin-top: 0.5em;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+    
+    &:hover {
+      font-weight: 700;
+      opacity: 0.4;
+    }
+  }
+`
 
 const GenericDropdown = (props) => {
   function _onSelect(option) {
@@ -15,18 +57,17 @@ const GenericDropdown = (props) => {
   }
 
   return (
-    <FlexChild>
-      <Dropdown
+    <Labelled
+      label={props.label}
+      id={props.id}
+      value={props.value}>
+      <StyledDropdown
         options={props.options}
         onChange={_onSelect}
         value={props.value}
         placeholder={props.placeholder}
         id={props.id} />
-      <FloatingLabel
-        label={props.label}
-        id={props.id}
-        value={props.value} />
-    </FlexChild>
+    </Labelled>
   );
 }
 
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
index 7311832..ca00f27 100644
--- a/frontend/src/components/Inputs/Password.js
+++ b/frontend/src/components/Inputs/Password.js
@@ -1,10 +1,10 @@
 import React from "react";
 import {Labelled} from "./shared";
+import {Input} from "../Form/Input";
 
 export const Password = (props) => <Labelled label="password">
-  <input
+  <Input
     name="pass"
-    className="lt-shadow"
     placeholder="password"
     type="password"
     autoComplete="off"
diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js
index 866da91..0a26d42 100644
--- a/frontend/src/components/Inputs/Text.js
+++ b/frontend/src/components/Inputs/Text.js
@@ -1,15 +1,15 @@
 import CharLimit from "../decorators/CharLimit";
 import React from "react";
 import {Labelled} from "./shared";
+import {Input} from "../Form/Input";
 
 export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => {
   return (
     <Labelled label={label} value={value}>
-      <input
+      <Input
         ref={ref}
         name={label}
         readOnly={readOnly}
-        className="lt-shadow"
         placeholder="Title"
         id={id}
         type="text"
diff --git a/frontend/src/components/Inputs/shared.js b/frontend/src/components/Inputs/shared.js
index 18ba164..4239e89 100644
--- a/frontend/src/components/Inputs/shared.js
+++ b/frontend/src/components/Inputs/shared.js
@@ -2,24 +2,14 @@ import styled from "styled-components";
 import React from "react";
 import FloatingLabel from "../decorators/FloatingLabel";
 
-export const RelPositioning = styled.div`
-    position: relative; 
-    height: calc(100% - 4em);
-`
-
-export const FlexChild = styled.div`
+export const Wrapper = styled.div`
     display: block;
     margin-left: 2em;
 `
 
-export const Labelled = ({label, value, children}) => {
-  console.log(children)
-  return (<FlexChild>
-    <RelPositioning>
-      <FloatingLabel label={label} value={value} >
-        <span>{label}</span>
-        {children}
-      </FloatingLabel>
-    </RelPositioning>
-  </FlexChild>)
-}
\ No newline at end of file
+export const Labelled = ({label, value, children}) => <Wrapper>
+  <FloatingLabel label={label} value={value} >
+    <span>{label}</span>
+    {children}
+  </FloatingLabel>
+</Wrapper>
\ No newline at end of file
diff --git a/frontend/src/components/Watermark.js b/frontend/src/components/Watermark.js
index 027aeb6..1b7863d 100644
--- a/frontend/src/components/Watermark.js
+++ b/frontend/src/components/Watermark.js
@@ -14,7 +14,6 @@ const Logo = styled.h1`
     text-decoration: none;
     position: relative;
     color: ${p => p.theme.colors.text};
-    
   }
   
   &:hover {
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
index 1e5a427..ddd963d 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -1,32 +1,22 @@
 import React from 'react';
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 const StyledLabel = styled.label`
-    & > span {
-        position: absolute;
-        top: 0.5em;
-        font-weight: 700;
-        font-size: 1em;
-        opacity: 0.5;
-        transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-    
-        ${props =>
-      (props.value?.length > 0) &&
-      css`
-            opacity: 1
-        `};
-    }
+  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) => {
-    return (
-        <StyledLabel 
-            label={props.label}
-            value={props.value}
-        >
-            {props.children}
-        </StyledLabel>
-    );
-}
-
-export default FloatingLabel
\ No newline at end of file
+export default (props) => <StyledLabel label={props.label}>
+  {props.children}
+</StyledLabel>
-- 
cgit v1.2.3