2 files changed, 71 insertions, 0 deletions
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
new file mode 100644
index 0000000..623b378
--- /dev/null
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled, { css } 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%);
+    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;
+    `};
+`;
+
+class CharLimit extends React.Component {
+    render() {
+        return (
+            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
+        );
+    }
+}
+
+export default CharLimit
+\ No newline at end of file
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
new file mode 100644
index 0000000..e1fc0ba
--- /dev/null
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -0,0 +1,34 @@
+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
+    `};
+`
+
+class FloatingLabel extends React.Component {
+    render() {
+        return (
+            <StyledLabel 
+                label={this.props.label}
+                value={this.props.value}
+                className={this.props.id}
+                htmlFor={this.props.id}>
+                    {this.props.label}
+            </StyledLabel>
+        );
+    }
+}
+
+export default FloatingLabel
+\ No newline at end of file