From fb404964f8b86c52de48b98e2d98283d9acfff76 Mon Sep 17 00:00:00 2001
From: Ruben Ramirez <ruben@redlotusaustin.com>
Date: Fri, 4 Apr 2025 15:29:06 -0500
Subject: [PATCH] Updated styling for 'Manage Questions' page

---
 template-manage-questions.php | 47 ++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/template-manage-questions.php b/template-manage-questions.php
index 6a65a3b..935f5b8 100644
--- a/template-manage-questions.php
+++ b/template-manage-questions.php
@@ -31,39 +31,39 @@ $question_types = [
 
 get_header(); ?>
 
-<div id="primary" class="content-area">
+<div id="primary" class="content-area quiztech-content-area">
     <main id="main" class="site-main">
 
         <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
             <header class="entry-header">
-                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+                <?php the_title( '<h1 class="entry-title quiztech-page-title">', '</h1>' ); ?>
             </header><!-- .entry-header -->
 
             <div class="entry-content">
 
-                <p><button id="quiztech-add-new-question-btn" class="button"><?php esc_html_e( 'Add New Question', 'quiztech' ); ?></button></p>
+                <p><button id="quiztech-add-new-question-btn" class="quiztech-button quiztech-button-primary"><?php esc_html_e( 'Add New Question', 'quiztech' ); ?></button></p>
 
-                <div id="quiztech-add-edit-question-form" style="display: none; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
-                    <h3><?php esc_html_e( 'Add/Edit Question', 'quiztech' ); ?></h3>
+                <div id="quiztech-add-edit-question-form" class="quiztech-section" style="display: none; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
+                    <h3 class="quiztech-section-title"><?php esc_html_e( 'Add/Edit Question', 'quiztech' ); ?></h3>
                     <p style="font-weight: bold;"><?php esc_html_e( 'Credits:', 'quiztech' ); ?> 3</p> <?php // TODO: Make credit cost dynamic ?>
 
-                    <form id="question-form">
+                    <form id="question-form" class="quiztech-form">
                         <?php wp_nonce_field( 'quiztech_save_question_action', 'quiztech_question_nonce' ); ?>
                         <input type="hidden" id="quiztech-question-id" name="question_id" value="">
 
                         <p>
-                            <label for="quiztech-question-title"><?php esc_html_e( 'Question Title (for reference):', 'quiztech' ); ?></label><br>
-                            <input type="text" id="quiztech-question-title" name="question_title" class="widefat" required>
+                            <label class="quiztech-label" for="quiztech-question-title"><?php esc_html_e( 'Question Title (for reference):', 'quiztech' ); ?></label><br>
+                            <input class="quiztech-input widefat" type="text" id="quiztech-question-title" name="question_title" required>
                         </p>
 
                         <p>
-                            <label for="quiztech-question-content"><?php esc_html_e( 'Question Text:', 'quiztech' ); ?></label><br>
-                            <textarea id="quiztech-question-content" name="question_content" class="widefat" rows="4" required></textarea>
+                            <label class="quiztech-label" for="quiztech-question-content"><?php esc_html_e( 'Question Text:', 'quiztech' ); ?></label><br>
+                            <textarea class="quiztech-textarea widefat" id="quiztech-question-content" name="question_content" rows="4" required></textarea>
                         </p>
 
                         <p>
-                            <label for="quiztech-question-type"><?php esc_html_e( 'Question Type:', 'quiztech' ); ?></label><br>
-                            <select id="quiztech-question-type" name="question_type" required>
+                            <label class="quiztech-label" for="quiztech-question-type"><?php esc_html_e( 'Question Type:', 'quiztech' ); ?></label><br>
+                            <select class="quiztech-select" id="quiztech-question-type" name="question_type" required>
                                 <option value=""><?php esc_html_e( '-- Select Type --', 'quiztech' ); ?></option>
                                 <?php foreach ( $question_types as $value => $label ) : ?>
                                     <option value="<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></option>
@@ -72,18 +72,19 @@ get_header(); ?>
                         </p>
 
                         <p id="quiztech-question-options-wrapper" style="display: none;">
-                            <label for="quiztech-question-options"><?php esc_html_e( 'Options (one per line, mark correct with *):', 'quiztech' ); ?></label><br>
-                            <textarea id="quiztech-question-options" name="question_options" class="widefat" rows="5"></textarea>
+                            <label class="quiztech-label" for="quiztech-question-options"><?php esc_html_e( 'Options (one per line, mark correct with *):', 'quiztech' ); ?></label><br>
+                            <textarea class="quiztech-textarea widefat" id="quiztech-question-options" name="question_options" rows="5"></textarea>
                             <small><?php esc_html_e('Example: Option A*'); ?></small> <?php // TODO: Clarify correct answer format for checkboxes ?>
                         </p>
 
                         <p>
-                            <label for="quiztech-question-category"><?php esc_html_e( 'Category:', 'quiztech' ); ?></label><br>
+                            <label class="quiztech-label" for="quiztech-question-category"><?php esc_html_e( 'Category:', 'quiztech' ); ?></label><br>
                             <?php
                             wp_dropdown_categories( array(
                                 'taxonomy'        => 'quiztech_category',
                                 'name'            => 'question_category',
                                 'id'              => 'quiztech-question-category',
+                                'class'           => 'quiztech-select', // Add class here
                                 'show_option_none'=> __( '-- Select Category --', 'quiztech' ),
                                 'hide_empty'      => 0,
                                 'hierarchical'    => 1,
@@ -92,21 +93,21 @@ get_header(); ?>
                         </p> <?php // Closing </p> was missing here ?>
 
                         <p>
-                            <label for="quiztech-question-points"><?php esc_html_e( 'Question Points:', 'quiztech' ); ?></label><br>
-                            <input type="number" id="quiztech-question-points" name="question_points" class="small-text" min="0" step="1" value="1">
+                            <label class="quiztech-label" for="quiztech-question-points"><?php esc_html_e( 'Question Points:', 'quiztech' ); ?></label><br>
+                            <input class="quiztech-input small-text" type="number" id="quiztech-question-points" name="question_points" min="0" step="1" value="1">
                             <small><?php esc_html_e('Points awarded for a correct answer.', 'quiztech'); ?></small>
                         </p>
 
                         <?php // Removed extra closing </p> tag from line 97 of original ?>
 
                         <p>
-                            <button type="submit" class="button button-primary"><?php esc_html_e( 'Save Question', 'quiztech' ); ?></button>
-                            <button type="button" id="quiztech-cancel-edit-question-btn" class="button" style="display: none;"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button>
+                            <button type="submit" class="quiztech-button quiztech-button-primary"><?php esc_html_e( 'Save Question', 'quiztech' ); ?></button>
+                            <button type="button" id="quiztech-cancel-edit-question-btn" class="quiztech-button quiztech-button-secondary" style="display: none;"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button>
                         </p>
                     </form>
                 </div>
 
-                <h2><?php esc_html_e( 'Question Library', 'quiztech' ); ?></h2>
+                <h2 class="quiztech-section-title"><?php esc_html_e( 'Question Library', 'quiztech' ); ?></h2>
 
                 <?php
                 $args = array(
@@ -120,7 +121,7 @@ get_header(); ?>
                 ?>
 
                 <?php if ( $questions_query->have_posts() ) : ?>
-                    <table class="wp-list-table widefat fixed striped">
+                    <table class="quiztech-table wp-list-table widefat fixed striped">
                         <thead>
                             <tr>
                                 <th><?php esc_html_e( 'Title', 'quiztech' ); ?></th>
@@ -144,8 +145,8 @@ get_header(); ?>
                                     <td><?php echo esc_html( $q_type_label ); ?></td>
                                     <td><?php echo esc_html( $category_name ); ?></td>
                                     <td>
-                                        <button class="button quiztech-edit-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button>
-                                        <button class="button quiztech-delete-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Delete', 'quiztech' ); ?></button>
+                                        <button class="quiztech-button quiztech-button-secondary quiztech-button-small quiztech-edit-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button>
+                                        <button class="quiztech-button quiztech-button-secondary quiztech-button-small quiztech-delete-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Delete', 'quiztech' ); ?></button>
                                         <?php // Add nonces and JS handlers later ?>
                                     </td>
                                 </tr>