Polish the side dropdown.

WordPress · Oct 12, 2017 · 01198d4 · 01198d4
1 parent ba88cc7
commit 01198d4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -4,11 +4,11 @@
 	left: 50%;
 
 	&:before {
-		border: 10px solid $light-gray-500;
+		border: 8px solid $light-gray-500;
 	}
 
 	&:after {
-		border: 10px solid $white;
+		border: 8px solid $white;
 	}
 
 	&:before,
@@ -25,14 +25,14 @@
 
 	&.is-top {
 		bottom: 100%;
-		margin-top: -10px;
+		margin-top: -8px;
 
 		&:before {
-			bottom: -10px;
+			bottom: -8px;
 		}
 
 		&:after {
-			bottom: -8px;
+			bottom: -6px;
 		}
 
 		&:before,
@@ -44,14 +44,14 @@
 
 	&.is-bottom {
 		top: 100%;
-		margin-top: 10px;
+		margin-top: 8px;
 
 		&:before {
-			top: -10px;
+			top: -8px;
 		}
 
 		&:after {
-			top: -8px;
+			top: -6px;
 		}
 
 		&:before,

diff --git a/editor/block-settings-menu/content.js b/editor/block-settings-menu/content.js
@@ -42,7 +42,7 @@ function BlockSettingsMenuContent( { mode, uids, isSidebarOpened, onDelete, onTo
 				>
 					{ mode === 'visual'
 						? __( 'Edit as HTML' )
-						: __( 'Edit in the visual mode' )
+						: __( 'Edit visually' )
 					}
 				</IconButton>
 			}

diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss
@@ -13,13 +13,19 @@
 	}
 }
 
-.editor-block-settings-menu__popover .components-popover__content {
-	width: 200px;
+.editor-block-settings-menu__popover {
+	&:before,
+	&:after {
+		margin-left: 2px;
+	}
+
+	.components-popover__content {
+		width: 182px;
+	}
 }
 
 .editor-block-settings-menu__content {
 	width: 100%;
-	padding: 5px;
 }
 
 .editor-block-settings-menu__toggle {
@@ -36,21 +42,20 @@
 .editor-block-settings-menu__control {
 	width: 100%;
 	justify-content: flex-start;
-	margin-bottom: 3px;
-	padding: 6px;
+	padding: 8px;
 	background: none;
-	border: 1px solid transparent;
 	outline: none;
 	border-radius: 0;
 	color: $dark-gray-500;
 	cursor: pointer;
+	border: 1px solid transparent;
 
 	&:hover,
 	&:focus,
 	&:not(:disabled):hover {
 		box-shadow: none;
 		color: $dark-gray-500;
-		border-color: $dark-gray-500;
+		border: 1px solid $dark-gray-500;
 	}
 
 	.dashicon {