Merge branch 'master' into linking-anh

1 files changed, 63 insertions, 29 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 3fcb024df..a6494e540 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,3 +1,6 @@
+@import "../global/globalCssVariables.scss";
+
+
 .audiobox-container,
 .audiobox-container-interactive {
     width: 100%;
@@ -19,10 +22,12 @@
             height: 100%;
             align-items: center;
             display: inherit;
-            background: dimgray;
+            background: $medium-gray;
             left: 0px;
+            color: $dark-gray;
+
             &:hover {
-                color: white;
+                color: $black;
                 cursor: pointer;
             }
         }
@@ -44,9 +49,17 @@
     .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 {
@@ -61,25 +74,37 @@
         position: relative;
         padding-right: 5px;
         display: flex;
-        background-color: red;      
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 7px;
+        background-color: $medium-blue;
+        padding: 10px;
 
         .time {
             position: relative;
             height: 100%;
             width: 100%;
-            font-size: 20;
+            font-size: 16px;
             text-align: center;
-            top: 5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
         }
 
         .buttons {
+            cursor: pointer;
             position: relative;
             margin-top: auto;
             margin-bottom: auto;
             width: 25px;
+            width: 25px;
             padding: 5px;
-            &:hover{
-                background-color: crimson;
+            color: $dark-gray;
+
+            &:hover {
+                color: $black;
             }
         }
     }
@@ -89,16 +114,15 @@
         height: 100%;
         position: relative;
         display: flex;
-        padding-left: 2px;
-        background: black;
+        background: $dark-gray;
 
         .audiobox-dictation {
             position: absolute;
-            width: 30px;
+            width: 40px;
             height: 100%;
             align-items: center;
             display: inherit;
-            background: dimgray;
+            background: $medium-gray;
             left: 0px;
         }
 
@@ -109,20 +133,32 @@
             position: relative;
             padding-right: 5px;
             display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-            .audiobox-playhead {
+            .audiobox-buttons {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
-                margin-right: 2px;
-                height: 25px;
-                padding: 2px;
+                width: 30px;
+                height: 30px;
                 border-radius: 50%;
-                background-color: black;
-                color: white;
+                background-color: $dark-gray;
+                color: $white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                left: 5px;
+
                 &:hover {
-                    background-color: grey;
-                    color: lightgrey;
+                    background-color: $black;
+                }
+
+                svg {
+                    width: 100%;
+                    position: absolute;
+                    border-width: "thin";
+                    border-color: "white";
                 }
             }
 
@@ -131,30 +167,29 @@
                 margin-top: auto;
                 margin-bottom: auto;
                 width: 25px;
-                padding: 2px;
                 align-items: center;
                 display: inherit;
-                background: dimgray;
+                background: $medium-gray;
             }
 
             .audiobox-timeline {
                 position: absolute;
                 width: 100%;
-                border: gray solid 1px;
-                border-radius: 3px;
                 z-index: 1000;
                 overflow: hidden;
+                border-right: 5px solid black;
             }
 
             .audioBox-total-time,
             .audioBox-current-time {
                 position: absolute;
-                font-size: 8;
+                font-size: $small-text;
                 top: 100%;
-                color: white;
+                color: $white;
             }
+
             .audioBox-current-time {
-                left: 30px;
+                left: 42px;
             }
 
             .audioBox-total-time {
@@ -164,7 +199,6 @@
     }
 }
 
-
 @media only screen and (max-device-width: 480px) {
     .audiobox-dictation {
         font-size: 5em;
@@ -180,9 +214,9 @@
         font-size: 3em;
     }
 
-    .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
     .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
-    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
+    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-buttons {
         width: 70px;
     }
 }
\ No newline at end of file