fix(prejoin_page) Add labels for video & more UI fixes

css/_atlaskit_overrides.scss

@@ -48,19 +48,3 @@
 .toolbox-button-wth-dialog .eYJELv {
     max-height: initial;
 }
-
-/**
- * Override @atlaskit/InlineDialog styling for the video preview
- */
-.video-preview .eYJELv {
-    outline: none;
-    padding: 16px;
-}
-
-/**
- * Override @atlaskit/InlineDialog styling for the audio preview
- */
-.audio-preview .eYJELv {
-    outline: none;
-    padding: 0;
-}

css/_audio-preview.css

@@ -121,4 +121,10 @@
         right: 16px;
         top: 18px;
     }
+
+   // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 0;
+    }
 }

css/_meter.css

@@ -3,21 +3,21 @@
         display: inline-block;
 
         & > svg {
-            fill: #76CF9C;
+            fill: #4E5E6C;
             width: 38px;
         }
     }
 
     &.metr--disabled {
         & > svg {
-            fill: #5E6D7A;
+            fill: #4E5E6C;
         }
     }
 }
 
 .metr-l-0 {
     rect:first-child {
-        fill: #279255;
+        fill: #31B76A;
     }
 }
 
@@ -26,8 +26,5 @@
         rect:nth-child(-n+#{$i+1}) {
             fill: #31B76A;
         }
-        rect:first-child {
-            fill: #279255;
-        }
     }
 }

css/_settings-button.scss

@@ -50,15 +50,11 @@
         bottom: 0;
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
         cursor: pointer;
-        height: 18px;
+        height: 16px;
         position: absolute;
         text-align: center;
-        right: 2px;
-        width: 18px;
-
-        &:hover {
-            background-color: #daebfa;
-        }
+        right: 4px;
+        width: 16px;
 
         &> svg {
             margin-top: 5px;
@@ -67,9 +63,16 @@
         &--disabled {
             background-color: #a4b8d1;
             cursor: default;
+        }
 
-            &:hover {
-                background-color: #a4b8d1;
+        &--hovered {
+            bottom: -1px;
+            height: 20px;
+            right: 2px;
+            width: 20px;
+
+            &> svg {
+                margin-top: 6px;
             }
         }
     }

css/_video-preview.css

@@ -1,4 +1,7 @@
 .video-preview {
+    max-height: 290px;
+    overflow: auto;
+
     &-entry {
         cursor: pointer;
         height: 135px;
@@ -40,4 +43,23 @@
         position: absolute;
         width: 100%;
     }
+
+    &-label {
+        color: #fff;
+        font-size: 13px;
+        line-height: 20px;
+        overflow: hidden;
+        padding: 8px;
+        position: absolute;
+        text-align: center;
+        text-overflow: ellipsis;
+        width: 220px;
+        z-index: 2;
+    }
+
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 16px;
+    }
 }