From 13cc0d92a22c58c365c11662773dd6850f3061b8 Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 6 Mar 2022 14:27:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Put=20new=20brand=20in=20header?=
 =?UTF-8?q?=20and=20fix=20toasts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header.module.css     | 59 ++++++++++++++-----
 frontend/src/components/Header.tsx            |  8 +--
 frontend/src/components/Splash.module.css     |  3 +-
 frontend/src/components/Toast.module.css      | 23 ++++++++
 frontend/src/components/Toast.tsx             | 25 ++------
 frontend/src/components/ToastProvider.tsx     | 16 ++---
 .../src/features/deposit/Deposit.module.css   |  1 +
 7 files changed, 86 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/Header.module.css b/frontend/src/components/Header.module.css
index 12f980c..104a3ed 100644
--- a/frontend/src/components/Header.module.css
+++ b/frontend/src/components/Header.module.css
@@ -1,25 +1,12 @@
 .nav {
   display: flex;
-  height: 3rem;
+  height: 5rem;
   align-items: center;
   text-transform: uppercase;
 }
 
-.logo {
-  position: relative;
-  top: 5px;
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-right: 0.5rem;
-  margin-left: 1rem;
-}
 .logoNav {
-  position: relative;
-  top: -4px;
-}
-.logoNav:hover.logoNav:hover {
-  border-color: transparent;
+  margin-left: 1.5rem;
 }
 
 .navItems {
@@ -40,3 +27,45 @@
 .active.active {
   color: white;
 }
+
+/* FIXME: Duplicates Splash styles */
+.brand {
+  padding-left: 1rem;
+  color: var(--brand);
+  font-family: Rocket Rinder, monospace;
+  font-size: 3rem;
+  font-style: italic;
+  letter-spacing: 2px;
+  line-height: 1;
+  text-shadow: 0 0 4px rgba(243, 33, 61, 0.8), 0 0 11px rgba(243, 33, 61, 0.8), 0 0 19px rgba(243, 33, 61, 0.8);
+}
+
+.subtitle {
+  position: relative;
+  left: -8px;
+  animation: flicker 1.5s infinite alternate;
+  color: var(--interlace);
+  font-family: Rocket Clouds DEMO, serif;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+  transform: rotate(-6deg);
+}
+
+@keyframes flicker {
+  0%,
+  18%,
+  22%,
+  25%,
+  53%,
+  57%,
+  100% {
+    text-shadow: 0 0 4px rgba(121, 152, 238, 0.8), 0 0 11px rgba(121, 152, 238, 0.8), 0 0 19px rgba(121, 152, 238, 0.8);
+  }
+
+  20%,
+  24%,
+  55% {
+    text-shadow: none;
+  }
+}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index bcb3a54..85e3371 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -13,11 +13,9 @@ export const Header: React.FC = () => {
   return (
     <header>
       <nav className={styles.nav}>
-        <NavLink to="/" className={clsx([styles.navLink, styles.logoNav])}>
-          <span className={styles.logo}>
-            <Logo />
-          </span>
-          Biceps Bar System - BBS
+        <NavLink to="/" className={styles.logoNav}>
+          <div className={styles.brand}>BBS</div>
+          <div className={styles.subtitle}>Biceps Bar System</div>
         </NavLink>
         <ul className={styles.navItems}>
           <li>
diff --git a/frontend/src/components/Splash.module.css b/frontend/src/components/Splash.module.css
index a15fd4a..2b667e7 100644
--- a/frontend/src/components/Splash.module.css
+++ b/frontend/src/components/Splash.module.css
@@ -4,8 +4,6 @@
   bottom: 0;
   left: 0;
   display: grid;
-  font-family: Rocket Rinder, monospace;
-  /* color: var(--interlace-color); */
   place-items: center;
   text-align: center;
 }
@@ -30,6 +28,7 @@
   left: -0.6rem;
   padding-top: 3rem;
   color: var(--brand);
+  font-family: Rocket Rinder, monospace;
   font-size: clamp(20px, 20vw, 200px);
   font-style: italic;
   letter-spacing: 1rem;
diff --git a/frontend/src/components/Toast.module.css b/frontend/src/components/Toast.module.css
index a2bc036..14bef3b 100644
--- a/frontend/src/components/Toast.module.css
+++ b/frontend/src/components/Toast.module.css
@@ -2,4 +2,27 @@
   position: absolute;
   bottom: 32px;
   left: 32px;
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.visible {
+  opacity: 1;
+  pointer-events: initial;
+}
+
+.primary {
+  background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
+  box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
+}
+.danger {
+  background: var(--brand);
+  box-shadow: 0 0 4px rgba(243, 33, 61, 0.8), 0 0 11px rgba(243, 33, 61, 0.8), 0 0 19px rgba(243, 33, 61, 0.8);
+}
+
+.close {
+  display: none;
 }
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 0d2985d..9f302ba 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -1,33 +1,18 @@
 import clsx from "clsx";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 
 import styles from "./Toast.module.css";
 import { useToast } from "./ToastProvider";
 
 export const Toast: React.FC = () => {
-  const ref = useRef<HTMLInputElement>(null);
-  const { visible, showToast, message, background } = useToast();
+  const { showToast, message, background, visible } = useToast();
 
-  const classes = clsx(`bg-${background}`, styles.toast);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    if (visible) {
-      // TODO
-      console.log("TODO: show");
-    } else if (!visible) {
-      // TODO
-      console.log("TODO: hide");
-    }
-    // TODO
-    return () => console.log("TODO: hide");
-  }, [visible]);
+  const classes = clsx([styles[background], styles.toast], { [styles.visible]: visible });
 
   return (
-    <div ref={ref} className={classes} role="alert" aria-live="assertive" aria-atomic="true">
+    <div className={classes} role="alert" aria-live="assertive" aria-atomic="true">
       <div>{message}</div>
-      <button type="button" aria-label="Close" onClick={() => showToast(message)} />
+      <button type="button" aria-label="Close" onClick={() => showToast(message)} className={styles.close} />
     </div>
   );
 };
diff --git a/frontend/src/components/ToastProvider.tsx b/frontend/src/components/ToastProvider.tsx
index d846a96..40aa8c9 100644
--- a/frontend/src/components/ToastProvider.tsx
+++ b/frontend/src/components/ToastProvider.tsx
@@ -1,21 +1,24 @@
 import React, { ReactNode, useContext, useState } from "react";
 
+type Background = "primary" | "danger";
+
 interface ToastProps {
   visible: boolean;
   message: string;
-  showToast: (message: string, background?: string) => void;
+  showToast: (message: string, background?: Background) => void;
   hide: () => void;
-  background: string;
+  background: Background;
 }
 
 const defaultState = {
+  // FIXME: revert
   visible: false,
   message: "",
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   showToast: () => {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   hide: () => {},
-  background: "primary",
+  background: "primary" as Background,
 };
 
 const ToastContext = React.createContext<ToastProps>(defaultState);
@@ -25,17 +28,16 @@ type ToastProviderProps = {
 };
 export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
   const [visible, setVisible] = useState(defaultState.visible);
-  const [message, setMessage] = useState("");
-  const [background, setBackground] = useState("");
+  const [message, setMessage] = useState(defaultState.message);
+  const [background, setBackground] = useState(defaultState.background);
 
-  const showToast = (newMessage: string, background = "primary") => {
+  const showToast = (newMessage: string, background: Background = "primary") => {
     setMessage(newMessage);
     setBackground(background);
     if (!visible) {
       setVisible(true);
       setTimeout(() => {
         setVisible(false);
-        setMessage("");
       }, 3000);
     }
   };
diff --git a/frontend/src/features/deposit/Deposit.module.css b/frontend/src/features/deposit/Deposit.module.css
index 9581fc0..3624047 100644
--- a/frontend/src/features/deposit/Deposit.module.css
+++ b/frontend/src/features/deposit/Deposit.module.css
@@ -1,6 +1,7 @@
 .userList {
   display: grid;
   height: 400px;
+  padding-top: 2rem;
   grid-template-columns: repeat(12, 100px);
   overflow-y: auto;
   row-gap: 16px;