🔥 Remove all things bootstrap

frontend/package-lock.json

@@ -12,8 +12,6 @@
         "@nivo/bar": "^0.79.1",
         "@nivo/line": "^0.79.1",
         "@nivo/pie": "^0.79.1",
-        "bootstrap": "^5.1.3",
-        "bootstrap-icons": "^1.8.1",
         "clsx": "^1.1.1",
         "date-fns": "^2.28.0",
         "graphql": "^16.3.0",
@@ -28,7 +26,6 @@
         "@graphql-codegen/typed-document-node": "^2.2.3",
         "@graphql-codegen/typescript-operations": "^2.3.0",
         "@graphql-typed-document-node/core": "^3.1.1",
-        "@types/bootstrap": "^5.1.9",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
         "@types/react-router-dom": "^5.3.3",
@@ -2588,15 +2585,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
-      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@react-spring/animated": {
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
@@ -2785,16 +2773,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "node_modules/@types/bootstrap": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.1.9.tgz",
-      "integrity": "sha512-Tembe6lt7819EUzV5LSG9uuwULm4hdEGV9LZ8QBYpWc0J+a+9DdmJEwZ4FMaXGVJWwumTPSkJ8JQF0/KDAmXYg==",
-      "dev": true,
-      "dependencies": {
-        "@popperjs/core": "^2.9.2",
-        "@types/jquery": "*"
-      }
-    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2834,15 +2812,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@types/jquery": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.13.tgz",
-      "integrity": "sha512-ZxJrup8nz/ZxcU0vantG+TPdboMhB24jad2uSap50zE7Q9rUeYlCF25kFMSmHR33qoeOgqcdHEp3roaookC0Sg==",
-      "dev": true,
-      "dependencies": {
-        "@types/sizzle": "*"
-      }
-    },
     "node_modules/@types/js-yaml": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -2959,12 +2928,6 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
-    "node_modules/@types/sizzle": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
-      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
-      "dev": true
-    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -3737,26 +3700,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
-      }
-    },
-    "node_modules/bootstrap-icons": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
-      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14527,11 +14470,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@popperjs/core": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
-      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
-    },
     "@react-spring/animated": {
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.2.tgz",
@@ -14680,16 +14618,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "@types/bootstrap": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.1.9.tgz",
-      "integrity": "sha512-Tembe6lt7819EUzV5LSG9uuwULm4hdEGV9LZ8QBYpWc0J+a+9DdmJEwZ4FMaXGVJWwumTPSkJ8JQF0/KDAmXYg==",
-      "dev": true,
-      "requires": {
-        "@popperjs/core": "^2.9.2",
-        "@types/jquery": "*"
-      }
-    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -14729,15 +14657,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "@types/jquery": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.13.tgz",
-      "integrity": "sha512-ZxJrup8nz/ZxcU0vantG+TPdboMhB24jad2uSap50zE7Q9rUeYlCF25kFMSmHR33qoeOgqcdHEp3roaookC0Sg==",
-      "dev": true,
-      "requires": {
-        "@types/sizzle": "*"
-      }
-    },
     "@types/js-yaml": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -14854,12 +14773,6 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
-    "@types/sizzle": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
-      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
-      "dev": true
-    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -15407,17 +15320,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "requires": {}
-    },
-    "bootstrap-icons": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
-      "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

frontend/package.json

@@ -20,8 +20,6 @@
     "@nivo/bar": "^0.79.1",
     "@nivo/line": "^0.79.1",
     "@nivo/pie": "^0.79.1",
-    "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.8.1",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
     "graphql": "^16.3.0",
@@ -36,7 +34,6 @@
     "@graphql-codegen/typed-document-node": "^2.2.3",
     "@graphql-codegen/typescript-operations": "^2.3.0",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@types/bootstrap": "^5.1.9",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",

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">
+      <nav>
-        <NavLink to="/" className="navbar-brand">
+        <NavLink to="/">
           <span className={styles.logo}>
             <Logo />
           </span>
           Biceps Bar System - BBS
         </NavLink>
-        <button
+        <button type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
           <span className="navbar-toggler-icon" />
         </button>
-        <div className="collapse navbar-collapse" id="navbarNav">
+        <div id="navbarNav">
-          <ul className="navbar-nav">
+          <ul>
-            <li className="nav-item">
+            <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">
+        <ul>
-          <li className="nav-item">
+          <li>
-            <a href={ADMIN_URL} className="nav-link">
+            <a href={ADMIN_URL}>Admin</a>
-              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(`bg-${background}`, styles.toast);
-  const classes = clsx("toast align-items-center text-white bg-primary border-0", backgroundColor, 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>{message}</div>
-        <div className="toast-body">{message}</div>
+      <button type="button" aria-label="Close" onClick={() => showToast(message)} />
-        <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>
   );
 };

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 && (
+      {!user?.profile?.image && <span className={styles.avatar}>TODO: NO IMAGE</span>}
-        <span className={styles.avatar}>
-          <PersonFill />
-        </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">
+          <ul>
-            <li className={clsx("page-item", { disabled: orderOffset <= 0 })}>
+            <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">
+          <ul>
-            <li className={clsx("page-item", { disabled: transactionOffset <= 0 })}>
+            <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">
+    <ul>
-      <li className="nav-item">
+      <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">
+      <li>
-        <NavLink className="nav-link disabled" to="/stats/users" title="TODO">
+        <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>
-          <div className="card-header">Stats</div>
+          <div>Stats</div>
-          <ul className="list-group list-group-flush">
+          <ul>
-            <li className="list-group-item">
+            <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>
-          <div className="card-header">Top 5 måneder</div>
+          <div>Top 5 måneder</div>
-          <ul className="list-group list-group-flush">
+          <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">
+      <Link to="/users/create">Opprett ny</Link>
-        Opprett ny
-      </Link>
     </div>
   );
 };