fix(toolbar): make toolbar smaller (#2808)

css/_toolbars.scss

@@ -358,7 +358,7 @@
          * Undo atlaskit padding by reducing margins.
          */
         margin: -15px -24px;
-        padding: 0;
+        padding: 4px 0;
 
         .overflow-menu-item {
             align-items: center;
@@ -366,7 +366,7 @@
             cursor: pointer;
             display: flex;
             font-size: 14px;
-            height: 32px;
+            height: 22px;
             padding: 5px 12px;
 
             &:hover {
@@ -412,7 +412,7 @@
         cursor: pointer;
         display: inline-block;
         line-height: $newToolbarSize;
-        margin: 0 8px;
+        margin: 0 4px;
         text-align: center;
     }
 
@@ -435,7 +435,7 @@
 
     .toolbox-icon {
         height: $newToolbarSize;
-        font-size: 36px;
+        font-size: 24px;
         width: $newToolbarSize;
     }
 }

css/_variables.scss

@@ -40,8 +40,8 @@ $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
 $newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
 $newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $newToolbarFontSize: 1.9em;
-$newToolbarSize: 56px;
-$newToolbarSizeWithPadding: calc(56px + 32px);
+$newToolbarSize: 32px;
+$newToolbarSizeWithPadding: calc(32px + 32px);
 $secToolbarFontSize: 1.9em;
 $secToolbarLineHeight: 45px;
 $toolbarAvatarPadding: 10px;