Merge pull request #1366 from elit-altum/center-toolbar-icons

fix(toolbar): centered the toolbar icons

Author: catarak

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: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
 	}
 }
 
@@ -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: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
+	}
 }
 
 .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: #{20 / $base-font-size}rem;
+		height: #{20 / $base-font-size}rem;
 	}
 }