From 3c61b0df10bbb03492c28c91dfeec91d54714e11 Mon Sep 17 00:00:00 2001
From: xecdev <hi@aimalkhan.com>
Date: Mon, 3 Mar 2025 14:25:21 +0430
Subject: [PATCH] Improve Admin Dashboard Styling

---
 assets/css/paybutton-admin.css     | 81 ++++++++++++++++++++++++++++++
 includes/class-paybutton-admin.php |  8 +++
 templates/admin/content.php        |  2 +-
 templates/admin/customers.php      |  2 +-
 templates/admin/dashboard.php      | 42 +++++++++-------
 5 files changed, 115 insertions(+), 20 deletions(-)
 create mode 100644 assets/css/paybutton-admin.css

diff --git a/assets/css/paybutton-admin.css b/assets/css/paybutton-admin.css
new file mode 100644
index 0000000..5cc9f1a
--- /dev/null
+++ b/assets/css/paybutton-admin.css
@@ -0,0 +1,81 @@
+/* paybutton-admin.css */
+
+/* ------------------------------
+   Dashboard page styles
+------------------------------ */
+
+/* Container for the dashboard buttons */
+.paybutton-dashboard-buttons {
+    display: flex;
+    gap: 2rem !important;
+    margin-top: 2rem !important;
+    flex-wrap: wrap;
+}
+
+/* Each dashboard button box */
+.paybutton-dashboard-button {
+    flex: 1;
+    min-width: 250px !important;
+    border: 1px solid #ddd;
+    padding: 2rem !important;
+    text-align: center;
+}
+
+/* Disabled button style (e.g., for "Coming soon") */
+.paybutton-dashboard-button.disabled {
+    opacity: 0.5;
+}
+
+/* The link inside a button */
+.paybutton-dashboard-link {
+    font-size: 1.2em !important;
+    padding: 2rem !important;
+    display: inline-block;
+    width: 100%;
+}
+
+/* For text inside a button */
+.paybutton-dashboard-text {
+    font-size: 1.2em;
+    padding: 2rem;
+    margin: 0;
+}
+
+/* Container for the icons block */
+.paybutton-dashboard-icons {
+    margin-top: 2rem;
+    text-align: left;
+}
+
+/* Each icon link */
+.paybutton-dashboard-icon-link {
+    margin-right: 1rem;
+    text-decoration: none;
+    outline: none;
+}
+
+/* Icon images */
+.paybutton-dashboard-icon {
+    border: none;
+}
+
+/* ------------------------------
+   Customers and Content tables
+------------------------------ */
+table.widefat.fixed.striped {
+    table-layout: auto !important;
+    width: 100% !important;
+}
+
+table.widefat.fixed.striped th,
+table.widefat.fixed.striped td {
+    white-space: nowrap;
+    overflow: visible;
+}
+
+/* ------------------------------
+   Utility class for paragrah margin-top
+------------------------------ */
+.pb-paragraph-margin-top {
+    margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/includes/class-paybutton-admin.php b/includes/class-paybutton-admin.php
index 90d0c00..09f08a8 100644
--- a/includes/class-paybutton-admin.php
+++ b/includes/class-paybutton-admin.php
@@ -67,6 +67,14 @@ public function add_admin_menus() {
      * color selection functionality.
     */
     public function enqueue_admin_scripts( $hook_suffix ) {
+        // Enqueue the paybutton-admin.css on every admin page
+        wp_enqueue_style(
+            'paybutton-admin',
+            PAYBUTTON_PLUGIN_URL . 'assets/css/paybutton-admin.css',
+            array(),
+            '1.0'
+        );
+
         if ( $hook_suffix === 'toplevel_page_paybutton-paywall' ) {
             wp_enqueue_style( 'wp-color-picker' );
             wp_enqueue_script( 'wp-color-picker' );
diff --git a/templates/admin/content.php b/templates/admin/content.php
index 19077e8..a27f094 100644
--- a/templates/admin/content.php
+++ b/templates/admin/content.php
@@ -57,7 +57,7 @@ function paybutton_sort_content_table( $col, $label, $orderby, $order, $base_url
             <?php endif; ?>
         </tbody>
     </table>
-    <p style="margin-top: 1rem;">
+    <p class="pb-paragraph-margin-top">
         Sign up for a <a href="https://paybutton.org/signup" target="_blank">FREE PayButton account</a> to get access to advanced payment tracking & business features.
     </p>
 </div>
diff --git a/templates/admin/customers.php b/templates/admin/customers.php
index d0f6276..34a92e7 100644
--- a/templates/admin/customers.php
+++ b/templates/admin/customers.php
@@ -133,7 +133,7 @@ function paybutton_sort_customers_table( $col, $label, $orderby, $order, $base_u
                 <?php endif; ?>
             </tbody>
         </table>
-        <p style="margin-top: 1rem;">
+        <p class="pb-paragraph-margin-top">
             Sign up for a <a href="https://paybutton.org/signup" target="_blank">FREE PayButton account</a> to get access to advanced payment tracking & business features.
         </p>
     <?php endif; ?>
diff --git a/templates/admin/dashboard.php b/templates/admin/dashboard.php
index bcf0624..af78666 100644
--- a/templates/admin/dashboard.php
+++ b/templates/admin/dashboard.php
@@ -8,42 +8,48 @@
     <!-- New heading above the buttons -->
     <h2>Monetize your content with custom no-signup paywalls & donation buttons</h2>
 
-    <div style="display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap;">
+    <div class="paybutton-dashboard-buttons">
         <!-- Button 1: Generate Button -->
-        <div style="flex: 1; min-width: 250px; border: 1px solid #ddd; padding: 2rem; text-align: center;">
-            <a href="https://paybutton.org/#button-generator" target="_blank" class="button button-primary" style="font-size: 1.2em; padding: 2rem; display: inline-block; width: 100%;">Add Simple PayButton</a>
+        <div class="paybutton-dashboard-button">
+            <a href="https://paybutton.org/#button-generator" target="_blank" class="button button-primary paybutton-dashboard-link">
+                Add Simple PayButton
+            </a>
         </div>
         <!-- Button 2: Paywall Settings -->
-        <div style="flex: 1; min-width: 250px; border: 1px solid #ddd; padding: 2rem; text-align: center;">
-            <a href="<?php echo esc_url( admin_url( 'admin.php?page=paybutton-paywall' ) ); ?>" class="button button-primary" style="font-size: 1.2em; padding: 2rem; display: inline-block; width: 100%;">Paywall Settings</a>
+        <div class="paybutton-dashboard-button">
+            <a href="<?php echo esc_url( admin_url( 'admin.php?page=paybutton-paywall' ) ); ?>" class="button button-primary paybutton-dashboard-link">
+                Paywall Settings
+            </a>
         </div>
         <!-- Button 3: PayButton Woocomerce (Coming soon) -->
-        <div style="flex: 1; min-width: 250px; border: 1px solid #ddd; padding: 2rem; text-align: center; opacity: 0.5;">
-            <p style="font-size: 1.2em; padding: 2rem; margin: 0;">PayButton Woocomerce – Coming soon!</p>
+        <div class="paybutton-dashboard-button disabled">
+            <p class="paybutton-dashboard-text">
+                PayButton Woocomerce – Coming soon!
+            </p>
         </div>
 
-        <p style="margin-top: 1rem;">
-            Sign up for a <a href="https://paybutton.org/signup" target="_blank">FREE PayButton account</a> to get access to advanced payment tracking & business features.
+        <p class="pb-paragraph-margin-top">
+            Sign up for a <a href="https://paybutton.org/signup" target="_blank">FREE PayButton account</a> to get access to advanced payment tracking &amp; business features.
         </p>
     </div>
 
     <!-- New icon block below the buttons -->
-    <div style="margin-top: 2rem; text-align: left;">
+    <div class="paybutton-dashboard-icons">
         <!-- Home Icon -->
-        <a href="https://paybutton.org/" target="_blank" style="margin-right: 1rem; text-decoration: none; outline: none;">
-            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/home.png' ); ?>" alt="Home" width="16" height="16" style="border: none;">
+        <a href="https://paybutton.org/" target="_blank" class="paybutton-dashboard-icon-link">
+            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/home.png' ); ?>" alt="Home" width="16" height="16" class="paybutton-dashboard-icon">
         </a>
         <!-- X (Twitter) Icon -->
-        <a href="https://x.com/thepaybutton" target="_blank" style="margin-right: 1rem; text-decoration: none; outline: none;">
-            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/x.png' ); ?>" alt="X" width="16" height="16" style="border: none;">
+        <a href="https://x.com/thepaybutton" target="_blank" class="paybutton-dashboard-icon-link">
+            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/x.png' ); ?>" alt="X" width="16" height="16" class="paybutton-dashboard-icon">
         </a>
         <!-- Telegram Icon -->
-        <a href="https://t.me/paybutton" target="_blank" style="margin-right: 1rem; text-decoration: none; outline: none;">
-            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/telegram.png' ); ?>" alt="Telegram" width="16" height="16" style="border: none;">
+        <a href="https://t.me/paybutton" target="_blank" class="paybutton-dashboard-icon-link">
+            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/telegram.png' ); ?>" alt="Telegram" width="16" height="16" class="paybutton-dashboard-icon">
         </a>
         <!-- Github Icon -->
-        <a href="https://github.com/PayButton/wordpress-plugin" target="_blank" style="text-decoration: none; outline: none;">
-            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/github.png' ); ?>" alt="Github" width="16" height="16" style="border: none;">
+        <a href="https://github.com/PayButton/wordpress-plugin" target="_blank" class="paybutton-dashboard-icon-link">
+            <img src="<?php echo esc_url( PAYBUTTON_PLUGIN_URL . 'assets/icons/github.png' ); ?>" alt="Github" width="16" height="16" class="paybutton-dashboard-icon">
         </a>
     </div>
 </div>