Reduce quick toolbar silhuette

This compacts the quick toolbar, and softens the shadow. It is a new version of #2151, but is essentially the same code.

The purpose of this is to visually simplify the quick toolbar so it doesn't feel so heavy. It also unifies the look from mobile to desktop, and frees up some space.

The feedback on the previous PR still stands — there's an extra div here. But even after sleeping on it, I can't think of a better way to do this. The thing is, we are moving the drop shadow from each of the three groups into a single group that wraps them all. This has to be an inline-block so it's no wider than the toolbars themselves, but the parent element has to be block so it can have position sticky.

Props to @paaljoachim for actually suggesting this a long time ago. 💖

components/toolbar/style.scss

@@ -1,7 +1,6 @@
 .components-toolbar {
 	margin: 0;
 	border: 1px solid $light-gray-500;
-	box-shadow: $shadow-popover;
 	background-color: $white;
 	display: inline-flex;
 }

editor/assets/stylesheets/_variables.scss

@@ -57,6 +57,7 @@ $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
+$shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );
 $text-editor-max-width: 760px;
 $button-focus-style: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
 

editor/block-switcher/style.scss

@@ -1,15 +1,10 @@
 .editor-block-switcher {
 	border: 1px solid $light-gray-500;
-	box-shadow: $shadow-popover;
 	background-color: $white;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 	margin-right: -1px;
-
-	@include break-small() {
-		margin-right: $item-spacing;
-	}
 }
 
 .editor-block-switcher__toggle {

editor/modes/visual-editor/block.js

@@ -400,19 +400,21 @@ class VisualEditorBlock extends Component {
 						component={ FirstChild }
 					>
 						<div className="editor-visual-editor__block-controls">
-							<BlockSwitcher uid={ block.uid } />
-							<Slot name="Formatting.Toolbar" />
-							<Toolbar className="editor-visual-editor__mobile-tools">
-								{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
-								{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
-								<IconButton
-									className="editor-visual-editor__mobile-toggle"
-									onClick={ this.toggleMobileControls }
-									aria-expanded={ showMobileControls }
-									label={ __( 'Toggle extra controls' ) }
-									icon="ellipsis"
-								/>
-							</Toolbar>
+							<div className="editor-visual-editor__group">
+								<BlockSwitcher uid={ block.uid } />
+								<Slot name="Formatting.Toolbar" />
+								<Toolbar className="editor-visual-editor__mobile-tools">
+									{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
+									{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
+									<IconButton
+										className="editor-visual-editor__mobile-toggle"
+										onClick={ this.toggleMobileControls }
+										aria-expanded={ showMobileControls }
+										label={ __( 'Toggle extra controls' ) }
+										icon="ellipsis"
+									/>
+								</Toolbar>
+							</div>
 						</div>
 					</CSSTransitionGroup>
 				}

editor/modes/visual-editor/style.scss

@@ -84,7 +84,7 @@
 	}
 
 	&.is-showing-mobile-controls {
-		.editor-visual-editor__block-controls > :not( .editor-visual-editor__mobile-tools ) {
+		.editor-visual-editor__group > :not( .editor-visual-editor__mobile-tools ) {
 			display: none;
 		}
 		.editor-visual-editor__mobile-tools {
@@ -315,6 +315,24 @@
 	}
 }
 
+.editor-visual-editor__group {
+	display: inline-flex;
+	box-shadow: $shadow-toolbar;
+	width: 100%;
+	background: $white;
+	border-top: 1px solid $light-gray-500;
+	border-bottom: 1px solid $light-gray-500;
+
+	> * {
+		margin-top: -1px;
+		margin-bottom: -1px;
+	}
+
+	@include break-small() {
+		width: auto;
+	}
+}
+
 $sticky-bottom-offset: 20px;
 .editor-visual-editor__block-controls + div {
 	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset
@@ -327,11 +345,8 @@ $sticky-bottom-offset: 20px;
 
 	&.editor-visual-editor__mobile-tools {
 		margin-left: auto;
-	}
-
-	// Larger viewports
-	@include break-small() {
-		margin-right: $item-spacing;
+		margin-top: -1px;
+		margin-bottom: -1px;
 	}
 }