From 3d509d4e7cddea64c196f66c7e3c0181582ed877 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Sun, 1 Oct 2023 11:05:28 -0600
Subject: [PATCH] housekeeping

---
 client/src/index.js                      |  14 +-
 client/src/pages/Activedutyroster.css    |  12 +-
 client/src/pages/Activedutyroster.js     |  18 +-
 client/src/pages/CavApps.css             |  15 +-
 client/src/pages/CavApps.js              |  29 +-
 client/src/pages/Layout.js               |   4 +-
 client/src/pages/NoPage.js               |  27 +-
 client/src/pages/Rosterstatistics.css    | 467 ++++++++++++-----------
 client/src/pages/Rosterstatistics.js     |  17 +-
 client/src/style/themes/7cav/adrLogo.js  |   6 +-
 client/src/style/themes/7cav/appsLogo.js |   7 +-
 11 files changed, 321 insertions(+), 295 deletions(-)

diff --git a/client/src/index.js b/client/src/index.js
index cb35bdb..ab0b8cd 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -6,7 +6,7 @@ import reportWebVitals from "./reportWebVitals";
 
 import Layout from "./pages/Layout";
 import CavApps from "./pages/Cavapps";
-import ActiveDutyRoster from "./pages/Activedutyroster"
+import ActiveDutyRoster from "./pages/Activedutyroster";
 import Statisticspage from "./pages/Rosterstatistics";
 import NoPage from "./pages/NoPage";
 
@@ -15,9 +15,15 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Layout />}>
-          <Route index element={<CavApps title="7th Cavalry Apps"/>} />
-          <Route path="adr" element={<ActiveDutyRoster title="7th Cavalry ADR"/>} />
-          <Route path="rosterstatistics" element={<Statisticspage title="7th Cavalry Statistics"/>} />
+          <Route index element={<CavApps title="7th Cavalry Apps" />} />
+          <Route
+            path="adr"
+            element={<ActiveDutyRoster title="7th Cavalry ADR" />}
+          />
+          <Route
+            path="rosterstatistics"
+            element={<Statisticspage title="7th Cavalry Statistics" />}
+          />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>
diff --git a/client/src/pages/Activedutyroster.css b/client/src/pages/Activedutyroster.css
index f058c96..164190e 100644
--- a/client/src/pages/Activedutyroster.css
+++ b/client/src/pages/Activedutyroster.css
@@ -49,14 +49,17 @@
   border: 0.5em solid #f3f3f3;
   border-top: 0.5em solid #ebc729;
   border-radius: 50%;
-  width: 8em; /* Make this larger than the GIF */
-  height: 8em; /* Make this larger than the GIF */
+  width: 8em;
+  /* Make this larger than the GIF */
+  height: 8em;
+  /* Make this larger than the GIF */
   animation: spin 2s linear infinite;
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 1;
-  margin: -4em 0 0 -4.5em; /* Half of width and height */
+  margin: -4em 0 0 -4.5em;
+  /* Half of width and height */
 }
 
 .p-loading-png {
@@ -70,6 +73,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -235,4 +239,4 @@ a:hover {
 
   /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
   transform-origin: 67% 67%;
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/Activedutyroster.js b/client/src/pages/Activedutyroster.js
index d4cd5dc..6f70727 100644
--- a/client/src/pages/Activedutyroster.js
+++ b/client/src/pages/Activedutyroster.js
@@ -28,7 +28,7 @@ function ActiveDutyRoster(props) {
   </script>`;
 
   // Change Page Title
-  document.title = props.title
+  document.title = props.title;
 
   // Reusable API fetching function
   async function fetchData(url, setFunction) {
@@ -90,13 +90,13 @@ function ActiveDutyRoster(props) {
             <div className="p-nav-inner">
               <div className="p-nav-scroller">
                 <div className="p-nav-logo">
-                <Link to='/'>
-                  <Logo
-                        alt="ADR Logo"
-                        title="Return to CavApps"
-                        width="17em"
-                        height="3em"
-                      />
+                  <Link to="/">
+                    <Logo
+                      alt="ADR Logo"
+                      title="Return to CavApps"
+                      width="17em"
+                      height="3em"
+                    />
                   </Link>
                 </div>
                 {/* Data Age Warning */}
@@ -155,4 +155,4 @@ function ActiveDutyRoster(props) {
   );
 }
 
-export default ActiveDutyRoster;
\ No newline at end of file
+export default ActiveDutyRoster;
diff --git a/client/src/pages/CavApps.css b/client/src/pages/CavApps.css
index f45ab59..33ff3cb 100644
--- a/client/src/pages/CavApps.css
+++ b/client/src/pages/CavApps.css
@@ -13,10 +13,15 @@
 }
 
 
-  
+
 @keyframes logoboxanim {
-    50% {transform: translateY(20px);}
-    100% {transform: translateY(0px);}
+    50% {
+        transform: translateY(20px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
 }
 
 
@@ -32,7 +37,7 @@
     color: black;
     text-align: center;
     display: inline-block;
-    font-family: "Roboto","Segoe UI","Times New Roman";
+    font-family: "Roboto", "Segoe UI", "Times New Roman";
     font-weight: bold;
     font-size: 12px;
     cursor: pointer;
@@ -40,5 +45,5 @@
     padding: 1em;
     margin-right: 0.25em;
     margin-left: 0.25em;
-    
+
 }
\ No newline at end of file
diff --git a/client/src/pages/CavApps.js b/client/src/pages/CavApps.js
index 57edb0a..af25985 100644
--- a/client/src/pages/CavApps.js
+++ b/client/src/pages/CavApps.js
@@ -1,27 +1,26 @@
 import { Link } from "react-router-dom";
-import Logo from '../style/themes/7cav/appsLogo'
-import './CavApps.css';
+import Logo from "../style/themes/7cav/appsLogo";
+import "./CavApps.css";
 
 function CavApps(props) {
-
   // Change Page Title
-  document.title = props.title
+  document.title = props.title;
 
   return (
-    <div className='masterbox'>
-      <div className='logobox'>
-        <Logo
-        width = '50em'
-        height = '15em'
-        />
+    <div className="masterbox">
+      <div className="logobox">
+        <Logo width="50em" height="15em" />
       </div>
-      <div className='buttonbox'>
-        <Link to='/adr'><button className="button">Active Duty Roster</button></Link>
-        <Link to='/rosterstatistics'><button className="button">Roster Statistics</button></Link>
+      <div className="buttonbox">
+        <Link to="/adr">
+          <button className="button">Active Duty Roster</button>
+        </Link>
+        <Link to="/rosterstatistics">
+          <button className="button">Roster Statistics</button>
+        </Link>
       </div>
     </div>
   );
-};
+}
 
 export default CavApps;
-  
\ No newline at end of file
diff --git a/client/src/pages/Layout.js b/client/src/pages/Layout.js
index 0d5ad14..5cf20c4 100644
--- a/client/src/pages/Layout.js
+++ b/client/src/pages/Layout.js
@@ -6,9 +6,9 @@ import { Outlet } from "react-router-dom";
 const Layout = () => {
   return (
     <>
-      <Outlet/>
+      <Outlet />
     </>
-  )
+  );
 };
 
 export default Layout;
diff --git a/client/src/pages/NoPage.js b/client/src/pages/NoPage.js
index c5eeba8..bdb1346 100644
--- a/client/src/pages/NoPage.js
+++ b/client/src/pages/NoPage.js
@@ -1,15 +1,22 @@
-import '../index.css';
+import "../index.css";
 
 const NoPage = () => {
-    return (
+  return (
     <div>
-        <h1>404 Error</h1>
-        <h2>Oh no! you have encountered a page that does not exist!</h2>
-        <h3>If you believe this is in error, please submit a <a href='https://7cav.us/tickets/categories/2/create'>ticket</a> to S6. Otherwise, please enjoy this sick music!</h3>
-        <iframe width="420" height="315" src="https://www.youtube.com/embed/4vkR1G_DUVc"/>
-    </div> 
-    )
+      <h1>404 Error</h1>
+      <h2>Oh no! you have encountered a page that does not exist!</h2>
+      <h3>
+        If you believe this is in error, please submit a{" "}
+        <a href="https://7cav.us/tickets/categories/2/create">ticket</a> to S6.
+        Otherwise, please enjoy this sick music!
+      </h3>
+      <iframe
+        width="420"
+        height="315"
+        src="https://www.youtube.com/embed/4vkR1G_DUVc"
+      />
+    </div>
+  );
 };
-  
+
 export default NoPage;
-  
\ No newline at end of file
diff --git a/client/src/pages/Rosterstatistics.css b/client/src/pages/Rosterstatistics.css
index 312d426..164190e 100644
--- a/client/src/pages/Rosterstatistics.css
+++ b/client/src/pages/Rosterstatistics.css
@@ -1,239 +1,242 @@
 .DepartmentContainer {
-    margin: auto;
-    min-width: 30%;
-    max-width: 30%;
-  }
-  
-  @media only screen and (max-width: 1000px) {
-    .DepartmentContainer {
-      min-width: 50%;
-      max-width: 95%;
-    }
-  }
-  
-  .p-nav-primary {
-    position: sticky;
-    top: 0;
-    z-index: 400;
-    background-color: #2e2e2e;
-    margin-bottom: 1.2em;
-  }
-  
-  .p-nav {
-    display: block;
-    overflow-wrap: break-word;
-  }
-  
-  .p-nav-logo {
-    align-self: center;
-    box-sizing: border-box;
-    display: block;
-    max-width: 220px;
-    line-height: 21px;
-    padding: 3px;
-  }
-  
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    height: 100%;
-    min-height: 100vh;
-  }
-  
-  .gif-spinner-wrapper {
-    position: relative;
-  }
-  
-  .spinner {
-    border: 0.5em solid #f3f3f3;
-    border-top: 0.5em solid #ebc729;
-    border-radius: 50%;
-    width: 8em; /* Make this larger than the GIF */
-    height: 8em; /* Make this larger than the GIF */
-    animation: spin 2s linear infinite;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 1;
-    margin: -4em 0 0 -4.5em; /* Half of width and height */
-  }
-  
-  .p-loading-png {
-    width: 6em;
-    height: 6em;
-    position: relative;
-    z-index: 2;
-  }
-  
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  
-  .cache-time {
-    color: #ebc729;
-    font-weight: bold;
-    margin-left: 20px;
-  }
-  
-  .error-container {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    height: 100%;
-    min-height: 100vh;
-  }
-  
+  margin: auto;
+  min-width: 30%;
+  max-width: 30%;
+}
+
+@media only screen and (max-width: 1000px) {
+  .DepartmentContainer {
+    min-width: 50%;
+    max-width: 95%;
+  }
+}
+
+.p-nav-primary {
+  position: sticky;
+  top: 0;
+  z-index: 400;
+  background-color: #2e2e2e;
+  margin-bottom: 1.2em;
+}
+
+.p-nav {
+  display: block;
+  overflow-wrap: break-word;
+}
+
+.p-nav-logo {
+  align-self: center;
+  box-sizing: border-box;
+  display: block;
+  max-width: 220px;
+  line-height: 21px;
+  padding: 3px;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.gif-spinner-wrapper {
+  position: relative;
+}
+
+.spinner {
+  border: 0.5em solid #f3f3f3;
+  border-top: 0.5em solid #ebc729;
+  border-radius: 50%;
+  width: 8em;
+  /* Make this larger than the GIF */
+  height: 8em;
+  /* Make this larger than the GIF */
+  animation: spin 2s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  margin: -4em 0 0 -4.5em;
+  /* Half of width and height */
+}
+
+.p-loading-png {
+  width: 6em;
+  height: 6em;
+  position: relative;
+  z-index: 2;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.cache-time {
+  color: #ebc729;
+  font-weight: bold;
+  margin-left: 20px;
+}
+
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.p-nav-scroller {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p-nav-png {
+  max-width: 220px;
+  max-height: 37.7167px;
+  flex: 1 1 auto;
+}
+
+.p-nav-opposite {
+  text-align: right;
+  flex: 1 1 auto;
+  margin: 5px;
+}
+
+.p-nav-opposite-link {
+  color: #f1f1f1;
+  font-weight: bold;
+}
+
+.p-nav-png {
+  width: 220px;
+  height: 37.7167px;
+}
+
+.p-nav-info p {
+  display: flex;
+  align-items: center;
+}
+
+/* Mobile layout */
+@media (max-width: 768px) {
   .p-nav-scroller {
-    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    /* Center-align items vertically */
   }
-  
-  .p-nav-png {
-    max-width: 220px;
-    max-height: 37.7167px;
-    flex: 1 1 auto;
-  }
-  
-  .p-nav-opposite {
-    text-align: right;
-    flex: 1 1 auto;
-    margin: 5px;
-  }
-  
-  .p-nav-opposite-link {
-    color: #f1f1f1;
-    font-weight: bold;
-  }
-  
-  .p-nav-png {
-    width: 220px;
-    height: 37.7167px;
-  }
-  
+
   .p-nav-info p {
-    display: flex;
-    align-items: center;
-  }
-  
-  /* Mobile layout */
-  @media (max-width: 768px) {
-    .p-nav-scroller {
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      /* Center-align items vertically */
-    }
-  
-    .p-nav-info p {
-      margin-left: 0;
-      margin-top: 10px;
-      /* Add some space between the logo and the text */
-    }
-  }
-  
+    margin-left: 0;
+    margin-top: 10px;
+    /* Add some space between the logo and the text */
+  }
+}
+
+.Title {
+  color: #f1f1f1;
+  font-size: x-large;
+  font-weight: bold;
+  border-width: 1px;
+  border-style: solid;
+  border-image: linear-gradient(to right, #ebc729, transparent) 1 0%;
+  border-top: transparent;
+}
+
+@media only screen and (max-width: 1000px) {
   .Title {
-    color: #f1f1f1;
-    font-size: x-large;
-    font-weight: bold;
-    border-width: 1px;
-    border-style: solid;
-    border-image: linear-gradient(to right, #ebc729, transparent) 1 0%;
-    border-top: transparent;
-  }
-  
-  @media only screen and (max-width: 1000px) {
-    .Title {
-      border-image: none;
-      border-color: #ebc729;
-      border-left: transparent;
-      border-right: transparent;
-    }
-  }
-  
-  /* This is a very hack-y way to make the borders look proper on mobile browsers. This is because the border image property does not appear to be properly supported with IOS' Safari */
-  
-  .Subtitle {
-    color: #f1f1f1;
-    font-size: larger;
-    font-weight: bold;
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-  
-  .Title:hover {
-    text-decoration: none;
-    cursor: pointer;
-  }
-  
-  .HeaderContainer {
-    display: flex;
-  }
-  
-  .Counter {
-    font-size: smaller;
-    padding-top: 20px;
-    padding-bottom: 15px;
-    margin-left: auto;
-  }
-  
-  .ItemList table {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  
-  .ItemList thead {
-    display: none;
-  }
-  
-  .ItemList td {
-    padding-bottom: 7px;
-    padding-left: 10px;
-    width: 50%;
-  }
-  
-  a {
-    color: #ebc729;
-    text-decoration: none;
-  }
-  
-  a:hover {
-    color: #ebc729;
-    text-decoration: underline;
-  }
-  
-  .Collapsible__trigger {
-    display: block;
-    position: relative;
-  }
-  
-  .Collapsible__trigger:after {
-    content: url("../style/themes/7cav/Chevron.png");
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    display: block;
-    transition: transform 300ms;
-    transform: rotateZ(90deg);
-  
-    /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
-    transform-origin: 67% 67%;
-  }
-  
-  .Collapsible__trigger.is-open::after {
-    transform: rotateZ(180deg);
-    position: absolute;
-    right: 0px;
-    top: 0px;
-  
-    /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
-    transform-origin: 67% 67%;
-  }
-  
\ No newline at end of file
+    border-image: none;
+    border-color: #ebc729;
+    border-left: transparent;
+    border-right: transparent;
+  }
+}
+
+/* This is a very hack-y way to make the borders look proper on mobile browsers. This is because the border image property does not appear to be properly supported with IOS' Safari */
+
+.Subtitle {
+  color: #f1f1f1;
+  font-size: larger;
+  font-weight: bold;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.Title:hover {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.HeaderContainer {
+  display: flex;
+}
+
+.Counter {
+  font-size: smaller;
+  padding-top: 20px;
+  padding-bottom: 15px;
+  margin-left: auto;
+}
+
+.ItemList table {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ItemList thead {
+  display: none;
+}
+
+.ItemList td {
+  padding-bottom: 7px;
+  padding-left: 10px;
+  width: 50%;
+}
+
+a {
+  color: #ebc729;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #ebc729;
+  text-decoration: underline;
+}
+
+.Collapsible__trigger {
+  display: block;
+  position: relative;
+}
+
+.Collapsible__trigger:after {
+  content: url("../style/themes/7cav/Chevron.png");
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  display: block;
+  transition: transform 300ms;
+  transform: rotateZ(90deg);
+
+  /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
+  transform-origin: 67% 67%;
+}
+
+.Collapsible__trigger.is-open::after {
+  transform: rotateZ(180deg);
+  position: absolute;
+  right: 0px;
+  top: 0px;
+
+  /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
+  transform-origin: 67% 67%;
+}
\ No newline at end of file
diff --git a/client/src/pages/Rosterstatistics.js b/client/src/pages/Rosterstatistics.js
index 286de7b..6464429 100644
--- a/client/src/pages/Rosterstatistics.js
+++ b/client/src/pages/Rosterstatistics.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import lists from "../modules/Generic/BilletBank"
+import lists from "../modules/Generic/BilletBank";
 import ErrorMessage from "../errorMessage";
 import "./Rosterstatistics.css";
-import Statistics from '../modules/Generic/Statistics'
+import Statistics from "../modules/Generic/Statistics";
 
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
@@ -27,7 +27,7 @@ const StatisticsPage = (props) => {
   </script>`;
 
   // Change Page Title
-  document.title = props.title
+  document.title = props.title;
 
   // Reusable API fetching function
   async function fetchData(url, setFunction) {
@@ -48,7 +48,7 @@ const StatisticsPage = (props) => {
       console.error(`Error fetching data from ${url}: `, error);
       setError(error);
     }
-  };
+  }
 
   useEffect(() => {
     // Set loading to true
@@ -83,7 +83,10 @@ const StatisticsPage = (props) => {
   return (
     <div className="MasterContainer">
       <div className="DepartmentContainer">
-        <h4>Please note, the Statistics app is currently pending rewrite by S6. The values, while accurate, only apply to Active Duty Personell</h4>
+        <h4>
+          Please note, the Statistics app is currently pending rewrite by S6.
+          The values, while accurate, only apply to Active Duty Personell
+        </h4>
       </div>
       {cacheTime && cacheTime.combat !== null && (
         <div className="DepartmentContainer">
@@ -219,6 +222,6 @@ const StatisticsPage = (props) => {
       )}
     </div>
   );
-}
+};
 
-export default StatisticsPage;
\ No newline at end of file
+export default StatisticsPage;
diff --git a/client/src/style/themes/7cav/adrLogo.js b/client/src/style/themes/7cav/adrLogo.js
index 284bbf2..1ff1ec3 100644
--- a/client/src/style/themes/7cav/adrLogo.js
+++ b/client/src/style/themes/7cav/adrLogo.js
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react";
 const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -94,5 +94,5 @@ const Logo = (props) => (
       />
     </g>
   </svg>
-)
-export default Logo
+);
+export default Logo;
diff --git a/client/src/style/themes/7cav/appsLogo.js b/client/src/style/themes/7cav/appsLogo.js
index d48ab70..00f122c 100644
--- a/client/src/style/themes/7cav/appsLogo.js
+++ b/client/src/style/themes/7cav/appsLogo.js
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react";
 const Logo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -69,6 +69,5 @@ const Logo = (props) => (
       />
     </g>
   </svg>
-)
-export default Logo
-
+);
+export default Logo;