Added tooltips, centralized theme declaration, fixed some eslint errors

web/src/App.tsx

@@ -1,33 +1,16 @@
-import { MouseEvent, useState } from "react";
+import { useState } from "react";
 import Logo from "./components/Logo";
 import Statistic from "./components/Statistic";
 import Image from "./components/Image";
 import { LastChecked } from "./components/LastChecked";
 import Loading from "./components/Loading";
 import { Data } from "./types";
+import { theme } from "./theme";
+import RefreshButton from "./components/RefreshButton";
 
 function App() {
   const [data, setData] = useState<Data | null>(null);
-  const theme = "neutral"; // Stupid, I know but I want both the dev and prod to work easily.
   if (!data) return <Loading onLoad={setData} />;
-  const refresh = (event: MouseEvent) => {
-    const btn = event.currentTarget as HTMLButtonElement;
-    btn.disabled = true;
-
-    let request = new XMLHttpRequest();
-    request.onload = () => {
-      if (request.status === 200) {
-        window.location.reload();
-      }
-    };
-    request.open(
-      "GET",
-      process.env.NODE_ENV === "production"
-        ? "/refresh"
-        : `http://${window.location.hostname}:8000/refresh`
-    );
-    request.send();
-  };
   return (
     <div
       className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
@@ -56,24 +39,7 @@ function App() {
               className={`flex justify-between items-center px-6 py-4 text-${theme}-500`}
             >
               <LastChecked datetime={data.last_updated} />
-              <button className="group" onClick={refresh}>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  className="group-disabled:animate-spin"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />
-                  <path d="M20,13A8.1,8.1 0 0 1 4.5,15M4,19v-4h4" />
-                </svg>
-              </button>
+              <RefreshButton />
             </div>
             <ul
               className={`*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-${theme}-800 divide-y dark:text-white`}