text area styling

1 files changed, 17 insertions, 27 deletions

diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
index 1e5a427..ddd963d 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -1,32 +1,22 @@
 import React from 'react';
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 const StyledLabel = styled.label`
-    & > 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
-        `};
-    }
+  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) => {
-    return (
-        <StyledLabel 
-            label={props.label}
-            value={props.value}
-        >
-            {props.children}
-        </StyledLabel>
-    );
-}
-
-export default FloatingLabel
\ No newline at end of file
+export default (props) => <StyledLabel label={props.label}>
+  {props.children}
+</StyledLabel>