From 70422f4a477f1ea8c58e6822880f47b7b179226c Mon Sep 17 00:00:00 2001
From: hristoterezov <hristo@jitsi.org>
Date: Sat, 26 Aug 2017 15:19:33 -0500
Subject: [PATCH] fix(alwaysontop): change the size of the toolbar

---
 css/_toolbars.scss                          | 20 ++++++++++++++++++++
 css/_variables.scss                         |  2 ++
 react/features/always-on-top/AlwaysOnTop.js |  3 ++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 44dcf763a..bb5bd0fe1 100644
--- a/css/_toolbars.scss
+++ b/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 {
diff --git a/css/_variables.scss b/css/_variables.scss
index 76bc7641b..76cbb8a6d 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -32,6 +32,8 @@ $defaultDarkColor: #2b3d5c;
 /**
  * Toolbar
  */
+$alwaysOnTopToolbarFontSize: 1em;
+$alwaysOnTopToolbarSize: 30px;
 $defaultToolbarSize: 50px;
 $defaultFilmStripOnlyToolbarSize: 37px;
 $secToolbarFontSize: 1.9em;
diff --git a/react/features/always-on-top/AlwaysOnTop.js b/react/features/always-on-top/AlwaysOnTop.js
index 405bdc1a1..406522f5e 100644
--- a/react/features/always-on-top/AlwaysOnTop.js
+++ b/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