✨ Add credits

🐛 Fix navigating below page zero

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom";
 import styles from "./App.module.css";
 import { Routes } from "./Routes";
 import client from "./client";
+import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
@@ -18,6 +19,7 @@ const App: React.FC = () => (
         <div className={styles.app}>
           <Routes />
         </div>
+        <Footer />
         <Toast />
       </ToastProvider>
     </Router>

frontend/src/components/Footer.module.css

@@ -0,0 +1,22 @@
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 1rem;
+  left: 0;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.heart {
+  color: var(--brand);
+}
+
+.brick {
+  position: relative;
+  top: 7px;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}

frontend/src/components/Footer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { ReactComponent as Brick } from "../assets/brick.svg";
+import styles from "./Footer.module.css";
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className={styles.footer}>
+      Made with <span className={styles.heart}>❤</span> by{" "}
+      <span title="EDB-gjengen">
+        <Brick className={styles.brick} />
+      </span>
+    </footer>
+  );
+};

frontend/src/components/Header.tsx

@@ -2,7 +2,6 @@ import clsx from "clsx";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-import { ReactComponent as Logo } from "../assets/brick.svg";
 import styles from "./Header.module.css";
 
 const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;

frontend/src/features/log/Log.tsx

@@ -67,10 +67,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ orderOffset: orderOffset - PAGE_SIZE });
+                  setParams({ orderOffset: Math.max(0, orderOffset - PAGE_SIZE) });
                 }}
               >
-                Previous
+                ⬅
               </a>
             </li>
             <li>
@@ -78,10 +78,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ orderOffset: orderOffset + PAGE_SIZE });
+                  setParams({ orderOffset: Math.max(0, orderOffset + PAGE_SIZE) });
                 }}
               >
-                Next
+                ➡
               </a>
             </li>
           </ul>
@@ -116,10 +116,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ transactionOffset: transactionOffset - PAGE_SIZE });
+                  setParams({ transactionOffset: Math.max(0, transactionOffset - PAGE_SIZE) });
                 }}
               >
-                Previous
+                ⬅
               </a>
             </li>
             <li>
@@ -127,10 +127,10 @@ export const Log = () => {
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setParams({ transactionOffset: transactionOffset + PAGE_SIZE });
+                  setParams({ transactionOffset: Math.max(transactionOffset + PAGE_SIZE) });
                 }}
               >
-                Next
+                ➡
               </a>
             </li>
           </ul>