From 2f80724c178cb90587aa5f78c9a3d7388e4a0bde Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 5 Feb 2020 12:30:38 +0100
Subject: [PATCH] Same appearance for rich text toolbar (captions)

---
 .../src/components/rich-text/style.scss       | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index bfcf0c0e02e24..3bbb1e67bcd41 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -54,11 +54,67 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 	.components-popover__content {
 		min-width: auto;
-		margin-bottom: 6px;
+		margin-bottom: $grid-unit;
+		box-shadow: none;
+
+		// Block UI appearance.
+		border: $border-width solid $dark-gray-primary;
+		border-radius: $radius-block-ui;
+		background-color: $white;
 	}
 
 	.components-toolbar {
 		// The popover already provides a border.
 		border: none;
 	}
+
+	.components-toolbar__control,
+	.components-dropdown-menu__toggle {
+		min-width: $grid-unit-60;
+		min-height: $grid-unit-60;
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+	}
+
+	// Size multiple sequential buttons to be optically balanced.
+	// Icons are 36px, as set by a 24px icon and 12px padding.
+	.components-toolbar div > .components-button.has-icon {
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 / 2; // 6px.
+		padding-right: $grid-unit-15 / 2;
+
+		svg {
+			min-width: $icon-button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
+
+	// First button in a group.
+	.components-toolbar div:first-child .components-button {
+		min-width: $block-toolbar-height - $grid-unit-15 / 2;
+		padding-left: $grid-unit-15 - $border-width;
+		padding-right: $grid-unit-15 / 2;
+
+		&::before {
+			left: $grid-unit-10;
+			right: 2px;
+		}
+	}
+
+	// Last button in a group.
+	.components-toolbar div:last-child .components-button {
+		min-width: $block-toolbar-height - $grid-unit-15 / 2;
+		padding-left: $grid-unit-15 / 2;
+		padding-right: $grid-unit-15 - $border-width;
+
+		&::before {
+			left: 2px;
+			right: $grid-unit-10;
+		}
+	}
+
 }