Made ui changes in the dashboard, teams, matches, and users page. Sti…

…ll debating between having the text be coral or white. Is functional

pages/dashboard.vue

@@ -353,10 +353,10 @@ async function updateTeamData() {
             <div class="h-40 overflow-y-auto px-4 rounded-md">
               <div
                 v-for="(event, index) in pastEvents"
-                class="bg-gray-100 rounded-md"
+                class="bg-gray-100 rounded-md dark:bg-gray-800"
               >
                 <div class="my-2 p-2">
-                  <p class="font-medium">{{ event.name }}</p>
+                  <p class="font-medium dark:text-white">{{ event.name }}</p>
                   <UButton
                     class="rounded-full my-0.5"
                     icon="i-heroicons-map-pin-solid"
@@ -373,19 +373,19 @@ async function updateTeamData() {
                   />
                   <div class="flex my-0.5">
                     <UButton
-                      class="rounded-full mx-0.5"
+                      class="rounded-full mx-0.5 dark:hover:bg-primary-950"
                       icon="i-heroicons-calendar-days-solid"
                       variant="outline"
-                      color="gray"
+                      color="primary"
                     />
                     <UButton
                       v-if="typeof event.week === 'number'"
-                      class="rounded-full mx-0.5 mr-1"
+                      class="rounded-full mx-0.5 mr-1 dark:hover:bg-primary-950"
                       :label="'Week ' + (parseInt(event.week) + 1)"
-                      color="gray"
+                      color="primary"
                       variant="outline"
                     />
-                    <p class="my-auto mx-0.5">
+                    <p class="my-auto mx-0.5 dark:text-white">
                       {{
                         months.at(event.start_date.split('-')[1] - 1) +
                         ' ' +
@@ -416,7 +416,7 @@ async function updateTeamData() {
                         class="rounded-full mx-0.5 mr-1"
                         color="primary"
                       />
-                      <p class="my-auto mx-0.5 font-sans">
+                      <p class="my-auto mx-0.5 font-sans dark:text-white">
                         {{ placeify(teamEventData[index].rank) }} Place with a
                         Record of
                         {{

pages/index.vue

@@ -12,4 +12,4 @@ Base page of the website. This really shouldn't be seen during normal use atm.
   <p>Thanks!</p>
 </template>
 
-<style scoped></style>
+<style scoped></style>

pages/matches.vue

@@ -102,13 +102,14 @@ async function setup() {
   <OuterComponents>
     <VDataTable
       :loading="pending"
-      class="max-h-dvh overflow-auto"
+      class="max-h-dvh overflow-auto dark:bg-gray-800 dark:text-white"
       :headers="headers"
       :items="items"
       item-key="name"
       density="compact"
       :items-per-page="-1"
       v-model:sort-by="sortBy"
+
     >
       <template v-slot:item.notes="row">
         <UPopover :popper="{ offsetDistance: 15 }">
@@ -120,7 +121,7 @@ async function setup() {
           />
           <template #panel>
             <UContainer
-              class="m-auto max-w-lg min-w-[15rem] overflow-y-auto"
+              class="m-auto max-w-lg min-w-[15rem] overflow-y-auto border-2"
               style="max-height: 20rem; min-height: 10rem"
             >
               <br />

pages/predict.vue

@@ -355,7 +355,7 @@ watch(pending, () => {
             </p>
             <p
               v-else
-              class="font-semibold"
+              class="font-semibold !text-primary"
             >
               vs
             </p>
@@ -411,7 +411,7 @@ watch(pending, () => {
           </UInput>
         </UContainer>
         <template #footer>
-          <div class="text-center text-xs">
+          <div class="text-center text-xs !text-primary">
             <p v-if="!pending">
               {{
                 'Accuracy: ' +

pages/teams/index.vue

@@ -135,8 +135,8 @@ async function tableSetup() {
     let alliance = blueAlliance.includes(key.toString())
       ? 'bg-blue-100'
       : redAlliance.includes(key.toString())
-      ? 'bg-red-100'
-      : '';
+        ? 'bg-red-100'
+        : '';
     if (allowedTeams.length == 0 || allowedTeams.includes(key.toString())) {
       for (let match of value) {
         if (
@@ -327,7 +327,7 @@ async function tableSetup() {
     teamsData.value[i].team.color = colorify(
       ((sortedTeamPercents.indexOf(teamPercents[i]) + 1) /
         sortedTeamPercents.length) *
-        100,
+      100,
     );
     teamsData.value[i].driver.color = colorify(
       calculatePercent(
@@ -583,18 +583,18 @@ function autoAccuracy(teamArrays: Array<ScoutingData>) {
     return [
       true,
       (successfulAmpCount + successfulSpeakerCount) /
-        (missedAmpCount +
-          missedSpeakerCount +
-          successfulSpeakerCount +
-          successfulAmpCount),
+      (missedAmpCount +
+        missedSpeakerCount +
+        successfulSpeakerCount +
+        successfulAmpCount),
       successfulAmpCount / (missedAmpCount + successfulAmpCount),
       successfulSpeakerCount / (missedSpeakerCount + successfulSpeakerCount),
     ];
   else
     return [
       false,
       (successfulAmpCount + successfulSpeakerCount) /
-        (missedAmpCount + successfulSpeakerCount + successfulAmpCount),
+      (missedAmpCount + successfulSpeakerCount + successfulAmpCount),
     ];
 }
 
@@ -619,18 +619,18 @@ function teleAccuracy(teamArrays: Array<ScoutingData>) {
     return [
       true,
       (successfulAmpCount + successfulSpeakerCount) /
-        (missedAmpCount +
-          missedSpeakerCount +
-          successfulSpeakerCount +
-          successfulAmpCount),
+      (missedAmpCount +
+        missedSpeakerCount +
+        successfulSpeakerCount +
+        successfulAmpCount),
       successfulAmpCount / (missedAmpCount + successfulAmpCount),
       successfulSpeakerCount / (missedSpeakerCount + successfulSpeakerCount),
     ];
   else
     return [
       false,
       (successfulAmpCount + successfulSpeakerCount) /
-        (missedAmpCount + successfulSpeakerCount + successfulAmpCount),
+      (missedAmpCount + successfulSpeakerCount + successfulAmpCount),
     ];
 }
 
@@ -1015,87 +1015,90 @@ await tableSetup();
       </template>
       <template #default>
         <div>
-          <table
-            id="teamTable"
-            class="table-auto border-4 border-gray-50"
-          >
-            <colgroup
-              span="2"
-              class="odd:bg-gray-50"
-            />
-            <colgroup
-              span="2"
-              class="odd:bg-gray-50"
-            />
-            <colgroup
-              span="3"
-              class="odd:bg-gray-50"
-            />
-            <colgroup
-              span="3"
-              class="odd:bg-gray-50"
-            />
-            <colgroup
-              span="3"
-              class="odd:bg-gray-50"
-            />
-            <thead class="top-0 sticky bg-gray-50 z-10">
+            <table
+              id="teamTable"
+              class="table-auto border-4 border-gray-50 dark:border-gray-800 dark:bg-gray-900"
+            >
+              <colgroup
+                span="2"
+                class="odd:bg-gray-50 dark:bg-gray-800"
+              />
+              <colgroup
+                span="2"
+                class="odd:bg-gray-50 dark:bg-gray-700"
+              />
+              <colgroup
+                span="3"
+                class="odd:bg-gray-50 dark:bg-gray-800"
+              />
+              <colgroup
+                span="3"
+                class="odd:bg-gray-50 dark:bg-gray-700"
+              />
+              <colgroup
+                span="3"
+                class="odd:bg-gray-50 dark:bg-gray-800"
+              />
+              <thead class="top-0 sticky bg-gray-50 z-10">
               <tr>
-                <th colspan="2" />
-                <th colspan="2">
-                  <p class="text-xs font-light">Average</p>
-                  Ratings
-                  <p class="text-xs font-light">/5.00</p>
+                <th colspan="2" class="dark:bg-gray-800"/>
+                  <th colspan="2" class="dark:bg-gray-800">
+                      <p class="text-xs font-light !text-primary">Average</p>
+                  <p class="!text-primary">Ratings</p>
+                  <p class="text-xs font-light !text-primary">/5.00</p>
                 </th>
                 <th
                   colspan="3"
                   scope="colgroup"
+                  class="dark:bg-gray-800"
                 >
-                  <p class="text-xs font-light">Average</p>
-                  Auto Cycles
+                  <p class="text-xs font-light !text-primary">Average</p>
+                  <p class="!text-primary">Cycles</p>
                 </th>
                 <th
                   colspan="3"
                   scope="colgroup"
+                  class="dark:bg-gray-800"
                 >
-                  <p class="text-xs font-light">Average</p>
-                  Teleop Cycles
+                  <p class="text-xs font-light !text-primary">Average</p>
+                  <p class="!text-primary">Teleop Cycles</p>
                 </th>
                 <th
                   colspan="3"
                   scope="colgroup"
+                  class="dark:bg-gray-800"
                 >
-                  <p class="text-xs font-light">Average</p>
-                  Endgame
+                  <p class="text-xs font-light !text-primary">Average</p>
+                  <p class="!text-primary">Endgame</p>
                 </th>
               </tr>
               <tr>
                 <th
                   scope="col"
                   v-for="(col, index) of columns"
-                  class="font-medium text-sm"
+                  class="font-medium text-sm dark:bg-gray-800"
                 >
                   <UButton
                     v-if="col.sortable"
                     @click="sortTable(index, col.sort, col.label)"
                     :trailing-icon="col.icon"
                     variant="ghost"
-                    class="rounded-full"
+                    class="rounded-full dark:bg-gray-700"
                     size="xs"
                     :label="col.label"
                     color="gray"
                   /><UButton
-                    v-else
-                    :label="col.label"
-                    size="xs"
-                    variant="ghost"
-                    class="rounded-full"
-                    color="gray"
-                  />
+                  v-else
+                  :label="col.label"
+                  size="xs"
+                  variant="ghost"
+                  class="rounded-full dark:bg-gray-700"
+                  color="gray"
+                />
                 </th>
               </tr>
-            </thead>
-            <tbody>
+              </thead>
+              <tbody>
               <tr
                 v-for="team of teamsData"
                 class="border-b border-gray-200 dark:border-gray-700"
@@ -1108,6 +1111,7 @@ await tableSetup();
                     size="xs"
                     @click="navigateTo('/teams/' + team.team.data)"
                     trailing-icon="i-heroicons-chart-bar-square"
+                    class="dark:bg-gray-700"
                   />
                 </td>
                 <td class="text-center">
@@ -1117,6 +1121,7 @@ await tableSetup();
                     icon="i-heroicons-photo"
                     variant="soft"
                     @click="navigateTo('/teams/attachments/' + team.team.data)"
+                    class="dark:bg-gray-700"
                   />
                 </td>
                 <td class="text-center">
@@ -1159,7 +1164,7 @@ await tableSetup();
                       variant="soft"
                       :color="team.autoAcc.color"
                       size="xs"
-                      class="mx-auto"
+                      class="mx-auto dark:bg-gray-700"
                     />
                     <template #panel>
                       <div class="flex">
@@ -1296,7 +1301,7 @@ await tableSetup();
                 <td class="text-center">
                   <UPopover mode="hover">
                     <UButton
-                      class="m-1 mx-auto"
+                      class="m-1 mx-auto dark:bg-gray-700"
                       variant="soft"
                       icon="i-heroicons-chart-pie"
                       color="gray"
@@ -1317,9 +1322,9 @@ await tableSetup();
                   </UPopover>
                 </td>
               </tr>
-            </tbody>
-          </table>
-        </div>
+              </tbody>
+            </table>
+          </div>
       </template>
     </UCard>
   </OuterComponents>

pages/users.vue

@@ -312,6 +312,7 @@ const { pending, data: res } = await useLazyAsyncData('res', () => setup());
               <UButton
                 color="gray"
                 variant="soft"
+                class="dark:bg-gray-700"
                 icon="i-heroicons-trash"
                 @click="deleteUser(row[0])"
               />