From d2a82d3c29bbc9a3cb70b7cc8c9b91a80734aa09 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 11 Mar 2020 11:12:48 +0100
Subject: [PATCH] Polish a few broken things in the sidebar. (#20782)

There were some issues with the block sidebar:

- The active style looked a bit overwhelming.
- The button-group control lacked a little style.
- The Width/Height controls for an image were offset.
---
 .../src/components/block-styles/style.scss            |  8 +++++++-
 packages/block-library/src/table/editor.scss          |  4 ----
 packages/components/src/base-control/style.scss       |  4 ----
 packages/components/src/button-group/style.scss       | 11 +++--------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index da6c8d0ebbbb7..b84725cf707f3 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -27,7 +27,13 @@
 	}
 
 	&.is-active {
-		@include block-style__is-active();
+		.block-editor-block-styles__item-label {
+			font-weight: bold;
+		}
+
+		.block-editor-block-styles__item-preview {
+			border: 2px solid $dark-gray-primary;
+		}
 	}
 }
 
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index c03d8170c49f1..6aedff7549c2d 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -68,10 +68,6 @@
 			margin-bottom: 0;
 		}
 	}
-
-	.components-base-control + .components-base-control {
-		margin-top: 0;
-	}
 }
 
 .blocks-table__placeholder-input {
diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
index c94a581dc4e89..68e5bd0a7f4f5 100644
--- a/packages/components/src/base-control/style.scss
+++ b/packages/components/src/base-control/style.scss
@@ -20,7 +20,3 @@
 		font-style: italic;
 	}
 }
-
-.components-base-control + .components-base-control {
-	margin-top: $grid-unit-20;
-}
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 9d9c48f4980a9..9c80304673b47 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -1,22 +1,17 @@
 .components-button-group {
 	display: inline-block;
+	border-radius: $radius-block-ui;
+	border: $border-width solid $theme-color;
 
 	.components-button {
 		border-radius: 0;
 		display: inline-flex;
+		color: $theme-color;
 
 		& + .components-button {
 			margin-left: -1px;
 		}
 
-		&:first-child {
-			border-radius: 3px 0 0 3px;
-		}
-
-		&:last-child {
-			border-radius: 0 3px 3px 0;
-		}
-
 		// The focused button should be elevated so the focus ring isn't cropped,
 		// as should the active button, because it has a different border color.
 		&:focus,