Proposing an updated design with button

Automattic · Feb 3, 2025 · 984679d · 984679d
1 parent cc6bb9f
commit 984679d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/.../packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx b/.../packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx
@@ -75,9 +75,12 @@ const WpcomMediaUrlUploadForm = ( { ajaxUrl, action, nonce, isSiteEditor } ) =>
 
 	const renderLink = () => {
 		return (
-			<a href="#" onClick={ () => setShow( true ) } className="woy">
+			<button
+				className="button wpcom-media-url-upload-form__pre-upload-button"
+				onClick={ () => setShow( true ) }
+			>
 				{ __( 'Upload from URL', 'jetpack-mu-wpcom' ) }
-			</a>
+			</button>
 		);
 	};
 

diff --git a/...packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/style.scss b/...packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/style.scss
@@ -1,12 +1,19 @@
 .wpcom-media-url-upload-form {
+	button#{&}__pre-upload-button {
+		padding: 0 21px;
+		margin-top: -15px;
+		margin-bottom: 20px;
+	}
+
 	input {
 		width: 100%;
 		max-width: 600px;
 		margin-right: 6px;
 		margin-bottom: 5px;
 	}
-}
 
-.media-frame a.woy {
-	color: unset;
+	form {
+		margin-top: -15px;
+	    margin-bottom: 21.5px;
+	}
 }
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php
@@ -73,6 +73,6 @@ function wpcom_handle_media_url_upload() {
 }
 
 if ( current_user_can( 'upload_files' ) ) {
-	add_action( 'post-plupload-upload-ui', 'wpcom_media_url_upload', 20 );
+	add_action( 'pre-upload-ui', 'wpcom_media_url_upload', 9 );
 	add_action( 'wp_ajax_wpcom_media_url_upload', 'wpcom_handle_media_url_upload' );
 }