feat(aot): improve AOT UI/UX

css/_mini_toolbox.scss

@@ -8,11 +8,11 @@
     .toolbox-icon {
         cursor: pointer;
         padding: 7px;
-        width: 25px;
-        height : 25px;
+        width: 22px;
+        height : 22px;
 
         &.toggled {
-            background: $AOTToolbarButtonToggleColor;
+            background: none;
         }
 
         &.disabled {
@@ -27,6 +27,7 @@
     position: absolute;
     bottom: 10px;
     transform: translateX(-50%);
+    padding: 3px !important;
 }
 
 .filmstrip-toolbox {

css/_variables.scss

@@ -42,8 +42,6 @@ $presence-idle: rgb(172, 172, 172);
 $newToolbarBackgroundColor: #131519;
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
-$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
-$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $menuBG:#242528;
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;

react/features/always-on-top/Toolbar.js

@@ -52,8 +52,8 @@ export default class Toolbar extends Component<Props> {
                 onMouseOut = { onMouseOut }
                 onMouseOver = { onMouseOver }>
                 <AudioMuteButton />
-                <HangupButton customClass = 'hangup-button' />
                 <VideoMuteButton />
+                <HangupButton customClass = 'hangup-button' />
             </div>
         );
     }