From 6a916fd0e18115b975f280cc127771e4fdefad15 Mon Sep 17 00:00:00 2001
From: Bettenbuk Zoltan <zoltan.bettenbuk@gmail.com>
Date: Fri, 18 Oct 2019 11:09:14 +0200
Subject: [PATCH] fix: fix filmstrip-only toolbar

---
 ..._always_on_top.scss => _mini_toolbox.scss} | 41 ++++++++++-----
 css/_toolbars.scss                            | 52 -------------------
 css/main.scss                                 |  2 +-
 3 files changed, 29 insertions(+), 66 deletions(-)
 rename css/{_always_on_top.scss => _mini_toolbox.scss} (80%)

diff --git a/css/_always_on_top.scss b/css/_mini_toolbox.scss
similarity index 80%
rename from css/_always_on_top.scss
rename to css/_mini_toolbox.scss
index ab1e5d4f62..28cdc96801 100644
--- a/css/_always_on_top.scss
+++ b/css/_mini_toolbox.scss
@@ -1,13 +1,8 @@
-
+.filmstrip-toolbox,
 .always-on-top-toolbox {
     background-color: $newToolbarBackgroundColor;
     border-radius: 3px;
     display: flex;
-    flex-direction: row;
-    left: 50%;
-    position: absolute;
-    top: 10px;
-    transform: translateX(-50%);
     z-index: $toolbarZ;
 
     .toolbox-icon {
@@ -23,6 +18,23 @@
         }
     }
 
+    .toolbox-button {
+        &:nth-child(2) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+    }
+
+}
+
+.always-on-top-toolbox {
+    flex-direction: row;
+    left: 50%;
+    position: absolute;
+    top: 10px;
+    transform: translateX(-50%);
+
     .toolbox-button {
         &:first-child {
             .toolbox-icon {
@@ -31,12 +43,6 @@
             }
         }
 
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
         &:last-child {
             .toolbox-icon {
                 border-top-right-radius: 3px;
@@ -44,5 +50,14 @@
             }
         }
     }
-    
+}
+
+.filmstrip-toolbox {
+    flex-direction: column;
+
+    .toolbox-button {
+        .toolbox-icon {
+            border-radius: 3px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 9f97192d45..9ec65f25b5 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -270,58 +270,6 @@
     }
 }
 
-.filmstrip-toolbox {
-    background-color: $newToolbarBackgroundColor;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    z-index: $toolbarZ;
-
-    i {
-        cursor: pointer;
-        display: block;
-    }
-
-    i:hover {
-        background-color: $AOTToolbarButtonHoverColor;
-    }
-
-    i.toggled {
-        background: $AOTToolbarButtonToggleColor;
-    }
-
-    i.toggled:hover:not(.disabled) {
-        background-color: $AOTToolbarButtonHoverColor;
-    }
-
-    .toolbox-button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
-        text-align: center;
-    }
-
-    border-radius: 3px;
-}
-
-.filmstrip-toolbox {
-    i {
-        font-size: 1.9em;
-        height: 37px;
-        line-height: 37px;
-        width: 37px;
-    }
-
-    .toolbox-button:first-child i {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-
-    .toolbox-button:last-child i {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-}
-
 /**
  * START of fade in animation for main toolbar
  */
diff --git a/css/main.scss b/css/main.scss
index 40f5badcc9..30ee3f059b 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -26,13 +26,13 @@ $flagsImagePath: "../images/";
 /* Modules BEGIN */
 
 @import 'aui_reset';
-@import 'always_on_top';
 @import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
+@import 'mini_toolbox';
 @import 'modals/desktop-picker/desktop-picker';
 @import 'modals/device-selection/device-selection';
 @import 'modals/dialog';