ref(toolbar): remove use-new-toolbox class

Very likely I broke something subtle and I'm prepared to fix it.

css/_atlaskit_overrides.scss

@@ -0,0 +1,12 @@
+/**
+ * Move Atlaskit Flag up a little bit so it does not cover the toolbar with the
+ * first notification.
+ */
+.cxGWJB{
+    bottom: calc(#{$newToolbarSizeWithPadding}) !important;
+}
+.gXSEsl:nth-child(n+2) {
+    transform: translateX(0) translateY(100%) translateY(16px) !important;
+    -ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
+    -webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
+}

css/_chat.scss

@@ -6,7 +6,7 @@
 #chatconversation {
     visibility: hidden;
     position: relative;
-    top: 5px;
+    top: 15px;
     padding: 5px;
     text-align: left;
     line-height: 20px;
@@ -60,37 +60,7 @@
 }
 
 .localuser {
-    color: #087dba;
-}
-.use-new-toolbox {
-    .chatmessage {
-        color: white;
-    }
-
-    .localuser {
-        color: #4C9AFF;
-    }
-
-    .remoteuser {
-        color: #B8C7E0;
-    }
-
-    #usermsg {
-        color: white;
-    }
-
-    .chatmessage,
-    #smileysarea,
-    #smileysContainer,
-    #usermsg {
-        background-color: $newToolbarBackgroundColor;
-    }
-
-    .smileyContainer:hover {
-        background-color: $newToolbarButtonToggleColor;
-        border-radius: 5px;
-        cursor: pointer;
-    }
+    color: #4C9AFF
 }
 
 .errorMessage {
@@ -98,10 +68,11 @@
 }
 
 .remoteuser {
-    color: white;
+    color: #B8C7E0;
 }
 
 #usermsg {
+    background-color: $newToolbarBackgroundColor;
     visibility:hidden;
     position: absolute;
     bottom: 0px;
@@ -112,8 +83,7 @@
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #3a3a3a;
-    color: #a7a7a7;
+    color: white;
     box-shadow: none;
     border-radius:0;
     font-size: 10pt;
@@ -183,7 +153,7 @@
 }
 
 .chatmessage {
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;;
     width: 93%;
     margin-left: 9px;
     margin-right: auto;
@@ -191,7 +161,7 @@
     border-top-left-radius: 0px;
     margin-top: 3px;
     left: 5px;
-    color: #a7a7a7;
+    color: white;
     overflow: hidden;
     padding-bottom: 3px;
 }
@@ -227,7 +197,7 @@
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;
     overflow: hidden;
     visibility: hidden;
 }
@@ -239,7 +209,7 @@
 #smileysContainer {
     display: none;
     position: absolute;
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;
     border-bottom: 1px solid;
     border-top: 1px solid;
     width: 100%;
@@ -257,7 +227,9 @@
 }
 
 .smileyContainer:hover {
-    background: #3e3e3e;
+    background-color: $newToolbarButtonToggleColor;
+    border-radius: 5px;
+    cursor: pointer;
 }
 
 #usermsg::-webkit-input-placeholder {

css/_filmstrip.scss

@@ -5,28 +5,19 @@
     justify-content: flex-start;
 }
 
-.use-new-toolbox {
-    .filmstrip.reduce-height {
-        bottom: $newToolbarSizeWithPadding;
-    }
-
-    .filmstrip {
-        transition: bottom .3s;
-    }
-
-    .filmstrip__videos.hidden {
-        bottom: calc(-196px - #{$newToolbarSizeWithPadding});
-    }
-}
-
 .filmstrip {
     position: absolute;
     bottom: 0;
     right: 0;
     padding: 10px 5px;
     @extend %align-right;
+    transition: bottom .3s;
     z-index: $filmstripVideosZ;
 
+    &.reduce-height {
+        bottom: $newToolbarSizeWithPadding;
+    }
+
     &__toolbar {
         @include flex();
         flex-direction: column-reverse;
@@ -83,7 +74,7 @@
         }
 
         &.hidden {
-            bottom: -196px;
+            bottom: calc(-196px - #{$newToolbarSizeWithPadding});
         }
 
         .remote-videos-container {

css/_side_toolbar_container.scss

@@ -1,41 +1,14 @@
 /**
  * Toolbar side panel main container element.
  */
-.use-new-toolbox #sideToolbarContainer {
+#sideToolbarContainer {
     background-color: $newToolbarBackgroundColor;
-
     /**
      * Make the sidebar flush with the top of the toolbar. Take the size of
      * the toolbar and subtract from 100%.
      */
     height: calc(100% - #{$newToolbarSizeWithPadding});
     left: 0;
-
-    .side-toolbar-close {
-        background: gray;
-        border: 3px solid rgba(255, 255, 255, 0.1);
-        border-radius: 100%;
-        color: white;
-        cursor:pointer;
-        height: 10px;
-        line-height: 10px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        text-align: center;
-        top: 5px;
-        width: 10px;
-        z-index: 1;
-    }
-
-    #chatconversation {
-        top: 15px;
-    }
-}
-#sideToolbarContainer {
-    background-color: $sideToolbarContainerBg;
-    height: 100%;
-    left: $defaultToolbarSize;
     max-width: $sidebarWidth;
     overflow: hidden;
     position: absolute;
@@ -112,4 +85,21 @@
             margin-top: 0 !important;
         }
     }
+
+    .side-toolbar-close {
+        background: gray;
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-radius: 100%;
+        color: white;
+        cursor:pointer;
+        height: 10px;
+        line-height: 10px;
+        padding: 4px;
+        position: absolute;
+        right: 5px;
+        text-align: center;
+        top: 5px;
+        width: 10px;
+        z-index: 1;
+    }
 }

css/_toolbars.scss

@@ -19,17 +19,6 @@
     vertical-align: middle;
 }
 
-.use-new-toolbox {
-    .cxGWJB{
-        bottom: calc(#{$newToolbarSizeWithPadding});
-    }
-    .gXSEsl:nth-child(n+2) {
-        transform: translateX(0) translateY(100%) translateY(16px);
-        -ms-transform: translateX(0) translateY(100%) translateY(16px);
-        -webkit-transform: translateX(0) translateY(100%) translateY(16px);
-    }
-}
-
 /**
  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
  */

css/_vertical_filmstrip_overrides.scss

@@ -19,20 +19,6 @@
         text-align: left;
     }
 
-    &.use-new-toolbox {
-        /**
-         * Adjust the height of the filmstrip as the toolbar is displayed.
-         */
-        .filmstrip {
-            top: 0;
-            transition: height .3s ease-in;
-
-            &.reduce-height {
-                height: calc(100% - #{$newToolbarSizeWithPadding});
-            }
-        }
-    }
-
     .filmstrip {
         align-items: flex-end;
         box-sizing: border-box;
@@ -46,8 +32,17 @@
          * any parent is also fixed.
          */
         position: fixed;
+        top: 0;
+        transition: height .3s ease-in;
         z-index: $filmstripVideosZ;
 
+        /**
+         * Adjust the height of the filmstrip as the toolbar is displayed.
+         */
+        &.reduce-height {
+            height: calc(100% - #{$newToolbarSizeWithPadding});
+        }
+
         /**
          * Hide videos by making them slight to the right.
          */

css/main.scss

@@ -31,6 +31,7 @@
 /* Modules BEGIN */
 
 @import 'aui_reset';
+@import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';

css/modals/invite/_info.scss

@@ -1,10 +1,7 @@
-.use-new-toolbox {
-    font-size: 14px;
-}
-
 .info-dialog {
     cursor: default;
     display: flex;
+    font-size: 14px;
 
     .info-dialog-action-link {
         display: inline-block;

modules/UI/UI.js

@@ -319,12 +319,6 @@ UI.start = function() {
 
         // Initialize side panels
         SidePanels.init(eventEmitter);
-
-        // TODO: remove this class once the old toolbar has been removed. This
-        // class is set so that any CSS changes needed to adjust elements
-        // outside of the new toolbar can be scoped to just the app with the new
-        // toolbar enabled.
-        $('body').addClass('use-new-toolbox');
     }
 
     interfaceConfig.VERTICAL_FILMSTRIP

react/features/filmstrip/components/web/Filmstrip.js

@@ -108,7 +108,9 @@ class Filmstrip extends Component<*> {
         // will get updated without replacing the DOM. If the known DOM gets
         // modified, then the views will get blown away.
         const reduceHeight
-            = _toolboxVisible && interfaceConfig.TOOLBAR_BUTTONS.length;
+            = !_filmstripOnly
+            && _toolboxVisible
+            && interfaceConfig.TOOLBAR_BUTTONS.length;
         const classNames
             = `filmstrip ${
                 _remoteVideosVisible ? '' : 'hide-videos'} ${