From 1d1aaccc8e8232f201b56aff180ec40167862566 Mon Sep 17 00:00:00 2001
From: elit-altum <manan.sharma311@gmail.com>
Date: Mon, 6 Apr 2020 20:24:39 +0530
Subject: [PATCH 1/2] fix(toolbar): centered the toolbar icons

---
 client/styles/components/_toolbar.scss | 30 ++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 86dec1b2..e4157d8e 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -1,6 +1,9 @@
 .toolbar__play-button {
 	@include themify() {
 		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
@@ -18,8 +21,13 @@
 	    }
 	}
 	margin-right: #{15 / $base-font-size}rem;
-	& span {
-		padding-left: #{3 / $base-font-size}rem;
+	span {
+		padding-left: #{4 / $base-font-size}rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
 	}
 }
 
@@ -30,16 +38,29 @@
 .toolbar__stop-button {
 	@include themify() {
 		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		margin-right: #{15 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
 	}
+	span {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+	}
 }
 
 .toolbar__preferences-button {
 	@include themify() {
 		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		line-height: #{52 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
@@ -50,6 +71,11 @@
 	margin-left: auto;
 	& span {
 		padding-left: #{1 / $base-font-size}rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
 	}
 }
 

From 3c7c159e727f4166d51e13861530963b176ed975 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 9 Apr 2020 16:51:25 -0400
Subject: [PATCH 2/2] Move pixel measurements to rems

---
 client/styles/components/_toolbar.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index e4157d8e..8db1ab81 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -26,8 +26,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 20px;
-		height: 20px;
+		width: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
 	}
 }
 
@@ -50,8 +50,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 20px;
-		height: 20px;
+		width: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
 	}
 }
 
@@ -74,8 +74,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 20px;
-		height: 20px;
+		width: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
 	}
 }