refactoring css

1 files changed, 16 insertions, 16 deletions

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>
     );
 }