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 (