text area styling

5 files changed, 79 insertions, 50 deletions

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