Some simple style changes

This commit is contained in:
Simponic 2023-01-18 12:51:02 -07:00
parent 7b043678c1
commit d9101b36e7
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
4 changed files with 22 additions and 22 deletions

View File

@ -1,10 +1,16 @@
:root { :root {
--main-bg-color: #282828; --main-bg-color: #282828;
--primary-text-color: #fafafa; --primary-text-color: #ebdbb2;
--success-color: #58df58; --success-color: #689d6a;
--success-color-hover: #a8dfa8; --success-color-hover: #8ec07c;
--gold-color: #ffd700; --gold-color: #d79921;
--gold-color-hover: #ffd7aa; --gold-color-hover: #fabd2f;
--blue-color: #458488;
--blue-color-hover: #83a598;
--purple-color: #b16286;
--purple-color-hover: #d3869b;
--red-color: #cc241d;
--red-color-hover: #fb4934;
} }
@font-face { @font-face {
@ -54,17 +60,17 @@ body {
padding: 0.5rem; padding: 0.5rem;
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
border: var(--primary-text-color) solid 1px; border: var(--purple-color) solid 1px;
} }
.link { .link {
text-decoration: underline; text-decoration: underline;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--primary-text-color); color: var(--success-color);
} }
.link:hover { .link:hover {
color: var(--gold-color); color: var(--success-color-hover);
text-decoration: none; text-decoration: none;
} }

View File

@ -25,7 +25,7 @@ export const Root = () => {
Keys Keys
</Link> </Link>
<Link <Link
className="link" className="button"
onClick={() => setSignedIn(false)} onClick={() => setSignedIn(false)}
to="/" to="/"
> >
@ -41,9 +41,9 @@ export const Root = () => {
) )
} }
href={process.env.REACT_APP_GITHUB_OAUTH} href={process.env.REACT_APP_GITHUB_OAUTH}
className="link" className="button"
> >
Login w/ GitHub 🐙 Login w/ GitHub 🐙
</a> </a>
</> </>
)} )}

View File

@ -2,14 +2,8 @@ import { useEffect, useCallback } from "react";
import { useAuthContext } from "../context/auth_context"; import { useAuthContext } from "../context/auth_context";
export const AuthSuccessful = () => { export const AuthSuccessful = () => {
const { const { username, signedIn, setSignedIn, setUserId, setUsername } =
username, useAuthContext();
signedIn,
setSignedIn,
setSessionOver,
setUserId,
setUsername,
} = useAuthContext();
const fetchMyself = useCallback( const fetchMyself = useCallback(
() => () =>
@ -22,7 +16,7 @@ export const AuthSuccessful = () => {
setUserId(player.id); setUserId(player.id);
setUsername(player.username); setUsername(player.username);
}), }),
[setSessionOver, setSignedIn, setUserId, setUsername] [setSignedIn, setUserId, setUsername]
); );
useEffect(() => { useEffect(() => {

View File

@ -1,11 +1,11 @@
import { useAuthContext } from "../context/auth_context"; import { useAuthContext } from "../context/auth_context";
export const Home = () => { export const Home = () => {
const { username } = useAuthContext(); const { username, signedIn } = useAuthContext();
return ( return (
<div> <div>
<h1>Welcome home, {username || "guest"}!</h1> <h1>Welcome home, {signedIn ? username : "guest"}!</h1>
</div> </div>
); );
}; };