Use block style for edit link

Author: trymebytes

themes/wporg-translate-events-2024/blocks/pages/events/event-details/render.php

@@ -22,17 +22,17 @@
 /-->
 
 <?php if ( current_user_can( 'edit_translation_event', $event->id() ) ) : ?>
-<a class="details-edit-event" href="<?php echo esc_url( Urls::event_edit( $event->id() ) ); ?>">
-	<span class="dashicons dashicons-edit"></span><?php echo esc_html__( 'Edit Event', 'wporg-translate-events-2024' ); ?>
-</a>
+	<div class="wp-block-button is-style-outline is-style-outline--13 details-edit-event">
+		<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( Urls::event_edit( $event->id() ) ); ?>"><?php echo esc_html__( 'Edit Event', 'wporg-translate-events-2024' ); ?></a>
+	</div>
 <?php endif; ?>
 
 <?php
 if ( is_user_logged_in() ) :
 	if ( $event->is_past() ) :
 		?>
 		<!-- wp:wporg/notice {"type":"alert", "style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
-		<div class="wp-block-wporg-notice is-alert-notice" style="margin-top:var(--wp--preset--spacing--20)">
+		<div class="wp-block-wporg-notice is-alert-notice" style="margin-top:var(--wp--preset--spacing--40)">
 			<div class="wp-block-wporg-notice__icon"></div>
 			<div class="wp-block-wporg-notice__content">
 				<p>

themes/wporg-translate-events-2024/style.css

@@ -212,11 +212,7 @@ span.user-remote-icon.dashicons-video-alt2 {
 	display: inline-block;
 }
 
-a.details-edit-event span.dashicons-edit {
-	vertical-align: text-bottom;
-}
-
-a.details-edit-event {
+div.details-edit-event {
 	float: right;
 	text-decoration: none;
 }