From cf59188dff4526a358d0386f8113f542e24fffc2 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 09:44:00 -0800
Subject: add more css mixins

---
 .../src/components/decorators/FloatingLabel.js     | 22 ----------------
 frontend/src/components/decorators/Labelled.js     | 30 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 22 deletions(-)
 delete mode 100644 frontend/src/components/decorators/FloatingLabel.js
 create mode 100644 frontend/src/components/decorators/Labelled.js

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

diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
deleted file mode 100644
index ddd963d..0000000
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-
-const StyledLabel = styled.label`
-  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;
-  }
-`
-
-export default (props) => <StyledLabel label={props.label}>
-  {props.children}
-</StyledLabel>
diff --git a/frontend/src/components/decorators/Labelled.js b/frontend/src/components/decorators/Labelled.js
new file mode 100644
index 0000000..0d7fe39
--- /dev/null
+++ b/frontend/src/components/decorators/Labelled.js
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import React from "react";
+
+const StyledLabel = styled.label`
+  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) => <StyledLabel label={props.label}>
+  {props.children}
+</StyledLabel>
+
+
+export const Labelled = ({label, value, children}) => <div>
+  <FloatingLabel label={label} value={value} >
+    <span>{label}</span>
+    {children}
+  </FloatingLabel>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3