diff --git a/frontend/src/CoreLayout.tsx b/frontend/src/CoreLayout.tsx index 202a81c..2926e6f 100644 --- a/frontend/src/CoreLayout.tsx +++ b/frontend/src/CoreLayout.tsx @@ -12,8 +12,6 @@ import { AppFooter } from './layout/AppFooter' export const CoreLayout = () => { const { user } = useUserContext() - if (!user) return - return (
@@ -24,13 +22,19 @@ export const CoreLayout = () => { New User - - - - - - - +
+ {!user ? ( + + ) : ( + + + + + + + + )} +
diff --git a/frontend/src/app.scss b/frontend/src/app.scss index 8a411b3..15b76ab 100644 --- a/frontend/src/app.scss +++ b/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, -.transactions { - display: grid; - grid-template-columns: repeat(3, 1fr); - // height: 50vh; -} - -.totals { - z-index: 9; - .above { - margin-top: 5ch; - } - .bottom { - margin-bottom: 5ch; + main { } } diff --git a/frontend/src/app/components/UserForm.tsx b/frontend/src/forms/UserForm.tsx similarity index 93% rename from frontend/src/app/components/UserForm.tsx rename to frontend/src/forms/UserForm.tsx index 055371f..1d886a8 100644 --- a/frontend/src/app/components/UserForm.tsx +++ b/frontend/src/forms/UserForm.tsx @@ -1,9 +1,9 @@ import { useState, useEffect } from 'react' -import { Password, User } from '../../types' -import { useUserContext } from '../../contexts/UserContext' +import { Password, User } from '../types' +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() diff --git a/frontend/src/index.css b/frontend/src/index.css index 3b03b7f..3c94751 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,42 +1,25 @@ -@import '~antd/dist/antd.dark.css'; - * { box-sizing: border-box; } #root { - display: flex; - flex-direction: column; + display: grid; + 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; -} +} \ No newline at end of file diff --git a/frontend/src/layout/AppFooter/index.tsx b/frontend/src/layout/AppFooter/index.tsx index 5ed0f7c..30acac7 100644 --- a/frontend/src/layout/AppFooter/index.tsx +++ b/frontend/src/layout/AppFooter/index.tsx @@ -6,11 +6,11 @@ export const AppFooter = () => { const { user, selectedAccount } = useUserContext() return ( -
+

User: {user?.name}

|

Budget: {selectedAccount?.name}

|

-
+ ) } diff --git a/frontend/src/layout/AppFooter/style.scss b/frontend/src/layout/AppFooter/style.scss index a682e6a..686ec5a 100644 --- a/frontend/src/layout/AppFooter/style.scss +++ b/frontend/src/layout/AppFooter/style.scss @@ -1,4 +1,4 @@ -.stax-footer { +footer { position: fixed; left: 0; bottom: 0; diff --git a/frontend/src/layout/AppHeader/index.tsx b/frontend/src/layout/AppHeader/index.tsx index b217557..b17b9d7 100644 --- a/frontend/src/layout/AppHeader/index.tsx +++ b/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 ( -
+

CashStacks! 💵

-
+
) // Authed Header return ( -
+

MVP Django React! 🤠

@@ -52,6 +51,6 @@ export const AppHeader = ({ children }: Props) => { {user.name[0]}
-
+ ) } diff --git a/frontend/src/layout/AppHeader/style.scss b/frontend/src/layout/AppHeader/style.scss index a019060..933e9c3 100644 --- a/frontend/src/layout/AppHeader/style.scss +++ b/frontend/src/layout/AppHeader/style.scss @@ -1,4 +1,4 @@ -.stax-header { +header { display: flex; flex-direction: row; width: 100%; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index b218114..c15040e 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/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 & { password: string } export const Login = () => { const userContext = useUserContext() - const [form] = Form.useForm() + const [form] = useForm() const handleFinish = ({ name, password }: FormValues) => { userContext.handleLogin(name, password) diff --git a/frontend/src/pages/Login/style.scss b/frontend/src/pages/Login/style.scss index 2076e03..492e48f 100644 --- a/frontend/src/pages/Login/style.scss +++ b/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; - background: #222; + margin: 0 auto; border-radius: 0.2rem; padding: 2rem 2rem;