webapp/src/App.css

@@ -1,3 +1,46 @@
+.Header .OnlineToggle {
+  transform: scale(.5); 
+  margin-left: -19px;
+}
+
+.Header {
+  display: flex;
+}
+
+.Header nav {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  padding-top: 10px;
+}
+
+.Header a {
+  color: black; 
+  text-decoration: none;
+  transition: .25s ease;
+  width: fit-content;
+
+  margin-left: 5px;
+  margin-right: 5px; 
+  padding: 0.25rem 1rem;
+}
+
+.Header .active {
+  color: white;
+  border-radius: 2px;
+  background-color: cadetblue;
+  opacity: 80%;
+  padding: 0.25rem 1rem;
+}
+
+.Header a:hover:not(.active) {
+  color: cadetblue;
+
+  box-shadow: 0 1.5px 0 0 currentcolor;
+}
+
 [data-darkreader-scheme="dark"] .Header a {
   color: darkslategrey;
 }

webapp/src/App.js

@@ -1,8 +1,10 @@
 import './App.css';
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
+
+import OnlineToggle from './components/OnlineToggle';
+import Wobler from './components/Wobler';
 
-import Header from './container/Header';
 import About from "./components/About"
 import Games from './container/Games';
 import Leaderboard from './container/Leaderboard';
@@ -16,19 +18,19 @@ import useUserApi from './api/user';
 import useLeaderboardApi from './api/leaderboard';
 import useGamesApi from './api/games';
 
-function App() {
+export default function App() {
   const userReducer = useUserReducer();
-  const pollingReducer = usePollingReducer();
+  const pollingFlux = usePollingReducer();
   const leaderboardReducer = useLeaderboardReducer();
   const gamesReducer = useGamesReducer();
 
   const user = useUserApi(userReducer).get();
-  const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingReducer);
-  /*const gamesApi = */ useGamesApi(gamesReducer).list(pollingReducer);
+  const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingFlux);
+  /*const gamesApi = */ useGamesApi(gamesReducer).list(pollingFlux);
 
   return (
     <BrowserRouter>
-      <Header pollingReducer={pollingReducer} />
+      <Header pollingFlux={pollingFlux} />
       <Routes>
         <Route path="/" element={<About />} />
         <Route path="/about" element={<About />} />
@@ -39,4 +41,33 @@ function App() {
   )
 }
 
-export default App;
+function Header({ pollingFlux }) {
+  const [polling, dispatchPolling] = pollingFlux;
+
+  return (
+    <div className='Header'>
+      <h1>
+        CordaCheckers
+      </h1>
+
+      <OnlineToggle
+        isOnline={polling.enabled}
+        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
+      />
+
+      <nav>
+        <NavLink to="/about">
+          About
+        </NavLink>
+
+        <NavLink to="/games">
+          <Wobler text="Games" dance={polling.games} />
+        </NavLink>
+
+        <NavLink to="/leaderboard">
+          <Wobler text="Leaderboard" dance={polling.leaderboard} />
+        </NavLink>
+      </nav>
+    </div>
+  )
+}

webapp/src/container/Header.css

@@ -1,42 +0,0 @@
-.OnlineToggle {
-    transform: scale(.5); 
-    margin-left: -19px;
-}
-
-.Header {
-    display: flex;
-}
-
-.Header nav {
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-
-    padding-top: 10px;
-}
-
-.Header a {
-    color: black; 
-    text-decoration: none;
-    transition: .25s ease;
-    width: fit-content;
-
-    margin-left: 5px;
-    margin-right: 5px; 
-    padding: 0.25rem 1rem;
-}
-
-.Header .active {
-    color: white;
-    border-radius: 2px;
-    background-color: cadetblue;
-    opacity: 80%;
-    padding: 0.25rem 1rem;
-}
-
-.Header a:hover:not(.active) {
-    color: cadetblue;
-
-    box-shadow: 0 1.5px 0 0 currentcolor;
-}

webapp/src/container/Header.jsx

@@ -1,36 +0,0 @@
-import './Header.css';
-import React from "react"
-import { NavLink } from "react-router-dom";
-import OnlineToggle from '../components/OnlineToggle';
-import Wobler from '../components/Wobler';
-
-export default function Header({ pollingReducer }) {
-  const [polling, dispatchPolling] = pollingReducer;
-
-  return (
-    <div className='Header'>
-      <h1 >
-        CordaCheckers
-      </h1>
-
-      <OnlineToggle
-        isOnline={polling.enabled}
-        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
-      />
-
-      <nav>
-        <NavLink to="/about">
-          About
-        </NavLink>
-
-        <NavLink to="/games">
-          <Wobler text="Games" dance={polling.games} />
-        </NavLink>
-
-        <NavLink to="/leaderboard">
-          <Wobler text="Leaderboard" dance={polling.leaderboard} />
-        </NavLink>
-      </nav>
-    </div>
-  )
-}