🔥 Remove all things bootstrap

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>
   );
 };