update styles, add view page styles

Author: ahuseyn

plugins/wpgraphql-logging/assets/css/settings/wp-graphql-logging-settings.css

@@ -1,5 +1,5 @@
-.settings_page_wpgraphql-logging #poststuff .postbox .inside h2 {
-	font-size: 1.3em;
+.graphql-logs_page_wpgraphql-logging #poststuff .postbox .inside h2 {
+	font-size: 16.9px;
 	font-weight: 600;
 	padding-left: 0;
 }

plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css

@@ -0,0 +1,17 @@
+.wpgraphql-logging-view-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.wpgraphql-logging-view-table pre.wpgraphql-logging-query,
+.wpgraphql-logging-view-table pre.wpgraphql-logging-context,
+.wpgraphql-logging-view-table pre.wpgraphql-logging-extra {
+	white-space: pre-wrap;
+	max-height: 540px;
+	overflow-y: scroll;
+	padding: 15px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+}

plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php

@@ -13,7 +13,7 @@
  */
 ?>
 <div class="wrap">
-	<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+	<div class="wpgraphql-logging-view-header">
 		<h1><?php esc_html_e( 'Log Entry', 'wpgraphql-logging' ); ?></h1>
 		<a href="
 		<?php
@@ -33,7 +33,7 @@
 		</a>
 	</div>
 
-	<table class="widefat striped">
+	<table class="widefat striped wpgraphql-logging-view-table">
 		<tbody>
 			<tr>
 				<th><?php esc_html_e( 'ID', 'wpgraphql-logging' ); ?></th>
@@ -61,15 +61,15 @@
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Query', 'wpgraphql-logging' ); ?></th>
-				<td><pre style="overflow-x: auto; background: #f4f4f4; padding: 15px; border: 1px solid #ddd; border-radius: 4px;"><?php echo esc_html( (string) $log->get_query() ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-query"><?php echo esc_html( (string) $log->get_query() ); ?></pre></td>
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Context', 'wpgraphql-logging' ); ?></th>
-				<td><pre><?php echo esc_html( (string) wp_json_encode( $log->get_context(), JSON_PRETTY_PRINT ) ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-context"><?php echo esc_html( (string) wp_json_encode( $log->get_context(), JSON_PRETTY_PRINT ) ); ?></pre></td>
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Extra', 'wpgraphql-logging' ); ?></th>
-				<td><pre><?php echo esc_html( (string) wp_json_encode( $log->get_extra(), JSON_PRETTY_PRINT ) ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-extra"><?php echo esc_html( (string) wp_json_encode( $log->get_extra(), JSON_PRETTY_PRINT ) ); ?></pre></td>
 			</tr>
 		</tbody>
 	</table>

plugins/wpgraphql-logging/src/Admin/ViewLogsPage.php

@@ -161,6 +161,14 @@ public function enqueue_admin_scripts_styles( string $hook_suffix ): void {
 			);
 		}
 
+		if ( file_exists( trailingslashit( WPGRAPHQL_LOGGING_PLUGIN_DIR ) . 'assets/css/view/wp-graphql-logging-view.css' ) ) {
+			wp_enqueue_style(
+				'wpgraphql-graphql-logging-view',
+				trailingslashit( WPGRAPHQL_LOGGING_PLUGIN_URL ) . 'assets/css/view/wp-graphql-logging-view.css',
+				[],
+				WPGRAPHQL_LOGGING_VERSION
+			);
+		}
 
 		// Allow other plugins to enqueue their own scripts/styles.
 		do_action( 'wpgraphql_logging_view_logs_admin_enqueue_scripts', $hook_suffix );