Use CSS grid for services dropdown

[maxschmeling]

This got accidentally left out of the last PR merge. It just uses CSS grid instead of flex to make the services menu more consistent for different sizes of text.

[brookewp]

Smallest nit ever, we could change flex-start to start

[maxschmeling]

Made a small update to align the content of the buttons to start so the icons line up, while still having the button fill the full row and look better on hover / when focused.

[brookewp]

Made a small update to align the content of the buttons to start so the icons line up, while still having the button fill the full row and look better on hover / when focused.

I agree that the icons look better lined up, but the hover background over HTTP looks a bit awkward. What about if we just wrap the text for Salesforce and use space-around or space-evenly?

space-around

diff --git a/src/settings/index.scss b/src/settings/index.scss
index 80451a5..f05db0e 100644
--- a/src/settings/index.scss
+++ b/src/settings/index.scss
@@ -121,7 +121,7 @@ body {
 			}
 
 			.components-button.has-icon.has-text {
-				height: 100%;
+				height: 101px;
 				display: flex;
 				width: 112px;
 				padding: var(--Spacing-Spacing-Base, 16px);
@@ -130,7 +130,7 @@ body {
 				gap: 12px;
 				align-self: stretch;
 				justify-self: stretch;
-				justify-content: start;
+				justify-content: space-around;
 
 				&:hover {
 					color: unset;
@@ -141,13 +141,21 @@ body {
 				.components-menu-item__item {
 					min-width: unset;
 					margin-right: unset;
-					text-wrap: auto;
 					text-align: center;
 				}
 			}
 
-			.rdb-settings-page_add-data-source-btn-salesforce-b2c svg {
-				width: 50px;
+			.components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-salesforce-b2c {
+
+				svg {
+					width: 50px;
+				}
+
+				span.components-menu-item__item {
+					text-wrap: auto;
+					min-width: 112px;
+				}
+
 			}
 		}
 	}

or space-evenly

[brookewp]

I looked back at the designs and noticed the icons were a bit bigger which helps with the alignment. So I've updated the PR to match:

Figma	PR

Edited PR screenshot to include active button color change and size: 4d0eb98 (#242)