From 3e8500d466b641ef34c24f8b0de8163a44ba7a9e Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 22:17:18 -0800
Subject: refactoring css

---
 .../src/components/decorators/FloatingLabel.js     | 32 +++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

(limited to 'frontend/src/components/decorators')

diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
index ef56b44..1e5a427 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -2,19 +2,20 @@ 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
-    `};
+    & > 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
+        `};
+    }
 `
 
 const FloatingLabel = (props) => {
@@ -22,9 +23,8 @@ const FloatingLabel = (props) => {
         <StyledLabel 
             label={props.label}
             value={props.value}
-            className={props.id}
-            htmlFor={props.id}>
-                {props.label}
+        >
+            {props.children}
         </StyledLabel>
     );
 }
-- 
cgit v1.2.3