🔥 Remove all things bootstrap

frontend/src/components/Header.tsx

@@ -1,7 +1,3 @@
-import { ReactComponent as BarChart } from "bootstrap-icons/icons/bar-chart.svg";
-import { ReactComponent as CardList } from "bootstrap-icons/icons/card-list.svg";
-import { ReactComponent as House } from "bootstrap-icons/icons/house.svg";
-import { ReactComponent as PeopleIcon } from "bootstrap-icons/icons/people.svg";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
@@ -15,71 +11,49 @@ const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-
 export const Header: React.FC = () => {
   return (
     <header>
-      <nav className="navbar navbar-dark bg-dark navbar-expand-md">
-        <NavLink to="/" className="navbar-brand">
+      <nav>
+        <NavLink to="/">
           <span className={styles.logo}>
             <Logo />
           </span>
           Biceps Bar System - BBS
         </NavLink>
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
+        <button type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
           <span className="navbar-toggler-icon" />
         </button>
-        <div className="collapse navbar-collapse" id="navbarNav">
-          <ul className="navbar-nav">
-            <li className="nav-item">
+        <div id="navbarNav">
+          <ul>
+            <li>
               <NavLink to="/" className={navLinkStyles} end>
-                <span className={styles.navIcon}>
-                  <House />
-                </span>{" "}
                 Kjøp drikke
               </NavLink>
             </li>
-            <li className="nav-item">
+            <li>
               <NavLink to="/deposit" className={navLinkStyles}>
                 Sett inn penger
               </NavLink>
             </li>
-            <li className="nav-item">
+            <li>
               <NavLink to="/log" className={navLinkStyles}>
-                <span className={styles.navIcon}>
-                  <CardList />
-                </span>{" "}
                 Logg
               </NavLink>
             </li>
-            <li className="nav-item">
+            <li>
               <NavLink to="/stats" className={navLinkStyles}>
-                <span className={styles.navIcon}>
-                  <BarChart />
-                </span>{" "}
                 Statistikk
               </NavLink>
             </li>
 
-            <li className="nav-item">
+            <li>
               <NavLink to="/users" className={navLinkStyles}>
-                <span className={styles.navIcon}>
-                  <PeopleIcon />
-                </span>{" "}
                 Folk
               </NavLink>
             </li>
           </ul>
         </div>
-        <ul className="navbar-nav">
-          <li className="nav-item">
-            <a href={ADMIN_URL} className="nav-link">
-              Admin
-            </a>
+        <ul>
+          <li>
+            <a href={ADMIN_URL}>Admin</a>
           </li>
         </ul>
       </nav>

frontend/src/components/ProductCard.module.css

@@ -9,17 +9,21 @@
   border-radius: 8px;
   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);
 }
+
 .productText {
   position: absolute;
   right: 0;
@@ -31,15 +35,18 @@
   color: white;
   font-weight: bold;
 }
+
 .productImage {
   width: 140px;
   height: 140px;
   object-fit: contain;
 }
+
 .noProductImage {
   width: 140px;
   height: 140px;
 }
+
 .amount {
   position: absolute;
   top: 0px;
@@ -52,6 +59,7 @@
   font-weight: bold;
   line-height: 1;
 }
+
 .wrap {
   position: relative;
 }

frontend/src/components/Toast.tsx

@@ -1,4 +1,3 @@
-import { Toast as BSToast } from "bootstrap";
 import clsx from "clsx";
 import React, { useEffect, useRef } from "react";
 
@@ -9,33 +8,26 @@ export const Toast: React.FC = () => {
   const ref = useRef<HTMLInputElement>(null);
   const { visible, showToast, message, background } = useToast();
 
-  const backgroundColor = `bg-${background}`;
-  const classes = clsx("toast align-items-center text-white bg-primary border-0", backgroundColor, styles.toast);
+  const classes = clsx(`bg-${background}`, styles.toast);
 
   useEffect(() => {
     if (!ref.current) return;
-    const bsToast = BSToast.getInstance(ref.current) || new BSToast(ref.current);
 
     if (visible) {
-      bsToast?.show();
+      // TODO
+      console.log("TODO: show");
     } else if (!visible) {
-      bsToast?.hide();
+      // TODO
+      console.log("TODO: hide");
     }
-    return () => bsToast?.hide();
+    // TODO
+    return () => console.log("TODO: hide");
   }, [visible]);
 
   return (
     <div ref={ref} className={classes} role="alert" aria-live="assertive" aria-atomic="true">
-      <div className="d-flex">
-        <div className="toast-body">{message}</div>
-        <button
-          type="button"
-          className="btn-close btn-close-white me-2 m-auto"
-          data-bs-dismiss="toast"
-          aria-label="Close"
-          onClick={() => showToast(message)}
-        />
-      </div>
+      <div>{message}</div>
+      <button type="button" aria-label="Close" onClick={() => showToast(message)} />
     </div>
   );
 };

frontend/src/components/UserCard.module.css

@@ -8,27 +8,33 @@
   border-radius: 8px;
   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);
 }
+
 .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);
 }
+
 .avatar {
   width: 50px;
   height: 50px;
   border-radius: 50px;
 }
+
 .avatar svg {
   width: 50px;
   height: 50px;
   color: #ccc;
 }
+
 .name {
   font-weight: bold;
 }

frontend/src/components/UserCard.tsx

@@ -1,4 +1,3 @@
-import { ReactComponent as PersonFill } from "bootstrap-icons/icons/person-fill.svg";
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
@@ -19,11 +18,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false
       {user?.profile?.image && (
         <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
       )}
-      {!user?.profile?.image && (
-        <span className={styles.avatar}>
-          <PersonFill />
-        </span>
-      )}
+      {!user?.profile?.image && <span className={styles.avatar}>TODO: NO IMAGE</span>}
       <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
       <span className={styles.balance}>{user?.profile?.balance || ""}</span>
     </button>