From 4eef026b35605f55d9354eda53dafe03c830a621 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 5 Feb 2024 12:21:42 +0100
Subject: [PATCH 1/3] Link UI: polish lightbox pieces.

---
 .../src/components/url-input/style.scss          |  6 ++++--
 .../src/components/url-popover/style.scss        | 16 +++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 214866ccbab183..66f71e803595a8 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/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 4038058abeb19f..e26316e067aaaf 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,11 +68,11 @@
 	display: flex;
 	align-items: center;
 	min-width: $modal-min-width;
-	overflow: hidden;
 	white-space: nowrap;
 
 	.fullscreen-icon {
-		padding-right: $grid-unit-05;
+		display: flex;
+		align-items: center;
 
 		> svg {
 			width: $icon-size;
@@ -86,15 +85,14 @@
 
 		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-600;
+		font-size: $helptext-font-size;
 	}
-
-	.remove-link {
-		margin-right: $grid-unit-10;
-	}
-
 }

From cbbc4f4cd5178fdf69bc2a01b400d6639a89b663 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 6 Feb 2024 14:05:37 +0900
Subject: [PATCH 2/3] Polish info style

---
 .../url-popover/image-url-input-ui.js         |  6 ++----
 .../src/components/url-popover/style.scss     | 21 ++++++-------------
 2 files changed, 8 insertions(+), 19 deletions(-)

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 f45770004f045d..0b407ae87da588 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 e26316e067aaaf..1ae0726e99b010 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -70,16 +70,6 @@
 	min-width: $modal-min-width;
 	white-space: nowrap;
 
-	.fullscreen-icon {
-		display: flex;
-		align-items: center;
-
-		> svg {
-			width: $icon-size;
-			height: $icon-size;
-		}
-	}
-
 	.text {
 		flex-grow: 1;
 
@@ -88,11 +78,12 @@
 			// 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-600;
-		font-size: $helptext-font-size;
+			&.description {
+				margin-top: $grid-unit-05;
+				color: $gray-700;
+				font-size: $helptext-font-size;
+			}
+		}
 	}
 }

From cbab38b5ed2adbad22a19744b321a1e5a20e0d75 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 7 Feb 2024 12:40:04 +0900
Subject: [PATCH 3/3] Remove top margin from description

---
 packages/block-editor/src/components/url-popover/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 1ae0726e99b010..e3aa832af76794 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -80,7 +80,6 @@
 			line-height: $grid-unit-20;
 
 			&.description {
-				margin-top: $grid-unit-05;
 				color: $gray-700;
 				font-size: $helptext-font-size;
 			}