Merge pull request #35 from brown-dash/menu_updates_geireann

Menu updates geireann

1 files changed, 177 insertions, 161 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 3fcb024df..ac2b19fd6 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,188 +1,204 @@
+@import "../global/globalCssVariables.scss";
+
+
 .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;
     height: 100%;
-    position: inherit;
-    display: flex;
-    position: relative;
-    cursor: default;
 
-    .audiobox-buttons {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        height: 100%;
-
-        .audiobox-dictation {
-            position: relative;
-            width: 30px;
-            height: 100%;
-            align-items: center;
-            display: inherit;
-            background: dimgray;
-            left: 0px;
-            &:hover {
-                color: white;
-                cursor: pointer;
-            }
-        }
+    .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,
+  .audiobox-control-interactive {
+    top: 0;
+    max-height: 32px;
+    width: 100%;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .audiobox-control-interactive {
+    pointer-events: all;
+  }
 
-    .audiobox-control-interactive {
-        pointer-events: all;
+  .audiobox-record-interactive,
+  .audiobox-record {
+    pointer-events: all;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .audiobox-record {
+    pointer-events: none;
+  }
+
+  .recording {
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding-right: 5px;
+    display: flex;
+    background-color: $medium-blue;
+
+    .time {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      font-size: $large-header;
+      text-align: center;
+      top: 5;
     }
 
-    .audiobox-record-interactive,
-    .audiobox-record {
-        pointer-events: all;
-        width: 100%;
-        height: 100%;
-        position: relative;
+    .buttons {
+      position: relative;
+      margin-top: auto;
+      margin-bottom: auto;
+      width: 25px;
+      width: 25px;
+      padding: 5px;
+      color: $dark-gray;
+      &:hover {
+        color: $black;
+      }
     }
+  }
 
-    .audiobox-record {
-        pointer-events: none;
+  .audiobox-controls {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    background: $dark-gray;
+
+    .audiobox-dictation {
+      position: absolute;
+      width: 40px;
+      height: 100%;
+      align-items: center;
+      display: inherit;
+      background: $medium-gray;
+      left: 0px;
     }
 
-    .recording {
+    .audiobox-player {
+      margin-top: auto;
+      margin-bottom: auto;
+      width: 100%;
+      position: relative;
+      padding-right: 5px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .audiobox-buttons {
+        position: relative;
         margin-top: auto;
         margin-bottom: auto;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        padding-right: 5px;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: $dark-gray;
+        color: $white;
         display: flex;
-        background-color: red;      
-
-        .time {
-            position: relative;
-            height: 100%;
-            width: 100%;
-            font-size: 20;
-            text-align: center;
-            top: 5;
+        align-items: center;
+        justify-content: center;
+        left: 5px;
+        &:hover {
+          background-color: $black;
         }
 
-        .buttons {
-            position: relative;
-            margin-top: auto;
-            margin-bottom: auto;
-            width: 25px;
-            padding: 5px;
-            &:hover{
-                background-color: crimson;
-            }
+        svg {
+          width: 100%;
+          position: absolute;
+          border-width: "thin";
+          border-color: "white";
         }
-    }
+      }
 
-    .audiobox-controls {
-        width: 100%;
-        height: 100%;
+      .audiobox-dictation {
         position: relative;
-        display: flex;
-        padding-left: 2px;
-        background: black;
-
-        .audiobox-dictation {
-            position: absolute;
-            width: 30px;
-            height: 100%;
-            align-items: center;
-            display: inherit;
-            background: dimgray;
-            left: 0px;
-        }
+        margin-top: auto;
+        margin-bottom: auto;
+        width: 25px;
+        align-items: center;
+        display: inherit;
+        background: $medium-gray;
+      }
 
-        .audiobox-player {
-            margin-top: auto;
-            margin-bottom: auto;
-            width: 100%;
-            position: relative;
-            padding-right: 5px;
-            display: flex;
-
-            .audiobox-playhead {
-                position: relative;
-                margin-top: auto;
-                margin-bottom: auto;
-                margin-right: 2px;
-                height: 25px;
-                padding: 2px;
-                border-radius: 50%;
-                background-color: black;
-                color: white;
-                &:hover {
-                    background-color: grey;
-                    color: lightgrey;
-                }
-            }
-
-            .audiobox-dictation {
-                position: relative;
-                margin-top: auto;
-                margin-bottom: auto;
-                width: 25px;
-                padding: 2px;
-                align-items: center;
-                display: inherit;
-                background: dimgray;
-            }
-
-            .audiobox-timeline {
-                position: absolute;
-                width: 100%;
-                border: gray solid 1px;
-                border-radius: 3px;
-                z-index: 1000;
-                overflow: hidden;
-            }
-
-            .audioBox-total-time,
-            .audioBox-current-time {
-                position: absolute;
-                font-size: 8;
-                top: 100%;
-                color: white;
-            }
-            .audioBox-current-time {
-                left: 30px;
-            }
-
-            .audioBox-total-time {
-                right: 2px;
-            }
-        }
+      .audiobox-timeline {
+        position: absolute;
+        width: 100%;
+        z-index: 1000;
+        overflow: hidden;
+        border-right: 5px solid black;
+      }
+
+      .audioBox-total-time,
+      .audioBox-current-time {
+        position: absolute;
+        font-size: $small-text;
+        top: 100%;
+        color: $white;
+      }
+      .audioBox-current-time {
+        left: 42px;
+      }
+
+      .audioBox-total-time {
+        right: 2px;
+      }
     }
+  }
 }
 
-
 @media only screen and (max-device-width: 480px) {
-    .audiobox-dictation {
-        font-size: 5em;
-        display: flex;
-        width: 100;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .audiobox-container .audiobox-record,
-    .audiobox-container-interactive .audiobox-record {
-        font-size: 3em;
-    }
-
-    .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
-    .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
-    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
-        width: 70px;
-    }
-}
\ No newline at end of file
+  .audiobox-dictation {
+    font-size: 5em;
+    display: flex;
+    width: 100;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .audiobox-container .audiobox-record,
+  .audiobox-container-interactive .audiobox-record {
+    font-size: 3em;
+  }
+
+  .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
+  .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
+  .audiobox-container-interactive
+    .audiobox-controls
+    .audiobox-player
+    .audiobox-buttons {
+    width: 70px;
+  }
+}