From 7472c0d3aa03c28be19f9814f73824970cabf257 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Wed, 7 Feb 2024 09:05:37 +0100
Subject: [PATCH] Link UI: polish lightbox pieces. (#58666)

* Link UI: polish lightbox pieces.

* Polish info style

* Remove top margin from description

---------

Co-authored-by: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
---
 .../src/components/url-input/style.scss       |  6 ++--
 .../url-popover/image-url-input-ui.js         |  6 ++--
 .../src/components/url-popover/style.scss     | 30 ++++++-------------
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 214866ccbab18..66f71e803595a 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -15,11 +15,13 @@ $input-size: 300px;
 			width: $input-size;
 		}
 		padding: $input-padding;
-		border: none;
-		border-radius: 0;
 		margin-left: 0;
 		margin-right: 0;
 
+		&:not(:focus) {
+			border-color: transparent;
+		}
+
 		/* Fonts smaller than 16px causes mobile safari to zoom. */
 		font-size: $mobile-text-min-font-size;
 		@include break-small {
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index dca8db868bbb5..ae59daa1f502b 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -14,6 +14,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
+	Icon,
 	link as linkIcon,
 	image,
 	page,
@@ -342,9 +343,7 @@ const ImageURLInputUI = ( {
 					) }
 					{ ! url && ! isEditingLink && lightboxEnabled && (
 						<div className="block-editor-url-popover__expand-on-click">
-							<div className="fullscreen-icon">
-								{ fullscreen }
-							</div>
+							<Icon icon={ fullscreen } />
 							<div className="text">
 								<p>{ __( 'Expand on click' ) }</p>
 								<p className="description">
@@ -355,7 +354,6 @@ const ImageURLInputUI = ( {
 							</div>
 							<Button
 								icon={ linkOff }
-								className="remove-link"
 								label={ __( 'Disable expand on click' ) }
 								onClick={ () => {
 									onSetLightbox( false );
diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 4038058abeb19..e3aa832af7679 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -5,7 +5,6 @@
 
 .block-editor-url-popover__input-container {
 	padding: $grid-unit-10;
-	padding-left: $grid-unit-20;
 }
 
 .block-editor-url-popover__row {
@@ -17,7 +16,7 @@
 // should take up as much space as possible.
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
 	flex-grow: 1;
-	gap: $grid-unit-05;
+	gap: $grid-unit-10;
 }
 
 .block-editor-url-popover__additional-controls .components-button.has-icon {
@@ -69,32 +68,21 @@
 	display: flex;
 	align-items: center;
 	min-width: $modal-min-width;
-	overflow: hidden;
 	white-space: nowrap;
 
-	.fullscreen-icon {
-		padding-right: $grid-unit-05;
-
-		> svg {
-			width: $icon-size;
-			height: $icon-size;
-		}
-	}
-
 	.text {
 		flex-grow: 1;
 
 		p {
 			margin: 0;
+			// This ensures the text and help text is 32px, which with
+			// padding makes the popover same height as the block toolbar.
+			line-height: $grid-unit-20;
+
+			&.description {
+				color: $gray-700;
+				font-size: $helptext-font-size;
+			}
 		}
 	}
-
-	.description {
-		color: $gray-600;
-	}
-
-	.remove-link {
-		margin-right: $grid-unit-10;
-	}
-
 }