💄 First round of styling

✨ Added new splash

frontend/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BBS</title>
   </head>

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import styles from "./App.module.css";
 import { Routes } from "./Routes";
 import client from "./client";
 import { Header } from "./components/Header";
+import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 

frontend/src/Routes.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
+import { Splash } from "./components/Splash";
 import { UserCreate } from "./features/auth/UserCreate";
 import { Deposit } from "./features/deposit/Deposit";
 import { Log } from "./features/log/Log";
@@ -22,5 +23,6 @@ export const Routes: React.FC = () => (
     <Route path="/users/create" element={<UserCreate />} />
     <Route path="/user/:userId" element={<UserDetail />} />
     <Route path="/" element={<Register />} />
+    <Route path="*" element={<Splash brandText="404" noOverlay />} />
   </ReactRouterRoutes>
 );

frontend/src/components/Header.module.css

@@ -1,13 +1,42 @@
+.nav {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  text-transform: uppercase;
+}
+
 .logo {
   position: relative;
-  top: -1px;
+  top: 5px;
   display: inline-block;
   width: 24px;
   height: 24px;
-  margin: 0 8px;
+  margin-right: 0.5rem;
+  margin-left: 1rem;
+}
+.logoNav {
+  position: relative;
+  top: -4px;
+}
+.logoNav:hover.logoNav:hover {
+  border-color: transparent;
 }
 
-.navIcon {
+.navItems {
-  position: relative;
+  display: flex;
-  top: -2px;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.navLink {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid transparent;
+}
+.navLink:hover {
+  border-color: var(--border);
+  border-radius: 4px;
+}
+.active.active {
+  color: white;
 }

frontend/src/components/Header.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
@@ -6,23 +7,19 @@ import styles from "./Header.module.css";
 
 const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
 
-const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-link active" : "nav-link");
+const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
 
 export const Header: React.FC = () => {
   return (
     <header>
-      <nav>
+      <nav className={styles.nav}>
-        <NavLink to="/">
+        <NavLink to="/" className={clsx([styles.navLink, styles.logoNav])}>
           <span className={styles.logo}>
             <Logo />
           </span>
           Biceps Bar System - BBS
         </NavLink>
-        <button type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <ul className={styles.navItems}>
-          <span className="navbar-toggler-icon" />
-        </button>
-        <div id="navbarNav">
-          <ul>
           <li>
             <NavLink to="/" className={navLinkStyles} end>
               Kjøp drikke
@@ -49,9 +46,6 @@ export const Header: React.FC = () => {
               Folk
             </NavLink>
           </li>
-          </ul>
-        </div>
-        <ul>
           <li>
             <a href={ADMIN_URL}>Admin</a>
           </li>

frontend/src/components/ProductCard.module.css

@@ -4,24 +4,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 4px solid transparent;
+  border: 1px solid transparent;
   background: transparent;
-  border-radius: 8px;
+  border-radius: 4px;
   transition: background-color 0.1s ease-out, border 0.1s ease-out;
 }
-
+.product:hover,
-.product:hover {
+.active.product {
-  border-color: rgba(25, 135, 84, 0.6);
+  border-color: var(--border);
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.active {
-  border-color: rgba(25, 135, 84, 0.6);
-  background: rgba(25, 135, 84, 0.2);
-}
-
-.active:hover {
-  background: rgba(25, 135, 84, 0.2);
 }
 
 .productText {
@@ -30,8 +20,6 @@
   bottom: 0;
   left: 0;
   padding: 4px;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 8px;
   color: white;
   font-weight: bold;
 }
@@ -39,8 +27,13 @@
 .productImage {
   width: 140px;
   height: 140px;
+  border-radius: 4px;
+  filter: opacity(0.2);
   object-fit: contain;
 }
+.active .productImage {
+  filter: none;
+}
 
 .noProductImage {
   width: 140px;
@@ -49,12 +42,12 @@
 
 .amount {
   position: absolute;
+  z-index: 1;
   top: 0px;
   left: 0px;
   padding: 4px;
-  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
-  border-radius: 8px;
+  color: transparent;
-  color: white;
   font-size: 2rem;
   font-weight: bold;
   line-height: 1;
@@ -63,3 +56,7 @@
 .wrap {
   position: relative;
 }
+.active .amount {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}

frontend/src/components/Splash.module.css

@@ -0,0 +1,69 @@
+.splash {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  font-family: Rocket Rinder, monospace;
+  /* color: var(--interlace-color); */
+  place-items: center;
+  text-align: center;
+}
+.overlay {
+  position: fixed;
+}
+
+.wrap {
+  position: relative;
+}
+
+.sun {
+  width: clamp(100px, 65vw, 600px);
+  height: clamp(100px, 65vw, 600px);
+  margin: 0 auto;
+  background: linear-gradient(var(--sun) 50%, var(--sun-end) 90%);
+  border-radius: 50% 50%;
+  box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun), 0 0 30px var(--sun);
+}
+.brand {
+  position: relative;
+  left: -0.6rem;
+  padding-top: 3rem;
+  color: var(--brand);
+  font-size: clamp(20px, 20vw, 200px);
+  font-style: italic;
+  letter-spacing: 1rem;
+  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;
+  bottom: 0.5rem;
+  left: 0rem;
+  animation: flicker 1.5s infinite alternate;
+  color: var(--interlace);
+  font-family: Rocket Clouds DEMO, serif;
+  font-size: clamp(20px, 5vw, 50px);
+  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;
+  }
+}

frontend/src/components/Splash.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import React from "react";
+
+import styles from "./Splash.module.css";
+
+interface SplashProps {
+  brandText?: string;
+  noOverlay?: boolean;
+}
+
+export const Splash: React.FC<SplashProps> = ({ brandText = "BBS", noOverlay = false }) => {
+  return (
+    <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
+      <div className={styles.wrap}>
+        <div className={styles.sun}></div>
+        <div className={styles.brand}>{brandText}</div>
+        <div className={styles.subtitle}>Biceps Bar System</div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/UserCard.module.css

@@ -3,27 +3,29 @@
   flex-direction: column;
   align-items: center;
   padding: 4px;
-  border: 3px solid transparent;
+  border: 1px solid transparent;
   background: transparent;
-  border-radius: 8px;
+  border-radius: 4px;
+  color: var(--text);
   transition: background-color 0.1s ease-out, border 0.1s ease-out;
 }
 
 .user:hover {
-  border-color: rgba(25, 135, 84, 0.6);
+  border-color: var(--border);
-  background: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
 }
 
 .active {
-  border-color: rgba(25, 135, 84, 0.6);
+  border-color: var(--border);
-  background: rgba(25, 135, 84, 0.2);
+  background: var(--border);
 }
 
 .active:hover {
-  background: rgba(25, 135, 84, 0.2);
+  /* TODO */
 }
 
 .avatar {
+  /* TODO: clip path */
   width: 50px;
   height: 50px;
   border-radius: 50px;

frontend/src/features/log/Log.module.css

@@ -3,3 +3,30 @@
   gap: 1rem;
   grid-template-columns: repeat(2, 1fr);
 }
+.disabled,
+.disabled a:link {
+  color: rgba(121, 152, 238, 0.5);
+}
+.pagination {
+  display: flex;
+  align-items: flex-end;
+  padding: 0;
+  margin: 0;
+  margin-top: 1.5rem;
+  gap: 0 1rem;
+  list-style: none;
+}
+
+.pagination a {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid var(--border);
+  margin-top: 1rem;
+  border-radius: 4px;
+}
+.pagination a:hover {
+  color: white;
+}
+
+.disabled a:hover {
+  color: rgba(121, 152, 238, 0.5);
+}

frontend/src/features/log/Log.tsx

@@ -61,8 +61,8 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Order pagination">
-          <ul>
+          <ul className={styles.pagination}>
-            <li className={clsx({ disabled: orderOffset <= 0 })}>
+            <li className={clsx({ [styles.disabled]: orderOffset <= 0 })}>
               <a
                 href="#"
                 onClick={(e) => {
@@ -110,8 +110,8 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Transaction pagination">
-          <ul>
+          <ul className={styles.pagination}>
-            <li className={clsx({ disabled: transactionOffset <= 0 })}>
+            <li className={clsx({ [styles.disabled]: transactionOffset <= 0 })}>
               <a
                 href="#"
                 onClick={(e) => {

frontend/src/features/register/Register.module.css

@@ -23,7 +23,6 @@
   min-width: 200px;
   padding: 4px 8px;
   margin-right: 8px;
-  background: black;
   color: white;
   font-size: 1.8rem;
 }

frontend/src/features/stats/Stats.module.css

@@ -8,3 +8,22 @@
 .statsNav {
   margin-bottom: 1rem;
 }
+.statsNav ul {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  gap: 0 1rem;
+  list-style: none;
+}
+.statsNav a {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid transparent;
+}
+
+.active.active {
+  color: white;
+}
+.statsNav a:hover {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}

frontend/src/features/stats/StatsView.tsx

@@ -1,11 +1,13 @@
+import clsx from "clsx";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
 import styles from "./Stats.module.css";
-const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-link active" : "nav-link");
+
+const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
 
 export const StatsNav = () => (
-  <div className={styles.statsNav}>
+  <nav className={styles.statsNav}>
     <ul>
       <li>
         <NavLink className={navLinkStyles} to="/stats" end>
@@ -28,7 +30,7 @@ export const StatsNav = () => (
         </NavLink>
       </li>
     </ul>
-  </div>
+  </nav>
 );
 
 export const StatsView = ({ children, loading }: { children: React.ReactNode; loading: boolean }) => (

frontend/src/global.css

@@ -0,0 +1,113 @@
+/* Custom props */
+:root {
+  --brand: rgb(243, 33, 61);
+  --background: rgb(70, 30, 82);
+  --text: rgb(255, 255, 255);
+  --sun: rgb(221, 81, 127);
+  --sun-end: rgb(230, 142, 54);
+  --border: rgb(85, 109, 200);
+  --interlace: rgb(121, 152, 238);
+  --font-family: "IBM Plex Mono", monospace;
+}
+
+/* Resets */
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+/* Body and interitable styles */
+body {
+  background: linear-gradient(rgba(0, 0, 0, 0.8) 60%, var(--background) 100%);
+  background-color: var(--background);
+  color: var(--text);
+  font-family: var(--font-family);
+}
+
+/* Links */
+a:link {
+  color: var(--interlace);
+  text-decoration: none;
+}
+
+a:visited {
+  color: var(--interlace);
+}
+
+a:active {
+  color: var(--interlace);
+}
+
+a:hover {
+  color: var(--interlace);
+}
+
+/* Buttons */
+button {
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--border);
+  background: transparent;
+  border-radius: 4px;
+  color: var(--border);
+  font-family: var(--font-family);
+}
+button:hover {
+  color: var(--text);
+  cursor: pointer;
+}
+
+/* Inputs */
+input {
+  padding: 0.4rem 0.4rem;
+  border: 1px solid var(--border);
+  background: transparent;
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--font-family);
+  font-size: 1.5rem;
+}
+input:focus {
+  background: rgba(85, 109, 200, 0.1);
+  outline: none;
+}
+::placeholder {
+  color: var(--border);
+}
+
+/* Tables */
+table {
+  border: 1px solid var(--border);
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0.5rem 0.8rem;
+  border: 1px solid var(--border);
+}
+
+/* Fonts*/
+@font-face {
+  font-family: "Rocket Clouds DEMO";
+  font-style: normal;
+  font-weight: normal;
+  src: url("assets/rocket-clouds.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Rocket Rinder";
+  font-style: normal;
+  font-weight: normal;
+  src: url("assets/rocket-rinder.ttf") format("truetype");
+}

frontend/src/main.tsx

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom";
 
 import App from "./App";
 
+import "./global.css";
+
 ReactDOM.render(
   <React.StrictMode>
     <App />