From 7a3ca8a956468db1e3a66b4f0ec3beb8ad0b81f3 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sun, 10 May 2020 11:48:31 -0700
Subject: add focus opacity change, password input

---
 frontend/src/components/FloatingLabel.js | 34 ++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/src/components/FloatingLabel.js

(limited to 'frontend/src/components/FloatingLabel.js')

diff --git a/frontend/src/components/FloatingLabel.js b/frontend/src/components/FloatingLabel.js
new file mode 100644
index 0000000..814790c
--- /dev/null
+++ b/frontend/src/components/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: 0em;
+        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
-- 
cgit v1.2.3