From a5577516d2bd9c3103f3b2891eaf775b5266b6d8 Mon Sep 17 00:00:00 2001
From: Elijah Lucian <elijahlucian@gmail.com>
Date: Wed, 14 Jul 2021 17:50:38 -0600
Subject: [PATCH] marginally less ugly

---
 frontend/src/app.scss                         | 39 ++++++++++++++++++-
 frontend/src/elements/Form/style.scss         |  9 +----
 frontend/src/elements/Toast/style.scss        |  2 -
 frontend/src/index.css                        |  8 ----
 frontend/src/layout/AppFooter/style.scss      | 10 ++---
 frontend/src/layout/AppHeader/style.scss      | 10 +++--
 frontend/src/pages/Login/index.tsx            |  4 +-
 frontend/src/pages/Login/style.scss           | 32 ---------------
 frontend/src/pages/TransactionList/style.scss |  1 -
 frontend/src/scss/variables.scss              |  6 +++
 frontend/src/widgets/FundBar/style.scss       |  1 -
 11 files changed, 56 insertions(+), 66 deletions(-)
 delete mode 100644 frontend/src/pages/Login/style.scss
 create mode 100644 frontend/src/scss/variables.scss

diff --git a/frontend/src/app.scss b/frontend/src/app.scss
index 15b76ab..b39ef06 100644
--- a/frontend/src/app.scss
+++ b/frontend/src/app.scss
@@ -1,10 +1,10 @@
+@import './scss/variables.scss';
+
 .app {
   display: grid;
-  background: #92f322;
   grid-template: auto 1fr auto / 1fr;
 
   align-items: center;
-  color: white;
 
   h1 {
     margin-top: 2.5vmin;
@@ -12,5 +12,40 @@
   }
 
   main {
+    height: 100%;
   }
 }
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: $color-grey;
+  font-weight: 900;
+  margin: 0;
+}
+
+p {
+  margin: 0;
+  color: $color-grey;
+}
+
+a {
+  color: $color-primary;
+
+  &:hover {
+    color: lighen($color-primary, 1.5);
+  }
+}
+
+button {
+  border: 0;
+  padding: 0.25rem 0.5rem;
+  background: $color-primary;
+  color: $color-white;
+}
+
+input {
+  padding: 0.25rem;
+}
diff --git a/frontend/src/elements/Form/style.scss b/frontend/src/elements/Form/style.scss
index f83a248..6e908b9 100644
--- a/frontend/src/elements/Form/style.scss
+++ b/frontend/src/elements/Form/style.scss
@@ -1,11 +1,8 @@
 .dank-form {
   display: flex;
   flex-direction: column;
-  background: #1115;
-  border: 1ch #1117 solid;
   padding: 3ch;
-  border-radius: 1ch;
-  color: #ccc;
+
   label {
     margin: 0.5ch;
     display: flex;
@@ -17,10 +14,6 @@
     }
   }
 
-  h3 {
-    color: #666;
-  }
-
   button {
     margin: 4ch 1ch;
   }
diff --git a/frontend/src/elements/Toast/style.scss b/frontend/src/elements/Toast/style.scss
index 964e7fe..5f36954 100644
--- a/frontend/src/elements/Toast/style.scss
+++ b/frontend/src/elements/Toast/style.scss
@@ -8,13 +8,11 @@
   transition: all 0.2s ease-in-out;
 
   &.error {
-    color: #ffffff;
     background: #b40303;
     opacity: 1;
   }
 
   &.good {
-    color: #ffffff;
     background: #009b46;
     opacity: 1;
   }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3c94751..a7869b7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,14 +8,6 @@
   height: 100vh;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 900;
-}
-
 body,
 html {
   font-family: sans-serif;
diff --git a/frontend/src/layout/AppFooter/style.scss b/frontend/src/layout/AppFooter/style.scss
index 686ec5a..78b1bdd 100644
--- a/frontend/src/layout/AppFooter/style.scss
+++ b/frontend/src/layout/AppFooter/style.scss
@@ -1,16 +1,16 @@
+@import '../../scss/variables.scss';
+
 footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
-  background: #111a;
-  padding: 0 2ch;
-  font-size: 10pt;
-
+  background: $color-dark;
+  padding: 0.5rem;
   display: flex;
   flex-direction: row;
 
   p {
-    margin: 1ch;
+    color: $color-light;
   }
 }
diff --git a/frontend/src/layout/AppHeader/style.scss b/frontend/src/layout/AppHeader/style.scss
index 933e9c3..7dd91c9 100644
--- a/frontend/src/layout/AppHeader/style.scss
+++ b/frontend/src/layout/AppHeader/style.scss
@@ -1,11 +1,13 @@
+@import '../../scss/variables.scss';
+
 header {
   display: flex;
+  padding: 0.5rem;
   flex-direction: row;
   width: 100%;
-  justify-content: space-around;
-  background: #111a;
+  background: $color-dark;
 
-  h1 {
-    margin: 0;
+  h3 {
+    color: $color-light;
   }
 }
diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
index c15040e..aee7044 100644
--- a/frontend/src/pages/Login/index.tsx
+++ b/frontend/src/pages/Login/index.tsx
@@ -2,8 +2,6 @@ import { Input } from 'antd'
 import FormItem from 'antd/lib/form/FormItem'
 import { Link } from 'react-router-dom'
 import { User } from '../../types'
-
-import './style.scss'
 import { useUserContext } from '../../contexts/UserContext'
 import { Form } from '../../elements/Form'
 import { Button } from '../../elements/Button'
@@ -22,8 +20,8 @@ export const Login = () => {
 
   return (
     <div className="login">
-      <h1>Log In</h1>
       <Form onFinish={handleFinish} form={form}>
+        <h1>Log In</h1>
         <FormItem label="Username" name="username">
           <Input />
         </FormItem>
diff --git a/frontend/src/pages/Login/style.scss b/frontend/src/pages/Login/style.scss
deleted file mode 100644
index 5f3c7b1..0000000
--- a/frontend/src/pages/Login/style.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.login {
-  display: flex;
-  border: 1px solid #111;
-  flex-direction: column;
-  margin: 0 auto;
-  border-radius: 0.2rem;
-  padding: 2rem 2rem;
-
-  h1 {
-    margin: 0 auto;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    text-align: center;
-
-    .ant-row {
-      margin: 1rem 2rem;
-    }
-
-    .form-footer {
-      margin-top: 1rem;
-
-      button {
-        width: 50%;
-        margin: auto 0 auto 1rem;
-      }
-    }
-  }
-}
diff --git a/frontend/src/pages/TransactionList/style.scss b/frontend/src/pages/TransactionList/style.scss
index 072ddad..127ed7b 100644
--- a/frontend/src/pages/TransactionList/style.scss
+++ b/frontend/src/pages/TransactionList/style.scss
@@ -4,7 +4,6 @@
       text-align: center;
       text-decoration: underline;
     }
-    font-size: 14pt;
     margin: 2ch;
     background: #fff1;
     padding: 0 2ch 1ch;
diff --git a/frontend/src/scss/variables.scss b/frontend/src/scss/variables.scss
new file mode 100644
index 0000000..d8fa705
--- /dev/null
+++ b/frontend/src/scss/variables.scss
@@ -0,0 +1,6 @@
+$color-primary: #57837b;
+$color-alt: #c9d8b6;
+$color-light: #f1ecc3;
+$color-white: #fff;
+$color-grey: #515e63;
+$color-dark: #333;
diff --git a/frontend/src/widgets/FundBar/style.scss b/frontend/src/widgets/FundBar/style.scss
index 86ccba0..61bb7a3 100644
--- a/frontend/src/widgets/FundBar/style.scss
+++ b/frontend/src/widgets/FundBar/style.scss
@@ -20,7 +20,6 @@
     display: flex;
     flex-direction: column;
     padding: 2ch;
-    color: #333;
     text-shadow: 2px 2px #2223, -1px -1px #fffa;
   }