marginally less ugly

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

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

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

frontend/src/index.css

@@ -8,14 +8,6 @@
   height: 100vh;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 900;
-}
-
 body,
 html {
   font-family: sans-serif;

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

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

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>

frontend/src/pages/Login/style.scss

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

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;

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;

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