🔥 Remove all things bootstrap

frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import { ApolloProvider } from "@apollo/client";
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import "bootstrap/dist/css/bootstrap.min.css";
 
 import styles from "./App.module.css";
 import { Routes } from "./Routes";

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>

frontend/src/features/deposit/Deposit.module.css

@@ -5,9 +5,11 @@
   overflow-y: auto;
   row-gap: 16px;
 }
+
 .amountSection {
   margin-top: 32px;
 }
+
 .checkout {
   margin-top: 32px;
 }

frontend/src/features/deposit/Deposit.tsx

@@ -33,7 +33,7 @@ export const Deposit: React.FC = () => {
           placeholder="Filtrér på navn"
         />
         {userQuery !== "" && (
-          <button className="btn btn-link" type="button" onClick={() => setUserQuery("")}>
+          <button type="button" onClick={() => setUserQuery("")}>
             Vis alle
           </button>
         )}
@@ -55,10 +55,10 @@ export const Deposit: React.FC = () => {
         <input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} placeholder="0" />
       </section>
       <section className={styles.checkout}>
-        <button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
+        <button type="button" onClick={onSubmit}>
           Sett inn
         </button>{" "}
-        <button type="button" className="btn btn-outline-secondary btn-lg" onClick={reset}>
+        <button type="button" onClick={reset}>
           Start på nytt
         </button>
       </section>

frontend/src/features/log/Log.tsx

@@ -34,7 +34,7 @@ export const Log = () => {
     <div className={styles.log}>
       <div>
         <h2>Ordre</h2>
-        <table className="table">
+        <table>
           <thead>
             <tr>
               <th scope="col">Når</th>
@@ -61,11 +61,10 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Order pagination">
-          <ul className="pagination">
-            <li className={clsx("page-item", { disabled: orderOffset <= 0 })}>
+          <ul>
+            <li className={clsx({ disabled: orderOffset <= 0 })}>
               <a
                 href="#"
-                className="page-link"
                 onClick={(e) => {
                   e.preventDefault();
                   setParams({ orderOffset: orderOffset - PAGE_SIZE });
@@ -74,10 +73,9 @@ export const Log = () => {
                 Previous
               </a>
             </li>
-            <li className="page-item">
+            <li>
               <a
                 href="#"
-                className="page-link"
                 onClick={(e) => {
                   e.preventDefault();
                   setParams({ orderOffset: orderOffset + PAGE_SIZE });
@@ -91,7 +89,7 @@ export const Log = () => {
       </div>
       <div>
         <h2>Transaksjoner</h2>
-        <table className="table">
+        <table>
           <thead>
             <tr>
               <th scope="col">Når</th>
@@ -112,11 +110,10 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Transaction pagination">
-          <ul className="pagination">
-            <li className={clsx("page-item", { disabled: transactionOffset <= 0 })}>
+          <ul>
+            <li className={clsx({ disabled: transactionOffset <= 0 })}>
               <a
                 href="#"
-                className="page-link"
                 onClick={(e) => {
                   e.preventDefault();
                   setParams({ transactionOffset: transactionOffset - PAGE_SIZE });
@@ -125,10 +122,9 @@ export const Log = () => {
                 Previous
               </a>
             </li>
-            <li className="page-item">
+            <li>
               <a
                 href="#"
-                className="page-link"
                 onClick={(e) => {
                   e.preventDefault();
                   setParams({ transactionOffset: transactionOffset + PAGE_SIZE });

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

@@ -9,6 +9,7 @@
   grid-template-columns: repeat(8, 150px);
   row-gap: 16px;
 }
+
 .productListSection {
   margin-top: 2rem;
 }

frontend/src/features/register/Register.tsx

@@ -48,7 +48,7 @@ export const Register: React.FC = () => {
             />
           ))}
         </div>
-        <button type="button" className="btn btn-link" onClick={() => setShowAll(!showAll)}>
+        <button type="button" onClick={() => setShowAll(!showAll)}>
           {showAll ? "Skjul gamliser" : "Vis alle"}
         </button>
       </section>
@@ -70,10 +70,10 @@ export const Register: React.FC = () => {
         <span className={styles.total}>
           Totalt: <span>{total}</span>
         </span>
-        <button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
+        <button type="button" onClick={onSubmit}>
           Kjøp
         </button>{" "}
-        <button type="button" className="btn btn-outline-secondary btn-lg" onClick={reset}>
+        <button type="button" onClick={reset}>
           Start på nytt
         </button>
       </section>

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

@@ -4,6 +4,7 @@
   gap: 1rem;
   grid-template-columns: repeat(3, 1fr);
 }
+
 .statsNav {
   margin-bottom: 1rem;
 }

frontend/src/features/stats/StatsView.tsx

@@ -6,24 +6,24 @@ const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-
 
 export const StatsNav = () => (
   <div className={styles.statsNav}>
-    <ul className="nav nav-tabs">
-      <li className="nav-item">
+    <ul>
+      <li>
         <NavLink className={navLinkStyles} to="/stats" end>
           Oversikt
         </NavLink>
       </li>
-      <li className="nav-item">
+      <li>
         <NavLink className={navLinkStyles} to="/stats/products">
           Produkter
         </NavLink>
       </li>
-      <li className="nav-item">
+      <li>
         <NavLink className={navLinkStyles} to="/stats/orders">
           Ordre
         </NavLink>
       </li>
-      <li className="nav-item">
-        <NavLink className="nav-link disabled" to="/stats/users" title="TODO">
+      <li>
+        <NavLink className="disabled" to="/stats/users" title="TODO">
           Folk
         </NavLink>
       </li>

frontend/src/features/users/UserDetail.tsx

@@ -30,26 +30,26 @@ export const UserDetail = () => {
         <h1>
           {profile.image && <img src={profile.image} alt={`${user.firstName}s profile picture`} />} {user.firstName}
         </h1>
-        <div className="card">
-          <div className="card-header">Stats</div>
-          <ul className="list-group list-group-flush">
-            <li className="list-group-item">
+        <div>
+          <div>Stats</div>
+          <ul>
+            <li>
               Saldo: <strong>{profile.balance.toLocaleString("no")} kr</strong>
             </li>
-            <li className="list-group-item">
+            <li>
               Siste kjøp: <strong>{formatTime(profile.lastPurchaseDate)}</strong>
             </li>
-            <li className="list-group-item">
+            <li>
               Kjøp totalt: <strong>{profile.orderSumTotal.toLocaleString("no")} kr</strong>
             </li>
           </ul>
         </div>
         <br />
-        <div className="card">
-          <div className="card-header">Top 5 måneder</div>
-          <ul className="list-group list-group-flush">
+        <div>
+          <div>Top 5 måneder</div>
+          <ul>
             {profile.topMonths.map((topMonth) => (
-              <li key={topMonth.period} className="list-group-item">
+              <li key={topMonth.period}>
                 {formatMonth(topMonth.period)}: <strong>{topMonth.count}</strong> kjøp på totalt{" "}
                 <strong>{topMonth.sum} kr</strong>
               </li>

frontend/src/features/users/UserList.tsx

@@ -15,7 +15,7 @@ export const UserList = () => {
   const users = showAll ? allUsers : allUsers.filter((u) => activeUserFilter(u));
   return (
     <div>
-      <button type="button" className="btn btn-link" onClick={() => setShowAll(!showAll)}>
+      <button type="button" onClick={() => setShowAll(!showAll)}>
         {showAll ? "Skjul gamliser" : "Vis alle"}
       </button>
       <ul>
@@ -28,9 +28,7 @@ export const UserList = () => {
         ))}
       </ul>
       <br />
-      <Link to="/users/create" className="btn btn-primary">
-        Opprett ny
-      </Link>
+      <Link to="/users/create">Opprett ny</Link>
     </div>
   );
 };