From 775c8780a6a6ba6757264a8bb8702d5c2e6459d4 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 23 Mar 2019 11:24:00 -0700
Subject: [PATCH] Fixed: Consistent icon position for toolbar buttons

---
 frontend/src/Components/Menu/ToolbarMenuButton.css          | 5 +++++
 frontend/src/Components/Menu/ToolbarMenuButton.js           | 6 ++++--
 frontend/src/Components/Page/Toolbar/PageToolbarButton.css  | 3 ++-
 frontend/src/Components/Page/Toolbar/PageToolbarSection.css | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.css b/frontend/src/Components/Menu/ToolbarMenuButton.css
index 09d1a4309..71e966c71 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.css
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.css
@@ -1,11 +1,16 @@
 .menuButton {
   composes: menuButton from '~./MenuButton.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
   text-align: center;
 }
 
+.labelContainer {
+  composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
+}
+
 .label {
   composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }
diff --git a/frontend/src/Components/Menu/ToolbarMenuButton.js b/frontend/src/Components/Menu/ToolbarMenuButton.js
index b80d6eaa3..fe06793f6 100644
--- a/frontend/src/Components/Menu/ToolbarMenuButton.js
+++ b/frontend/src/Components/Menu/ToolbarMenuButton.js
@@ -22,8 +22,10 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
-        <div className={styles.label}>
-          {text}
+        <div className={styles.labelContainer}>
+          <div className={styles.label}>
+            {text}
+          </div>
         </div>
       </div>
     </MenuButton>
diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
index 7af04b6ec..e729ed000 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
@@ -1,6 +1,7 @@
 .toolbarButton {
   composes: link from '~Components/Link/Link.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   text-align: center;
 
@@ -21,7 +22,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 16px;
+  height: 24px;
 }
 
 .label {
diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarSection.css b/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
index bf020a7d0..110675b99 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
@@ -6,7 +6,7 @@
 
 .section {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-grow: 1;
 }