fix(alwaysontop): change the size of the toolbar

css/_toolbars.scss

@@ -50,6 +50,21 @@
         display: inline-block;
     }
 
+    /**
+     * Always on top overrides.
+     */
+    &.always-on-top {
+        /**
+         * Toolbar button styles for always on top.
+         */
+        > .button {
+            font-size: $alwaysOnTopToolbarFontSize;
+            height: $alwaysOnTopToolbarSize;
+            line-height: $alwaysOnTopToolbarSize;
+            width: $alwaysOnTopToolbarSize;
+        }
+    }
+
     /**
      * Toolbar button styles.
      */
@@ -128,6 +143,11 @@
         border-radius: 3px;
         opacity: 0;
 
+        &.always-on-top {
+            height: $alwaysOnTopToolbarSize;
+            top: 10px;
+        }
+
         @include transform(translateX(-50%));
 
         > div:first-child .button {

css/_variables.scss

@@ -32,6 +32,8 @@ $defaultDarkColor: #2b3d5c;
 /**
  * Toolbar
  */
+$alwaysOnTopToolbarFontSize: 1em;
+$alwaysOnTopToolbarSize: 30px;
 $defaultToolbarSize: 50px;
 $defaultFilmStripOnlyToolbarSize: 37px;
 $secToolbarFontSize: 1.9em;

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

@@ -251,7 +251,8 @@ export default class AlwaysOnTop extends Component {
      */
     render() {
         const className
-            = `toolbar_primary ${this.state.visible ? 'fadeIn' : 'fadeOut'}`;
+            = `toolbar_primary always-on-top ${
+                this.state.visible ? 'fadeIn' : 'fadeOut'}`;
 
         return (
             <StatelessToolbar