1 files changed, 101 insertions, 24 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index a6494e540..b33c7f506 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -3,13 +3,101 @@
 
 .audiobox-container,
 .audiobox-container-interactive {
+  width: 100%;
+  height: 100%;
+  position: inherit;
+  display: flex;
+  position: relative;
+  cursor: default;
+
+  .audiobox-buttons {
+    display: flex;
+    width: 100%;
+    align-items: center;
+
+    .audiobox-dictation {
+      position: relative;
+      width: 30px;
+      height: 100%;
+      align-items: center;
+      display: inherit;
+      background: $medium-gray;
+      left: 0px;
+      color: $dark-gray;
+      &:hover {
+        color: $black;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .audiobox-control,
+  .audiobox-control-interactive {
+    top: 0;
+    max-height: 32px;
+    width: 100%;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .audiobox-control-interactive {
+       pointer-events: all;
+  }
+
+  .audiobox-record-interactive,
+  .audiobox-record {
+        pointer-events: all;
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        color: white;
+        font-weight: bold;
+        background-color: $dark-gray;
+   }
+
+   .audiobox-record {
+        pointer-events: none;
+   }
+
+  .recording {
+    margin-top: auto;
+    margin-bottom: auto;
     width: 100%;
     height: 100%;
-    position: inherit;
-    display: flex;
     position: relative;
-    cursor: default;
+    padding-right: 5px;
+    display: flex;
+    background-color: $medium-blue;
 
+    .time {
+      position: relative;
+      width: 100%;
+      font-size: $large-header;
+      text-align: center;
+    }
+
+    .recording-buttons {
+      position: relative;
+      margin-top: auto;
+      margin-bottom: auto;
+      color: $dark-gray;
+      &:hover {
+        color: $black;
+      }
+    }
+
+    .time, .recording-buttons {
+        display: flex;
+        align-items: center;
+        padding: 5px;
+    }
+  }
     .audiobox-buttons {
         display: flex;
         width: 100%;
@@ -46,26 +134,6 @@
         pointer-events: all;
     }
 
-    .audiobox-record-interactive,
-    .audiobox-record {
-        pointer-events: all;
-        cursor: pointer;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        color: white;
-        font-weight: bold;
-    }
-
-    .audiobox-record {
-        pointer-events: none;
-    }
-
     .recording {
         margin-top: auto;
         margin-bottom: auto;
@@ -174,6 +242,9 @@
 
             .audiobox-timeline {
                 position: absolute;
+                top: 0;
+                background: white;
+                height: 100%;
                 width: 100%;
                 z-index: 1000;
                 overflow: hidden;
@@ -195,6 +266,12 @@
             .audioBox-total-time {
                 right: 2px;
             }
+
+            .audiobox-zoom {
+                bottom: 0;
+                left: 30px;
+                width: 70px;
+            }
         }
     }
 }
@@ -219,4 +296,4 @@
     .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-buttons {
         width: 70px;
     }
-}
\ No newline at end of file
+}