💄 First round of styling

✨ Added new splash

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 {
-  position: relative;
-  top: -2px;
+.navItems {
+  display: flex;
+  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,52 +7,45 @@ 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>
-        <NavLink to="/">
+      <nav className={styles.nav}>
+        <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">
-          <span className="navbar-toggler-icon" />
-        </button>
-        <div id="navbarNav">
-          <ul>
-            <li>
-              <NavLink to="/" className={navLinkStyles} end>
-                Kjøp drikke
-              </NavLink>
-            </li>
-            <li>
-              <NavLink to="/deposit" className={navLinkStyles}>
-                Sett inn penger
-              </NavLink>
-            </li>
-            <li>
-              <NavLink to="/log" className={navLinkStyles}>
-                Logg
-              </NavLink>
-            </li>
-            <li>
-              <NavLink to="/stats" className={navLinkStyles}>
-                Statistikk
-              </NavLink>
-            </li>
+        <ul className={styles.navItems}>
+          <li>
+            <NavLink to="/" className={navLinkStyles} end>
+              Kjøp drikke
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/deposit" className={navLinkStyles}>
+              Sett inn penger
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/log" className={navLinkStyles}>
+              Logg
+            </NavLink>
+          </li>
+          <li>
+            <NavLink to="/stats" className={navLinkStyles}>
+              Statistikk
+            </NavLink>
+          </li>
 
-            <li>
-              <NavLink to="/users" className={navLinkStyles}>
-                Folk
-              </NavLink>
-            </li>
-          </ul>
-        </div>
-        <ul>
+          <li>
+            <NavLink to="/users" className={navLinkStyles}>
+              Folk
+            </NavLink>
+          </li>
           <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 {
-  border-color: rgba(25, 135, 84, 0.6);
-  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);
+.product:hover,
+.active.product {
+  border-color: var(--border);
 }
 
 .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: 8px;
-  color: white;
+  border-radius: 4px;
+  color: transparent;
   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);
-  background: rgba(0, 0, 0, 0.1);
+  border-color: var(--border);
+  cursor: pointer;
 }
 
 .active {
-  border-color: rgba(25, 135, 84, 0.6);
-  background: rgba(25, 135, 84, 0.2);
+  border-color: var(--border);
+  background: var(--border);
 }
 
 .active:hover {
-  background: rgba(25, 135, 84, 0.2);
+  /* TODO */
 }
 
 .avatar {
+  /* TODO: clip path */
   width: 50px;
   height: 50px;
   border-radius: 50px;