From 0c2d38a59f890afed6466658e1ad0341656137c8 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 16:53:52 -0800
Subject: title refactor

---
 frontend/src/components/decorators/CharLimit.js | 1 -
 1 file changed, 1 deletion(-)

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

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 5a6fdca..1b5de91 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components'
 // show char limit if length > half of max
 const Chars = styled.p`
     color: #11111100;
-    font-family: 'Roboto Mono', monospace;
     position: absolute; 
     font-size: 0.8em;
     writing-mode: vertical-rl;
-- 
cgit v1.2.3


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


From 7a671bc96ef06df3da3d2dce3caca559f32c6627 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 23:12:28 -0800
Subject: text area styling

---
 .../src/components/decorators/FloatingLabel.js     | 44 +++++++++-------------
 1 file changed, 17 insertions(+), 27 deletions(-)

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

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>
-- 
cgit v1.2.3


From 6c974b237a9b7a8bd8f294d210157e19acf4c7fe Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 5 Mar 2021 23:50:11 -0800
Subject: button styling

---
 frontend/src/components/decorators/CharLimit.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

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

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 1b5de91..5201377 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -8,21 +8,12 @@ const Chars = styled.p`
     font-size: 0.8em;
     writing-mode: vertical-rl;
     top: 50%;
-    transform: translate(5em, -50%);
+    transform: translate(4em, -50%);
     right: 0;
     transition: all 0.5s cubic-bezier(.25,.8,.25,1);
 
-    ${props =>
-        ((props.content.length / props.maxLength) > 0.5) &&
-        css`
-        color: #111111;
-    `};
-
-    ${props =>
-        ((props.content.length / props.maxLength) > 1) &&
-        css`
-        color: #ee1111;
-    `};
+    ${p => ((p.content.length / p.maxLength) > 0.5) && ` color: ${p.theme.colors.text}; `};
+    ${p => ((p.content.length / p.maxLength) > 1) && ` color: ${p.theme.colors.error}; `};
 `;
 
 const CharLimit = (props) => {
-- 
cgit v1.2.3


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


From e9a7416fabbbb0155c09ee86e7843a4d87e0c118 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 14:44:15 -0800
Subject: code renderer virtualization, better visuals

---
 frontend/src/components/decorators/CharLimit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 5201377..fcf14d0 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 // show char limit if length > half of max
 const Chars = styled.p`
-- 
cgit v1.2.3


From dbf726d9e021a692254defdab8b993063b15354f Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 16:09:51 -0800
Subject: update watermark styling

---
 frontend/src/components/decorators/CharLimit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index fcf14d0..3d1d981 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -18,7 +18,7 @@ const Chars = styled.p`
 
 const CharLimit = (props) => {
     return (
-        <Chars {...props} >{props.maxLength - props.content.length}/{props.maxLength}</Chars>
+        <Chars {...props}>{props.maxLength - props.content.length}/{props.maxLength}</Chars>
     );
 }
 
-- 
cgit v1.2.3