[PhotonClient] Update dependencies to latest, update assets, and styling fixes (#767)

Currently, there is a difficult-to-reproduce bug where the backend reports that camera calibration was successful in logs via the logger but then throws an exception causing the backend to return a 500 error code with no request body which causes the frontend to interpret this as a failed calibration attempt. This ultimately leads to the entire instance of photonvision crashing and requiring the entire pi to be restarted. It is believed this issue resides inside the ConfigManager's saving action following the calibration update but is not confirmed.

photon-client/src/App.vue

@@ -1,17 +1,40 @@
 <template>
   <v-app>
     <!-- Although most of the app runs with the "light" theme, the navigation drawer needs to have white text and icons so it uses the dark theme-->
-    <v-navigation-drawer dark app permanent :mini-variant="compact" color="primary">
+    <v-navigation-drawer
+      dark
+      app
+      permanent
+      :mini-variant="compact"
+      color="primary"
+    >
       <v-list>
         <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
-        <v-list-item :class="compact ? 'pr-0 pl-0' : ''">
+        <v-list-item
+          :class="compact ? 'pr-0 pl-0' : ''"
+          style="display: flex; justify-content: center"
+        >
           <v-list-item-icon class="mr-0">
-            <img v-if="!compact" class="logo" src="./assets/logoLarge.png">
-            <img v-else class="logo" src="./assets/logoSmall.png">
+            <img
+              v-if="!compact"
+              class="logo"
+              src="@/assets/logos/logoLarge.svg"
+              alt="large logo"
+            >
+            <img
+              v-else
+              class="logo"
+              src="@/assets/logos/logoSmall.svg"
+              alt="small logo"
+            >
           </v-list-item-icon>
         </v-list-item>
 
-        <v-list-item link to="dashboard" @click="rollbackPipelineIndex()">
+        <v-list-item
+          link
+          to="dashboard"
+          @click="rollbackPipelineIndex()"
+        >
           <v-list-item-icon>
             <v-icon>mdi-view-dashboard</v-icon>
           </v-list-item-icon>
@@ -19,7 +42,12 @@
             <v-list-item-title>Dashboard</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item ref="camerasTabOpener" link to="cameras" @click="switchToDriverMode()">
+        <v-list-item
+          ref="camerasTabOpener"
+          link
+          to="cameras"
+          @click="switchToDriverMode()"
+        >
           <v-list-item-icon>
             <v-icon>mdi-camera</v-icon>
           </v-list-item-icon>
@@ -27,15 +55,22 @@
             <v-list-item-title>Cameras</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item link to="settings" @click="switchToSettingsTab()">
+        <v-list-item
+          link
+          to="settings"
+          @click="switchToSettingsTab()"
+        >
           <v-list-item-icon>
-            <v-icon>mdi-settings</v-icon>
+            <v-icon>mdi-cog</v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title>Settings</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item link to="docs">
+        <v-list-item
+          link
+          to="docs"
+        >
           <v-list-item-icon>
             <v-icon>mdi-bookshelf</v-icon>
           </v-list-item-icon>
@@ -43,7 +78,11 @@
             <v-list-item-title>Documentation</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item v-if="this.$vuetify.breakpoint.mdAndUp" link @click.stop="toggleCompactMode">
+        <v-list-item
+          v-if="this.$vuetify.breakpoint.mdAndUp"
+          link
+          @click.stop="toggleCompactMode"
+        >
           <v-list-item-icon>
             <v-icon v-if="compact">
               mdi-chevron-right
@@ -63,41 +102,60 @@
               <v-icon v-if="$store.state.settings.networkSettings.runNTServer">
                 mdi-server
               </v-icon>
-              <img v-else-if="$store.state.ntConnectionInfo.connected" src="@/assets/robot.svg" alt="">
-              <img v-else class="pulse" style="border-radius: 100%" src="@/assets/robot-off.svg" alt="">
+              <v-icon v-else-if="$store.state.ntConnectionInfo.connected">
+                mdi-robot
+              </v-icon>
+              <v-icon
+                v-else
+                style="border-radius: 100%"
+              >
+                mdi-robot-off
+              </v-icon>
             </v-list-item-icon>
             <v-list-item-content>
-              <v-list-item-title v-if="$store.state.settings.networkSettings.runNTServer" class="text-wrap">
-                NetworkTables server running for {{ $store.state.ntConnectionInfo.clients ?
-                    $store.state.ntConnectionInfo.clients : 'zero'
-                }} clients!
+              <v-list-item-title
+                v-if="$store.state.settings.networkSettings.runNTServer"
+                class="text-wrap"
+              >
+                NetworkTables server running for <span class="accent--text">{{ $store.state.ntConnectionInfo.clients }}</span> clients
               </v-list-item-title>
-              <v-list-item-title v-else-if="$store.state.ntConnectionInfo.connected && $store.state.backendConnected"
-                class="text-wrap">
-                Robot connected! {{ $store.state.ntConnectionInfo.address }}
+              <v-list-item-title
+                v-else-if="$store.state.ntConnectionInfo.connected && $store.state.backendConnected"
+                class="text-wrap"
+                style="flex-direction: column; display: flex"
+              >
+                NetworkTables Server Connected!
+                <span
+                  class="accent--text"
+                >
+                  {{ $store.state.ntConnectionInfo.address }}
+                </span>
               </v-list-item-title>
-              <v-list-item-title v-else class="text-wrap">
-                Not connected to robot!
+              <v-list-item-title
+                v-else
+                class="text-wrap"
+                style="flex-direction: column; display: flex"
+              >
+                Not connected to NetworkTables Server!
               </v-list-item-title>
-              <router-link v-if="!$store.state.settings.networkSettings.runNTServer" to="settings" class="accent--text"
-                @click="switchToSettingsTab">
-                NT server is {{ $store.state.settings.networkSettings.ntServerAddress }}
-              </router-link>
             </v-list-item-content>
           </v-list-item>
 
           <v-list-item>
             <v-list-item-icon>
               <v-icon v-if="$store.state.backendConnected">
-                mdi-wifi
+                mdi-server-network
               </v-icon>
-              <v-icon v-else class="pulse" style="border-radius: 100%;">
-                mdi-wifi-off
+              <v-icon
+                v-else
+                style="border-radius: 100%;"
+              >
+                mdi-server-network-off
               </v-icon>
             </v-list-item-icon>
             <v-list-item-content>
               <v-list-item-title class="text-wrap">
-                {{ $store.state.backendConnected ? "Backend Connected" : "Trying to connect..." }}
+                {{ $store.state.backendConnected ? "Backend Connected" : "Trying to connect to Backend" }}
               </v-list-item-title>
             </v-list-item-content>
           </v-list-item>
@@ -105,7 +163,10 @@
       </v-list>
     </v-navigation-drawer>
     <v-main>
-      <v-container fluid fill-height>
+      <v-container
+        fluid
+        fill-height
+      >
         <v-layout>
           <v-flex>
             <router-view @switch-to-cameras="switchToDriverMode" />
@@ -114,18 +175,35 @@
       </v-container>
     </v-main>
 
-    <v-dialog v-model="$store.state.logsOverlay" width="1500" dark>
+    <v-dialog
+      v-model="$store.state.logsOverlay"
+      width="1500"
+      dark
+    >
       <logs />
     </v-dialog>
-    <v-dialog v-model="needsTeamNumberSet" width="500" dark persistent>
-      <v-card dark color="primary" flat>
-        <v-card-title>No team number set!</v-card-title>
+    <v-dialog
+      v-model="needsTeamNumberSet"
+      width="500"
+      dark
+      persistent
+    >
+      <v-card
+        dark
+        color="primary"
+        flat
+      >
+        <v-card-title>NetworkTables Server Address Not Set</v-card-title>
         <v-card-text>
-          PhotonVision cannot connect to your robot! Please
-          <router-link to="settings" class="accent--text" @click="switchToSettingsTab">
-            visit the settings tab
+          PhotonVision cannot connect to the NetworkTables Server. Please visit the
+          <router-link
+            to="settings"
+            class="accent--text"
+            @click="switchToSettingsTab"
+          >
+            networking settings tab
           </router-link>
-          and set your team number.
+          and set the NetworkTables Server Address.
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -284,7 +362,7 @@ export default {
 
 @keyframes pulse-animation {
   0% {
-    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
     background-color: rgba(0, 0, 0, 0.2);
   }
 
@@ -310,7 +388,6 @@ export default {
   border-radius: 10px;
 }
 
-
 ::-webkit-scrollbar-thumb {
   background-color: #ffd843;
   border-radius: 10px;