Bug fix border color (#2243)

viamrobotics · Apr 19, 2023 · 6addd48 · 6addd48
1 parent 92b2551
commit 6addd48
Show file tree

Hide file tree

Showing 22 changed files with 203 additions and 135 deletions.
diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
diff --git a/web/frontend/package.json b/web/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   "dependencies": {
     "@fontsource/space-mono": "^4.5.12",
     "@improbable-eng/grpc-web": "^0.13.0",
-    "@viamrobotics/prime": "^0.1.7",
+    "@viamrobotics/prime": "^0.1.10",
     "@viamrobotics/rpc": "^0.1.34",
     "@viamrobotics/sdk": "^0.0.34",
     "@vueuse/core": "^9.13.0",

diff --git a/web/frontend/src/components/arm.vue b/web/frontend/src/components/arm.vue
@@ -227,11 +227,11 @@ const armCopyJoints = (status: ArmStatus) => {
         @click.stop="stop()"
       />
     </div>
-    <div class="border border-t-0 border-black p-4">
+    <div class="border-border-1 border border-t-0 p-4">
       <div class="mb-4 flex flex-wrap gap-4">
         <div
           v-if="toggle[name]"
-          class="border border-black p-4"
+          class="border-border-1 border p-4"
         >
           <h3 class="mb-2">
             END POSITION (mms)
@@ -244,7 +244,7 @@ const armCopyJoints = (status: ArmStatus) => {
               <label class="py-1 pr-2 text-right">{{ cc.endPosition[1] }}</label>
               <input
                 v-model="cc.endPositionValue"
-                class="border border-black px-4 py-1"
+                class="border-border-1 border px-4 py-1"
               >
             </template>
           </div>
@@ -264,7 +264,7 @@ const armCopyJoints = (status: ArmStatus) => {
         </div>
         <div
           v-if="toggle[name]"
-          class="border border-black p-4"
+          class="border-border-1 border p-4"
         >
           <h3 class="mb-2">
             JOINTS (degrees)
@@ -277,7 +277,7 @@ const armCopyJoints = (status: ArmStatus) => {
               <label class="py-1 pr-2 text-right">Joint {{ bb.joint }}</label>
               <input
                 v-model="bb.jointValue"
-                class="border border-black px-4 py-1"
+                class="border-border-1 border px-4 py-1"
               >
             </template>
           </div>
@@ -299,7 +299,7 @@ const armCopyJoints = (status: ArmStatus) => {
       <div class="flex flex-wrap gap-4">
         <div
           v-if="status"
-          class="border border-black p-4"
+          class="border-border-1 border p-4"
         >
           <h3 class="mb-2">
             END POSITION (mms)
@@ -354,7 +354,7 @@ const armCopyJoints = (status: ArmStatus) => {
         </div>
         <div
           v-if="status"
-          class="border border-black p-4"
+          class="border-border-1 border p-4"
         >
           <h3 class="mb-2">
             JOINTS (degrees)

diff --git a/web/frontend/src/components/audio-input.vue b/web/frontend/src/components/audio-input.vue
@@ -42,7 +42,7 @@ const toggleExpand = async () => {
       slot="title"
       crumbs="audio_input"
     />
-    <div class="h-auto border-x border-b border-black p-2">
+    <div class="border-border-1 h-auto border-x border-b p-2">
       <div class="container mx-auto">
         <div class="pt-4">
           <div class="flex items-center gap-2">

diff --git a/web/frontend/src/components/base.vue b/web/frontend/src/components/base.vue
@@ -292,7 +292,7 @@ onUnmounted(() => {
         @click="stop"
       />
 
-      <div class="flex flex-wrap gap-4 border border-t-0 border-black sm:flex-nowrap">
+      <div class="border-border-1 flex flex-wrap gap-4 border border-t-0 sm:flex-nowrap">
         <div class="flex min-w-fit flex-col gap-4 p-4">
           <h2 class="font-bold">
             Motor Controls
@@ -454,7 +454,7 @@ onUnmounted(() => {
         </div>
         <div
           data-parent="base"
-          class="justify-start gap-4 border-black p-4 sm:border-l"
+          class="border-border-1 justify-start gap-4 p-4 sm:border-l"
           :class="selectedView === 'Stacked' ? 'flex flex-col' : 'grid grid-cols-2 gap-4'"
         >
           <!-- ******* CAMERAS *******  -->

diff --git a/web/frontend/src/components/board.vue b/web/frontend/src/components/board.vue
@@ -86,48 +86,48 @@ const setPWMFrequency = async () => {
       slot="title"
       crumbs="board"
     />
-    <div class="overflow-auto border border-t-0 border-black p-4">
+    <div class="border-border-1 overflow-auto border border-t-0 p-4">
       <h3 class="mb-2">
         Analogs
       </h3>
-      <table class="mb-4 table-auto border border-black">
+      <table class="border-border-1 mb-4 table-auto border">
         <tr
           v-for="(analog, analogName) in status.analogsMap"
           :key="analogName"
         >
-          <th class="border border-black p-2">
+          <th class="border-border-1 border p-2">
             {{ analogName }}
           </th>
-          <td class="border border-black p-2">
+          <td class="border-border-1 border p-2">
             {{ analog.value || 0 }}
           </td>
         </tr>
       </table>
       <h3 class="mb-2">
         Digital Interrupts
       </h3>
-      <table class="mb-4 w-full table-auto border border-black">
+      <table class="border-border-1 mb-4 w-full table-auto border">
         <tr
           v-for="(di, interruptName) in status.digitalInterruptsMap"
           :key="interruptName"
         >
-          <th class="border border-black p-2">
+          <th class="border-border-1 border p-2">
             {{ interruptName }}
           </th>
-          <td class="border border-black p-2">
+          <td class="border-border-1 border p-2">
             {{ di.value || 0 }}
           </td>
         </tr>
       </table>
       <h3 class="mb-2">
         GPIO
       </h3>
-      <table class="mb-4 w-full table-auto border border-black">
+      <table class="border-border-1 mb-4 w-full table-auto border">
         <tr>
-          <th class="border border-black p-2">
+          <th class="border-border-1 border p-2">
             Get
           </th>
-          <td class="border border-black p-2">
+          <td class="border-border-1 border p-2">
             <div class="flex flex-wrap items-end gap-2">
               <v-input
                 label="Pin"
@@ -154,7 +154,7 @@ const setPWMFrequency = async () => {
           </td>
         </tr>
         <tr>
-          <th class="border border-black p-2">
+          <th class="border-border-1 border p-2">
             Set
           </th>
           <td class="p-2">
@@ -167,7 +167,7 @@ const setPWMFrequency = async () => {
               />
               <select
                 v-model="setLevel"
-                class="mr-2 h-[30px] border border-black bg-white text-sm"
+                class="border-border-1 mr-2 h-[30px] border bg-white text-sm"
               >
                 <option>low</option>
                 <option>high</option>

diff --git a/web/frontend/src/components/camera/cameras-list.vue b/web/frontend/src/components/camera/cameras-list.vue
@@ -44,7 +44,7 @@ const setupCamera = (cameraName: string) => {
       crumbs="camera"
     />
 
-    <div class="flex flex-col gap-4 border-x border-b border-black p-4">
+    <div class="border-border-1 flex flex-col gap-4 border-x border-b p-4">
       <v-switch
         :label="camera.name"
         :aria-label="openCameras[camera.name] ? `Hide Camera: ${camera.name}` : `View Camera: ${camera.name}`"

diff --git a/web/frontend/src/components/do-command.vue b/web/frontend/src/components/do-command.vue
@@ -75,7 +75,7 @@ const namesToPrettySelect = (resourcesToPretty: commonApi.ResourceName.AsObject[
     title="DoCommand()"
     class="doCommand"
   >
-    <div class="h-full w-full border border-t-0 border-black p-4">
+    <div class="border-border-1 h-full w-full border border-t-0 p-4">
       <v-select
         label="Selected Component"
         placeholder="Select a component"
@@ -90,7 +90,7 @@ const namesToPrettySelect = (resourcesToPretty: commonApi.ResourceName.AsObject[
           <p class="text-large">
             Input
           </p>
-          <div class="h-[250px] w-full max-w-full border border-black p-2">
+          <div class="border-border-1 h-[250px] w-full max-w-full border p-2">
             <v-code-editor
               language="json"
               value="{}"
@@ -110,7 +110,7 @@ const namesToPrettySelect = (resourcesToPretty: commonApi.ResourceName.AsObject[
           <p class="text-large">
             Output
           </p>
-          <div class="h-[250px] w-full border border-black p-2">
+          <div class="border-border-1 h-[250px] w-full border p-2">
             <v-code-editor
               language="json"
               :value="output"

diff --git a/web/frontend/src/components/gamepad.vue b/web/frontend/src/components/gamepad.vue
@@ -289,7 +289,7 @@ watch(() => enabled, () => {
       >Disabled</span>
     </div>
 
-    <div class="h-full w-full border border-t-0 border-black p-4">
+    <div class="border-border-1 h-full w-full border border-t-0 p-4">
       <div class="flex flex-row">
         <label class="subtitle mr-2">Enabled</label>
         <v-switch

diff --git a/web/frontend/src/components/gantry.vue b/web/frontend/src/components/gantry.vue
@@ -62,20 +62,20 @@ const stop = () => {
         @click.stop="stop"
       />
     </div>
-    <div class="overflow-auto border border-t-0 border-black p-4">
-      <table class="border border-t-0 border-black p-4">
+    <div class="border-border-1 overflow-auto border border-t-0 p-4">
+      <table class="border-border-1 border border-t-0 p-4">
         <thead>
           <tr>
-            <th class="border border-black p-2">
+            <th class="border-border-1 border p-2">
               axis
             </th>
             <th
-              class="border border-black p-2"
+              class="border-border-1 border p-2"
               colspan="2"
             >
               position
             </th>
-            <th class="border border-black p-2">
+            <th class="border-border-1 border p-2">
               length
             </th>
           </tr>
@@ -85,7 +85,7 @@ const stop = () => {
             v-for="pp in status.parts"
             :key="pp.axis"
           >
-            <th class="border border-black p-2">
+            <th class="border-border-1 border p-2">
               {{ pp.axis }}
             </th>
             <td class="flex gap-2 p-2">
@@ -107,10 +107,10 @@ const stop = () => {
                 @click="increment(pp.axis, 10)"
               />
             </td>
-            <td class="border border-black p-2">
+            <td class="border-border-1 border p-2">
               {{ pp.pos.toFixed(2) }}
             </td>
-            <td class="border border-black p-2">
+            <td class="border-border-1 border p-2">
               {{ pp.length }}
             </td>
           </tr>

diff --git a/web/frontend/src/components/gripper.vue b/web/frontend/src/components/gripper.vue
@@ -56,7 +56,7 @@ const grab = () => {
         @click.stop="stop"
       />
     </div>
-    <div class="flex gap-2 border border-t-0 border-black p-4">
+    <div class="border-border-1 flex gap-2 border border-t-0 p-4">
       <v-button
         label="Open"
         @click="open"

diff --git a/web/frontend/src/components/input-controller.vue b/web/frontend/src/components/input-controller.vue
@@ -89,7 +89,7 @@ const controls = $computed(() => {
         label="Disconnected"
       />
     </div>
-    <div class="border border-t-0 border-black p-4">
+    <div class="border-border-1 border border-t-0 p-4">
       <template v-if="connected">
         <div
           v-for="control in controls"

diff --git a/web/frontend/src/components/motor-detail.vue b/web/frontend/src/components/motor-detail.vue
@@ -153,7 +153,7 @@ onMounted(async () => {
     </div>
 
     <div>
-      <div class="border border-t-0 border-black p-4">
+      <div class="border-border-1 border border-t-0 p-4">
         <v-radio
           label="Set Power"
           :options="properties?.positionReporting ? 'Go, Go For, Go To' : 'Go'"