Update styling

WordPress · Nov 11, 2021 · bd6fa21 · bd6fa21
1 parent 1d08eaf
commit bd6fa21
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/edit-site/src/components/block-editor/resize-handle.js
@@ -3,7 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, Button } from '@wordpress/components';
+import { dragHandle } from '@wordpress/icons';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
@@ -26,7 +27,8 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 
 	return (
 		<>
-			<button
+			<Button
+				icon={ dragHandle }
 				className={ `resizable-editor__drag-handle is-${ direction }` }
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -48,37 +48,35 @@
 	margin: 0 auto;
 }
 
-.resizable-editor__drag-handle {
+.components-button.resizable-editor__drag-handle {
 	$height: 100px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-10;
 	height: $height;
 	appearance: none;
-	cursor: grab;
+	cursor: ew-resize;
 	outline: none;
-	background: $gray-700;
-	border-radius: 4px;
+	background: $gray-900;
 	border: 0;
+	min-width: $grid-unit-05 * 5;
+	color: $gray-600;
 
 	&.is-left {
-		left: #{-$grid-unit-30 - $grid-unit-05};
+		left: -22px;
+		border-radius: 4px 0 0 4px;
 	}
 
 	&.is-right {
-		right: #{-$grid-unit-30 - $grid-unit-05};
-	}
-
-	&:hover {
-		background: $gray-600;
+		right: -22px;
+		border-radius: 0 4px 4px 0;
 	}
 
+	&:hover,
 	&:active {
-		cursor: grabbing;
-		background: $gray-600;
+		color: var(--wp-admin-theme-color);
 	}
 
 	&:focus {