THE COLOR OF MONEY

frontend/src/CoreLayout.tsx

@@ -12,8 +12,6 @@ import { AppFooter } from './layout/AppFooter'
 export const CoreLayout = () => {
   const { user } = useUserContext()
 
-  if (!user) return <Login />
-
   return (
     <div className="app">
       <AppHeader>
@@ -24,6 +22,10 @@ export const CoreLayout = () => {
         <Link to="/new">New User</Link>
       </AppHeader>
 
+      <main>
+        {!user ? (
+          <Login />
+        ) : (
           <Switch>
             <Route path="/users/new" component={NewUser} />
             <Route path="/transactions" component={TransactionList} />
@@ -31,6 +33,8 @@ export const CoreLayout = () => {
             <Route path="/accounts" component={AccountForm} />
             <Route path="/" component={Dashboard} />
           </Switch>
+        )}
+      </main>
 
       <AppFooter />
     </div>

frontend/src/app.scss

@@ -1,32 +1,16 @@
-// @include './form.scss';
-
 .app {
   display: grid;
-  grid-template: 1fr / auto 1fr auto;
+  background: #92f322;
+  grid-template: auto 1fr auto / 1fr;
 
   align-items: center;
-  font-size: calc(10px + 2vmin);
   color: white;
 
   h1 {
     margin-top: 2.5vmin;
     margin-bottom: 1vmin;
   }
-}
 
-.funds,
+  main {
-.transactions {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  // height: 50vh;
-}
-
-.totals {
-  z-index: 9;
-  .above {
-    margin-top: 5ch;
-  }
-  .bottom {
-    margin-bottom: 5ch;
   }
 }

frontend/src/forms/UserForm.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react'
 
-import { Password, User } from '../../types'
+import { Password, User } from '../types'
-import { useUserContext } from '../../contexts/UserContext'
+import { useUserContext } from '../contexts/UserContext'
 import { message } from 'antd'
-import { Button } from '../../elements/Button'
+import { Button } from '../elements/Button'
 
 export const UserForm = () => {
   const { user } = useUserContext()

frontend/src/index.css

@@ -1,41 +1,24 @@
-@import '~antd/dist/antd.dark.css';
-
 * {
   box-sizing: border-box;
 }
 
 #root {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template: 1fr / 1fr;
   height: 100vh;
 }
 
-.col1 {
-  grid-column: 1/1;
-  grid-row: 1/1;
-}
-
-.col2 {
-  grid-column: 2/2;
-  grid-row: 1/1;
-}
-
-.col3 {
-  grid-column: 3/3;
-  grid-row: 1/1;
-}
-
 h1,
 h2,
 h3,
 h4,
 h5 {
-  color: #222;
-  text-shadow: -1px -1px #444;
   font-weight: 900;
 }
 
-body {
+body,
+html {
+  font-family: sans-serif;
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

frontend/src/layout/AppFooter/index.tsx

@@ -6,11 +6,11 @@ export const AppFooter = () => {
   const { user, selectedAccount } = useUserContext()
 
   return (
-    <div className="stax-footer">
+    <footer>
       <p>User: {user?.name}</p>
       <p>|</p>
       <p>Budget: {selectedAccount?.name}</p>
       <p>|</p>
-    </div>
+    </footer>
   )
 }

frontend/src/layout/AppFooter/style.scss

@@ -1,4 +1,4 @@
-.stax-footer {
+footer {
   position: fixed;
   left: 0;
   bottom: 0;

frontend/src/layout/AppHeader/index.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 import { Avatar, Dropdown, Menu } from 'antd'
-import { Header } from 'antd/lib/layout/layout'
 import { Link, useHistory } from 'react-router-dom'
 import { useUserContext } from '../../contexts/UserContext'
 
@@ -18,14 +17,14 @@ export const AppHeader = ({ children }: Props) => {
   // Unauthed Header
   if (!user)
     return (
-      <Header className="stax-header">
+      <header className="stax-header">
         <h3>CashStacks! 💵</h3>
-      </Header>
+      </header>
     )
 
   // Authed Header
   return (
-    <div className="stax-header">
+    <header>
       <div className="header-left">
         <Link to="/">
           <h3>MVP Django React! 🤠</h3>
@@ -52,6 +51,6 @@ export const AppHeader = ({ children }: Props) => {
           <Avatar>{user.name[0]}</Avatar>
         </Dropdown>
       </div>
-    </div>
+    </header>
   )
 }

frontend/src/layout/AppHeader/style.scss

@@ -1,4 +1,4 @@
-.stax-header {
+header {
   display: flex;
   flex-direction: row;
   width: 100%;

frontend/src/pages/Login/index.tsx

@@ -1,17 +1,20 @@
-import { Button, Form, Input } from 'antd'
+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'
+import { useForm } from 'antd/lib/form/Form'
 
 type FormValues = Pick<User, 'name'> & { password: string }
 
 export const Login = () => {
   const userContext = useUserContext()
 
-  const [form] = Form.useForm<FormValues>()
+  const [form] = useForm<FormValues>()
 
   const handleFinish = ({ name, password }: FormValues) => {
     userContext.handleLogin(name, password)

frontend/src/pages/Login/style.scss

@@ -2,8 +2,7 @@
   display: flex;
   box-shadow: 5px 5px #111, 2px 2px #111;
   flex-direction: column;
-  margin: auto;
+  margin: 0 auto;
-  background: #222;
   border-radius: 0.2rem;
   padding: 2rem 2rem;