checkpoint for progess. added franka force. fleshed out the ux for tagging

client/app/main.css

@@ -316,14 +316,23 @@ html, body {
         background-image: linear-gradient(#b45f06, #783f04) !important;
     }
 
-    .status-container .robotiq .progress {
-        margin-bottom: 5px;
+    .force-bar .progress {
+        margin-bottom: 0px;
     }
 
-    .status-container .robotiq .list-group-horizontal {
+    .force-bar .list-group-horizontal {
         justify-content: center;
     }
 
+    .force-bar .force-value {
+        margin-left: 10px;
+    }
+
+    .force-bar .bar-label {
+        color: black;
+        font-weight: 500;
+    }
+
     #recordingStartButton[active] {
         animation: blinker 3s linear infinite;
     }
@@ -382,4 +391,22 @@ html, body {
         width: 100%;
     }
 
-    
+    #playTagError {
+        margin-top: 5px;
+    }
+
+    .tagging-options i {
+        font-size: 30px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
+
+
+    .tagging-options {
+        height: 0;
+        overflow: hidden;
+        transition: height 600ms ease 0ms;
+    }
+    .tagging-options.open {
+        height: 122px;
+    }