UI bug fixes and feature refinements (#59)

* Rework settings page; touch up contour, output, and 3D tabs; font sizing

No stream placeholder; driver mode refined; cameras page

Make settings snackbar work

Lint fix

Fix settings page padding

Actually hide settings fields if unsupported

* Make toggle buttons less confusing; fix driver toggle; form validation

* Make eyedropper work and make input/select styling more consistent

* Fix color picker and tabbing bugs

* Set up camera and settings pages to talk to the backend

* Add auto reconnect

* Add lots of tooltips and improve related thematic consistency

* Only show output stream while color picking

* Unbreak robot offset

* Increase tooltip delay and refactor tooltip label into a component

* Remove toggle button switching behavior

* Fix PnP tab and add a flag to disable FOV configuration

* Move FPS indicator

* Make GPU acceleration status use one value in the store

* Only allow IPv4 static IPs and remove accidentally committed index

photon-client/src/components/common/cv-range-slider.vue

@@ -1,10 +1,16 @@
 <template>
   <div>
-    <v-row dense align="center">
-      <v-col :cols="2">
-        <span>{{ name }}</span>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col cols="2">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
-      <v-col :cols="10">
+      <v-col cols="10">
         <v-range-slider
           :value="localValue"
           :max="max"
@@ -12,7 +18,7 @@
           hide-details
           class="align-center"
           dark
-          color="#ffd843"
+          color="accent"
           :step="step"
           @input="handleInput"
           @mousedown="$emit('rollback', localValue)"
@@ -20,6 +26,7 @@
           <template v-slot:prepend>
             <v-text-field
               dark
+              color="accent"
               :value="localValue[0]"
               :max="max"
               :min="min"
@@ -38,6 +45,7 @@
           <template v-slot:append>
             <v-text-field
               dark
+              color="accent"
               :value="localValue[1]"
               :max="max"
               :min="min"
@@ -59,10 +67,15 @@
 </template>
 
 <script>
+import TooltippedLabel from "./cv-tooltipped-label";
+
 export default {
   name: "RangeSlider",
+  components: {
+    TooltippedLabel,
+  },
   // eslint-disable-next-line vue/require-prop-types
-  props: ["name", "min", "max", "value", "step"],
+  props: ["name", "min", "max", "value", "step", "tooltip"],
   data() {
     return {
       prependFocused: false,