Jules PR

src/components/QuizComponent.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import styles from './QuizComponent.module.css';
 
 export default function QuizComponent({ question, answers, children }) {
   const [isRevealed, setIsRevealed] = useState(false);
@@ -9,113 +10,33 @@ export default function QuizComponent({ question, answers, children }) {
     setIsRevealed(true);
   };
 
-  const styles = {
-    container: {
-      border: '1px solid #e5e7eb',
-      borderRadius: '8px',
-      padding: '24px',
-      margin: '24px 0',
-      backgroundColor: '#f9fafb',
-      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
-    },
-    header: {
-      fontSize: '0.875rem',
-      fontWeight: '600',
-      color: '#6b7280',
-      textTransform: 'uppercase',
-      letterSpacing: '0.05em',
-      marginBottom: '20px',
-      textAlign: 'left',
-    },
-    question: {
-      fontSize: '1.25rem',
-      fontWeight: '600',
-      marginBottom: '16px',
-      color: '#111827',
-    },
-    buttonContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '12px',
-    },
-    button: {
-      padding: '12px 16px',
-      border: '1px solid #d1d5db',
-      borderRadius: '6px',
-      backgroundColor: '#ffffff',
-      color: '#374151',
-      cursor: 'pointer',
-      textAlign: 'left',
-      fontSize: '1rem',
-      transition: 'all 0.2s ease-in-out',
-      width: '100%',
-    },
-    // Style for the correct answer button after reveal
-    correctButton: {
-      backgroundColor: '#f0fdfa',
-      borderColor: '#a7f3d0',
-      color: '#047857',
-      fontWeight: 'bold',
-    },
-    // Style for an incorrect answer button that the user selected
-    incorrectButton: {
-      backgroundColor: '#fff1f2',
-      borderColor: '#fecdd3',
-      color: '#be123c',
-    },
-    // Style for other buttons after an answer is revealed
-    disabledButton: {
-      opacity: 0.7,
-      cursor: 'not-allowed',
-    },
-    explanation: {
-      marginTop: '20px',
-      padding: '16px',
-      border: '1px solid #a5f3fc',
-      borderRadius: '6px',
-      backgroundColor: '#ecfeff',
-      color: '#0e7490',
-    },
-    explanationHeader: {
-      fontSize: '0.875rem',
-      fontWeight: '600',
-      color: '#6b7280',
-      textTransform: 'uppercase',
-      letterSpacing: '0.05em',
-      marginBottom: '20px',
-      textAlign: 'left',
-    },
-  };
-
-  // Determines the style for a button based on the current state.
-  const getButtonStyle = (answer) => {
-    if (!isRevealed) {
-      return styles.button;
-    }
-    // If revealed, style the correct answer green.
-    if (answer.isCorrect) {
-      return { ...styles.button, ...styles.correctButton };
-    }
-    // If the user selected this specific incorrect answer, style it red.
-    if (selectedAnswer === answer) {
-      return { ...styles.button, ...styles.incorrectButton };
+  // Determines the className for a button based on the current state.
+  const getButtonClassName = (answer) => {
+    const classNames = [styles.button];
+    if (isRevealed) {
+      if (answer.isCorrect) {
+        classNames.push(styles.correctButton);
+      } else if (selectedAnswer === answer) {
+        classNames.push(styles.incorrectButton);
+      } else {
+        classNames.push(styles.disabledButton);
+      }
     }
-    // Otherwise, just disable the button.
-    return { ...styles.button, ...styles.disabledButton };
+    return classNames.join(' ');
   };
 
   return (
-    <div style={styles.container}>
-      <h3 style={styles.header}>Test Your Knowledge</h3>
-      <p style={styles.question}>{question}</p>
+    <div className={styles.container}>
+      <h3 className={styles.header}>Test Your Knowledge</h3>
+      <p className={styles.question}>{question}</p>
 
-      <div style={styles.buttonContainer}>
+      <div className={styles.buttonContainer}>
         {/* Map over the answers array to create a button for each one. */}
         {answers &&
           answers.map((answer, index) => (
             <button
               key={index}
-              style={getButtonStyle(answer)}
+              className={getButtonClassName(answer)}
               onClick={() => handleAnswerClick(answer)}
               disabled={isRevealed}
             >
@@ -125,8 +46,8 @@ export default function QuizComponent({ question, answers, children }) {
       </div>
 
       {isRevealed && (
-        <div style={styles.explanation}>
-          <p style={styles.explanationHeader}>Explanation</p>
+        <div className={styles.explanation}>
+          <p className={styles.explanationHeader}>Explanation</p>
           <p>{children}</p>
         </div>
       )}

src/components/QuizComponent.module.css

@@ -0,0 +1,124 @@
+.container {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 24px;
+  margin: 24px 0;
+  background-color: #f9fafb;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+}
+
+.header {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+/* Dark mode styles */
+:global([data-theme='dark']) .container {
+  background-color: #262626;
+  border-color: #4d4d4d;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
+}
+
+:global([data-theme='dark']) .header {
+  color: #a0aec0;
+}
+
+:global([data-theme='dark']) .question {
+  color: #ffffff;
+}
+
+:global([data-theme='dark']) .button {
+  background-color: #4a5568;
+  border-color: #718096;
+  color: #ffffff;
+}
+
+:global([data-theme='dark']) .correctButton {
+  background-color: #2f855a;
+  border-color: #68d391;
+  color: #ffffff;
+}
+
+:global([data-theme='dark']) .incorrectButton {
+  background-color: #c53030;
+  border-color: #fc8181;
+  color: #ffffff;
+}
+
+:global([data-theme='dark']) .explanation {
+  background-color: #2d3748;
+  border-color: #4a5568;
+  color: #e2e8f0;
+}
+
+:global([data-theme='dark']) .explanationHeader {
+  color: #a0aec0;
+}
+
+.question {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #111827;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.button {
+  padding: 12px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background-color: #ffffff;
+  color: #374151;
+  cursor: pointer;
+  text-align: left;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+
+.correctButton {
+  background-color: #f0fdfa;
+  border-color: #a7f3d0;
+  color: #047857;
+  font-weight: bold;
+}
+
+.incorrectButton {
+  background-color: #fff1f2;
+  border-color: #fecdd3;
+  color: #be123c;
+}
+
+.disabledButton {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.explanation {
+  margin-top: 20px;
+  padding: 16px;
+  border: 1px solid #a5f3fc;
+  border-radius: 6px;
+  background-color: #ecfeff;
+  color: #0e7490;
+}
+
+.explanationHeader {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 20px;
+  text-align: left;
+}