Merge pull request #70 from jackyzha0/visual-overhaul

3 files changed, 35 insertions, 47 deletions

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 5a6fdca..3d1d981 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -1,34 +1,24 @@
 import React from 'react';
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 // show char limit if length > half of max
 const Chars = styled.p`
     color: #11111100;
-    font-family: 'Roboto Mono', monospace;
     position: absolute; 
     font-size: 0.8em;
     writing-mode: vertical-rl;
     top: 50%;
-    transform: translate(5em, -50%);
+    transform: translate(4em, -50%);
     right: 0;
     transition: all 0.5s cubic-bezier(.25,.8,.25,1);
 
-    ${props =>
-        ((props.content.length / props.maxLength) > 0.5) &&
-        css`
-        color: #111111;
-    `};
-
-    ${props =>
-        ((props.content.length / props.maxLength) > 1) &&
-        css`
-        color: #ee1111;
-    `};
+    ${p => ((p.content.length / p.maxLength) > 0.5) && ` color: ${p.theme.colors.text}; `};
+    ${p => ((p.content.length / p.maxLength) > 1) && ` color: ${p.theme.colors.error}; `};
 `;
 
 const CharLimit = (props) => {
     return (
-        <Chars {...props} >{props.maxLength - props.content.length}/{props.maxLength}</Chars>
+        <Chars {...props}>{props.maxLength - props.content.length}/{props.maxLength}</Chars>
     );
 }
 
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
deleted file mode 100644
index ef56b44..0000000
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components'
-
-const StyledLabel = styled.label`
-    position: absolute;
-    top: 0.5em;
-    font-weight: 700;
-    font-size: 1em;
-    opacity: 0;
-    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-
-    ${props =>
-        (props.value.length > 0) &&
-        css`
-        top: -0.1em;
-        opacity: 1
-    `};
-`
-
-const FloatingLabel = (props) => {
-    return (
-        <StyledLabel 
-            label={props.label}
-            value={props.value}
-            className={props.id}
-            htmlFor={props.id}>
-                {props.label}
-        </StyledLabel>
-    );
-}
-
-export default FloatingLabel
\ No newline at end of file
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