💄 First round of styling

✨ Added new splash

frontend/src/features/log/Log.module.css

@@ -3,3 +3,30 @@
   gap: 1rem;
   grid-template-columns: repeat(2, 1fr);
 }
+.disabled,
+.disabled a:link {
+  color: rgba(121, 152, 238, 0.5);
+}
+.pagination {
+  display: flex;
+  align-items: flex-end;
+  padding: 0;
+  margin: 0;
+  margin-top: 1.5rem;
+  gap: 0 1rem;
+  list-style: none;
+}
+
+.pagination a {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid var(--border);
+  margin-top: 1rem;
+  border-radius: 4px;
+}
+.pagination a:hover {
+  color: white;
+}
+
+.disabled a:hover {
+  color: rgba(121, 152, 238, 0.5);
+}

frontend/src/features/log/Log.tsx

@@ -61,8 +61,8 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Order pagination">
-          <ul>
-            <li className={clsx({ disabled: orderOffset <= 0 })}>
+          <ul className={styles.pagination}>
+            <li className={clsx({ [styles.disabled]: orderOffset <= 0 })}>
               <a
                 href="#"
                 onClick={(e) => {
@@ -110,8 +110,8 @@ export const Log = () => {
           </tbody>
         </table>
         <nav aria-label="Transaction pagination">
-          <ul>
-            <li className={clsx({ disabled: transactionOffset <= 0 })}>
+          <ul className={styles.pagination}>
+            <li className={clsx({ [styles.disabled]: transactionOffset <= 0 })}>
               <a
                 href="#"
                 onClick={(e) => {

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

@@ -23,7 +23,6 @@
   min-width: 200px;
   padding: 4px 8px;
   margin-right: 8px;
-  background: black;
   color: white;
   font-size: 1.8rem;
 }

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

@@ -7,4 +7,23 @@
 
 .statsNav {
   margin-bottom: 1rem;
-}
+}
+.statsNav ul {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  gap: 0 1rem;
+  list-style: none;
+}
+.statsNav a {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid transparent;
+}
+
+.active.active {
+  color: white;
+}
+.statsNav a:hover {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}

frontend/src/features/stats/StatsView.tsx

@@ -1,11 +1,13 @@
+import clsx from "clsx";
 import React from "react";
 import { NavLink } from "react-router-dom";
 
 import styles from "./Stats.module.css";
-const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-link active" : "nav-link");
+
+const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
 
 export const StatsNav = () => (
-  <div className={styles.statsNav}>
+  <nav className={styles.statsNav}>
     <ul>
       <li>
         <NavLink className={navLinkStyles} to="/stats" end>
@@ -28,7 +30,7 @@ export const StatsNav = () => (
         </NavLink>
       </li>
     </ul>
-  </div>
+  </nav>
 );
 
 export const StatsView = ({ children, loading }: { children: React.ReactNode; loading: boolean }) => (