@jmruthers/pace-core 0.5.121 → 0.5.124

package/src/components/Dialog/Dialog.tsx

@@ -660,7 +660,7 @@ const DialogBody = ({
       ) : (
         <>
           {hasHtmlContent && !processedHtmlContent && (
-            <div className="text-red-500 mb-2">
+            <div className="text-acc-500 mb-2">
               No HTML content processed. Showing children instead.
             </div>
           )}

package/src/components/Dialog/README.md

@@ -86,7 +86,7 @@ The Dialog components support rich HTML content rendering with automatic sanitiz
       allowHtml={true}
     >
       {/* Fallback content if HTML rendering fails */}
-      <div className="text-red-500">
+      <div className="text-acc-500">
         HTML content failed to render. This is fallback content.
       </div>
     </DialogBody>
@@ -100,27 +100,27 @@ The Dialog components support rich HTML content rendering with automatic sanitiz
 <DialogBody 
   htmlContent={`
     <div class="space-y-4">
-      <div class="bg-blue-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-blue-900 mb-2">📋 Required Format</h3>
-        <p class="text-sm text-blue-800 mb-2">Your CSV file must include these columns:</p>
-        <ul class="text-sm text-blue-700 list-disc list-inside ml-2">
+      <div class="bg-main-50 p-4 rounded-lg">
+        <h3 class="font-semibold text-main-900 mb-2">📋 Required Format</h3>
+        <p class="text-sm text-main-800 mb-2">Your CSV file must include these columns:</p>
+        <ul class="text-sm text-main-700 list-disc list-inside ml-2">
           <li><code>name</code> - Full name of the person</li>
           <li><code>email</code> - Valid email address</li>
           <li><code>phone</code> - Phone number (optional)</li>
         </ul>
       </div>
       
-      <div class="bg-green-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-green-900 mb-2">✅ Example Data</h3>
-        <pre class="text-xs text-green-700 bg-white p-2 rounded border">
+      <div class="bg-main-50 p-4 rounded-lg">
+        <h3 class="font-semibold text-main-900 mb-2">✅ Example Data</h3>
+        <pre class="text-xs text-main-700 bg-main-50 p-2 rounded border">
 name,email,phone
 John Doe,john@example.com,555-0123
 Jane Smith,jane@example.com,
         </pre>
       </div>
       
-      <div class="bg-yellow-50 p-3 rounded-lg">
-        <p class="text-sm text-yellow-800">
+      <div class="bg-acc-50 p-3 rounded-lg">
+        <p class="text-sm text-acc-800">
           <strong>⚠️ Important:</strong> Make sure your CSV file is properly formatted.
         </p>
       </div>
@@ -212,20 +212,20 @@ function ImportInstructionsDialog() {
 
   const importInstructions = `
     <div class="space-y-4">
-      <p class="text-sm text-gray-600 mb-4">
+      <p class="text-sm text-sec-600 mb-4">
         Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.
       </p>
       
-      <div class="bg-blue-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-blue-900 mb-2">🍽️ Dish Format (3 columns)</h3>
-        <p class="text-sm text-blue-800 mb-2">Perfect for importing basic dish information:</p>
+      <div class="bg-main-50 p-4 rounded-lg">
+        <h3 class="font-semibold text-main-900 mb-2">🍽️ Dish Format (3 columns)</h3>
+        <p class="text-sm text-main-800 mb-2">Perfect for importing basic dish information:</p>
         <div class="space-y-1">
           <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code></p>
           <p class="text-sm"><strong>Optional:</strong> <code>dish_description</code></p>
         </div>
         <div class="mt-2">
-          <p class="text-xs text-blue-700"><strong>Examples:</strong></p>
-          <ul class="text-xs text-blue-700 list-disc list-inside ml-2">
+          <p class="text-xs text-main-700"><strong>Examples:</strong></p>
+          <ul class="text-xs text-main-700 list-disc list-inside ml-2">
             <li><code>dish_code</code>: BBQ, PC, CTY</li>
             <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
             <li><code>mealtype_name</code>: Breakfast, Lunch, Dinner</li>
@@ -233,16 +233,16 @@ function ImportInstructionsDialog() {
         </div>
       </div>
 
-      <div class="bg-green-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-green-900 mb-2">📋 Recipe Format (8 columns)</h3>
-        <p class="text-sm text-green-800 mb-2">Perfect for importing detailed recipe ingredients:</p>
+      <div class="bg-main-50 p-4 rounded-lg">
+        <h3 class="font-semibold text-main-900 mb-2">📋 Recipe Format (8 columns)</h3>
+        <p class="text-sm text-main-800 mb-2">Perfect for importing detailed recipe ingredients:</p>
         <div class="space-y-1">
           <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code>, <code>diettype_name</code>, <code>item_name</code>, <code>recipe_qtypp</code>, <code>recipe_uptake</code></p>
           <p class="text-sm"><strong>Optional:</strong> <code>item_brand</code></p>
         </div>
         <div class="mt-2">
-          <p class="text-xs text-green-700"><strong>Examples:</strong></p>
-          <ul class="text-xs text-green-700 list-disc list-inside ml-2">
+          <p class="text-xs text-main-700"><strong>Examples:</strong></p>
+          <ul class="text-xs text-main-700 list-disc list-inside ml-2">
             <li><code>dish_code</code>: BBQ</li>
             <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
             <li><code>mealtype_name</code>: Dinner</li>
@@ -255,8 +255,8 @@ function ImportInstructionsDialog() {
         </div>
       </div>
 
-      <div class="bg-yellow-50 p-3 rounded-lg">
-        <p class="text-sm text-yellow-800"><strong>⚠️ Important:</strong> Recipe imports will replace all existing recipe data for dishes in the file.</p>
+      <div class="bg-acc-50 p-3 rounded-lg">
+        <p class="text-sm text-acc-800"><strong>⚠️ Important:</strong> Recipe imports will replace all existing recipe data for dishes in the file.</p>
       </div>
     </div>
   `;
@@ -280,7 +280,7 @@ function ImportInstructionsDialog() {
             logWarnings={true}
           >
             {/* Fallback content if HTML rendering fails */}
-            <div className="text-red-500">
+            <div className="text-acc-500">
               HTML content failed to render. This is fallback content.
             </div>
           </DialogBody>

package/src/components/Dialog/examples/BasicHtmlTest.tsx

@@ -20,7 +20,7 @@ export function BasicHtmlTest() {
         <h3 className="font-semibold mb-2">Test 1: Direct dangerouslySetInnerHTML</h3>
         <div 
           dangerouslySetInnerHTML={{ __html: '<p>Hello <strong>world</strong>!</p>' }}
-          className="bg-green-50 p-2 rounded"
+          className="bg-main-50 p-2 rounded"
         />
       </div>
 
@@ -38,7 +38,7 @@ export function BasicHtmlTest() {
           </DialogHeader>
           
           <DialogBody htmlContent="<p>Hello <strong>world</strong>!</p>" allowHtml={true}>
-            <div className="text-red-500">
+            <div className="text-acc-500">
               HTML content failed to render. This is fallback content.
             </div>
           </DialogBody>

package/src/components/Dialog/examples/DebugHtmlExample.tsx

@@ -13,11 +13,11 @@ export function DebugHtmlExample() {
   const [isOpen, setIsOpen] = useState(false);
 
   const testHtml = `
-    <p class="text-sm text-gray-600 mb-4">Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.</p>
+    <p class="text-sm text-sec-600 mb-4">Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.</p>
     
-    <div class="bg-blue-50 p-4 rounded-lg">
-      <h3 class="font-semibold text-blue-900 mb-2">Dish Format (3 columns)</h3>
-      <p class="text-sm text-blue-800 mb-2">Perfect for importing basic dish information:</p>
+    <div class="bg-main-50 p-4 rounded-lg">
+      <h3 class="font-semibold text-main-900 mb-2">Dish Format (3 columns)</h3>
+      <p class="text-sm text-main-800 mb-2">Perfect for importing basic dish information:</p>
       <div class="space-y-1">
         <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code></p>
         <p class="text-sm"><strong>Optional:</strong> <code>dish_description</code></p>
@@ -31,7 +31,7 @@ export function DebugHtmlExample() {
       
       <div className="mb-4">
         <h3 className="font-semibold mb-2">Raw HTML String:</h3>
-        <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto">
+        <pre className="bg-sec-100 p-2 rounded text-xs overflow-auto">
           {testHtml}
         </pre>
       </div>
@@ -48,7 +48,7 @@ export function DebugHtmlExample() {
           
           <DialogBody htmlContent={testHtml} allowHtml={true}>
             {/* Fallback content if HTML rendering fails */}
-            <div className="text-red-500">
+            <div className="text-acc-500">
               HTML content failed to render. This is fallback content.
             </div>
           </DialogBody>

package/src/components/Dialog/examples/HtmlDialogExample.tsx

@@ -149,8 +149,8 @@ export function HtmlDialogExample() {
             <div className="space-y-4">
               <h3 className="text-lg font-semibold">React Children Content</h3>
               <p>This content is rendered using React children, not HTML strings.</p>
-              <div className="bg-blue-50 p-4 rounded-lg">
-                <p className="text-blue-800">
+              <div className="bg-main-50 p-4 rounded-lg">
+                <p className="text-main-800">
                   You can mix HTML content (via <code>htmlContent</code> prop) 
                   with React children for maximum flexibility.
                 </p>

package/src/components/Dialog/examples/SimpleHtmlTest.tsx

@@ -21,14 +21,14 @@ export function SimpleHtmlTest() {
       
       <div className="mb-4">
         <h3 className="font-semibold mb-2">Test HTML:</h3>
-        <pre className="bg-gray-100 p-2 rounded text-xs">
+        <pre className="bg-sec-100 p-2 rounded text-xs">
           {simpleHtml}
         </pre>
       </div>
 
       <div className="mb-4">
         <h3 className="font-semibold mb-2">Expected Result:</h3>
-        <div className="bg-green-50 p-2 rounded">
+        <div className="bg-main-50 p-2 rounded">
           Hello <strong>world</strong>!
         </div>
       </div>
@@ -44,7 +44,7 @@ export function SimpleHtmlTest() {
           </DialogHeader>
           
           <DialogBody htmlContent={simpleHtml} allowHtml={true}>
-            <div className="text-red-500">
+            <div className="text-acc-500">
               HTML content failed to render. This is fallback content.
             </div>
           </DialogBody>

package/src/components/Dialog/examples/__tests__/SimpleHtmlTest.test.tsx

@@ -93,7 +93,7 @@ describe('SimpleHtmlTest Component', () => {
       
       const codeBlock = screen.getByText(/Hello <strong>world<\/strong>!/).closest('pre');
       expect(codeBlock).toBeInTheDocument();
-      expect(codeBlock?.className).toContain('bg-gray-100');
+      expect(codeBlock?.className).toContain('bg-sec-100');
     });
   });
 
@@ -102,7 +102,7 @@ describe('SimpleHtmlTest Component', () => {
       renderWithProviders(<SimpleHtmlTest />);
       
       // Should show the expected result container with proper styling
-      const resultContainers = document.querySelectorAll('.bg-green-50');
+      const resultContainers = document.querySelectorAll('.bg-main-50');
       expect(resultContainers.length).toBeGreaterThan(0);
     });
 
@@ -110,11 +110,11 @@ describe('SimpleHtmlTest Component', () => {
       renderWithProviders(<SimpleHtmlTest />);
       
       // The expected result should have "Hello" text
-      const expectedResult = document.querySelector('.bg-green-50');
+      const expectedResult = document.querySelector('.bg-main-50');
       expect(expectedResult).toBeTruthy();
       
       // Should contain a strong element
-      const strongElements = document.querySelectorAll('.bg-green-50 strong');
+      const strongElements = document.querySelectorAll('.bg-main-50 strong');
       expect(strongElements.length).toBeGreaterThan(0);
     });
   });

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -772,7 +772,18 @@ export function PaceAppLayout({
           <p className="text-sec-600 mb-4">
             You don't have permission to access this page.
           </p>
-          <Button onClick={() => navigate('/')}>Go Home</Button>
+          <div className="flex gap-2 justify-center">
+            <Button onClick={() => navigate('/')}>Go Home</Button>
+            <Button 
+              variant="outline" 
+              onClick={async () => {
+                await handleSignOut();
+                navigate('/login');
+              }}
+            >
+              Sign out
+            </Button>
+          </div>
         </div>
       </div>
     );

package/src/components/PublicLayout/EventLogo.tsx

@@ -0,0 +1,175 @@
+/**
+ * @file Event Logo Component
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * A context-aware component for displaying event logos with automatic fallback to event initials.
+ * Automatically detects whether it's being used in a public or authenticated context and behaves
+ * appropriately without triggering authentication context leakage.
+ *
+ * Features:
+ * - Context-aware (works in both public and authenticated contexts)
+ * - Automatic fallback to event initials
+ * - Logo validation and error handling
+ * - Multiple size options
+ * - Responsive design
+ * - Accessibility compliant
+ * - TypeScript support
+ *
+ * @example
+ * ```tsx
+ * import { EventLogo } from '@jmruthers/pace-core';
+ *
+ * function EventHeader() {
+ *   return (
+ *     <EventLogo
+ *       eventId={event.id}
+ *       eventName={event.event_name}
+ *       organisationId={event.organisation_id}
+ *       size="lg"
+ *       className="rounded-full"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper alt text for images
+ * - Screen reader friendly fallbacks
+ * - High contrast support
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - FileDisplay component - Logo display and fallback handling
+ * - Tailwind CSS - Styling
+ */
+
+import React from 'react';
+import { FileDisplay } from '../FileDisplay/FileDisplay';
+import { FileCategory } from '../../types/file-reference';
+
+export interface EventLogoProps {
+  /** The event ID to fetch logo for */
+  eventId: string;
+  /** The event name for fallback text generation */
+  eventName: string;
+  /** The organisation ID for storage path */
+  organisationId: string;
+  /** Logo size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Custom CSS classes */
+  className?: string;
+  /** Whether to show fallback text when no logo is available */
+  showFallback?: boolean;
+  /** Custom fallback text generator */
+  generateFallbackText?: (eventName: string) => string;
+  /** Whether to validate image existence (deprecated - FileDisplay handles this) */
+  validateImage?: boolean;
+  /** Custom loading component */
+  loadingComponent?: React.ComponentType;
+  /** Custom error component */
+  errorComponent?: React.ComponentType<{ error: Error }>;
+}
+
+/**
+ * Default fallback text generator
+ */
+function defaultGenerateFallbackText(eventName: string): string {
+  if (!eventName) return 'EV';
+  
+  return eventName
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase())
+    .join('')
+    .substring(0, 3); // Max 3 characters
+}
+
+/**
+ * Component for displaying event logos with fallback to initials
+ * 
+ * This component is context-aware and automatically detects whether it's being used
+ * in a public or authenticated context. It uses FileDisplay internally to fetch and
+ * display event logos from storage, with automatic fallback to event initials if no
+ * logo is available.
+ * 
+ * @param props - Logo configuration and styling
+ * @returns React element with event logo or fallback
+ */
+export function EventLogo({
+  eventId,
+  eventName,
+  organisationId,
+  size = 'md',
+  className = '',
+  showFallback = true,
+  generateFallbackText = defaultGenerateFallbackText,
+  validateImage = true, // Deprecated but kept for backward compatibility
+  loadingComponent: LoadingComponent,
+  errorComponent: ErrorComponent
+}: EventLogoProps) {
+  // Adapt generateFallbackText to FileDisplay's signature
+  // FileDisplay expects (fileName?: string) => string, but we have (eventName: string) => string
+  const adaptedGenerateFallbackText = React.useCallback(
+    (fileName?: string) => {
+      // Use eventName if available, otherwise fall back to fileName
+      return generateFallbackText(eventName || fileName || '');
+    },
+    [eventName, generateFallbackText]
+  );
+
+  // Adapt error component to FileDisplay's signature
+  // FileDisplay expects { error: Error | string | null; retry?: () => void }
+  const adaptedErrorComponent = ErrorComponent
+    ? React.useCallback(
+        ({ error }: { error: Error | string | null; retry?: () => void }) => {
+          const errorObj = error instanceof Error ? error : new Error(String(error || 'Unknown error'));
+          return <ErrorComponent error={errorObj} />;
+        },
+        [ErrorComponent]
+      )
+    : undefined;
+
+  return (
+    <FileDisplay
+      table_name="event"
+      record_id={eventId}
+      organisation_id={organisationId}
+      category={FileCategory.EVENT_LOGOS}
+      displayOnly={true}
+      showFallback={showFallback}
+      fallbackSize={size}
+      className={className}
+      generateFallbackText={adaptedGenerateFallbackText}
+      loadingComponent={LoadingComponent}
+      errorComponent={adaptedErrorComponent}
+    />
+  );
+}
+
+/**
+ * Compact event logo for small spaces
+ */
+export function EventLogoCompact(props: EventLogoProps) {
+  return (
+    <EventLogo
+      {...props}
+      size="sm"
+      className={`${props.className || ''} rounded-sm`}
+    />
+  );
+}
+
+/**
+ * Large event logo for prominent display
+ */
+export function EventLogoLarge(props: EventLogoProps) {
+  return (
+    <EventLogo
+      {...props}
+      size="xl"
+      className={`${props.className || ''} rounded-lg`}
+    />
+  );
+}

package/src/components/PublicLayout/PublicErrorBoundary.tsx

@@ -40,6 +40,7 @@
  */
 
 import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
 
 export interface PublicErrorBoundaryProps {
   /** Child components to wrap */
@@ -128,12 +129,15 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
 
       // Default error UI
       return (
-        <div className={`min-h-screen bg-white flex items-center justify-center ${this.props.className || ''}`}>
+        <div className={cn(
+          "min-h-screen bg-background flex items-center justify-center",
+          this.props.className
+        )}>
           <div className="max-w-md mx-auto text-center px-4">
             <div className="mb-6">
-              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
+              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
                 <svg
-                  className="h-6 w-6 text-red-600"
+                  className="h-6 w-6 text-acc-600"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -146,10 +150,10 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
                   />
                 </svg>
               </div>
-              <h1 className="text-2xl font-bold text-gray-900 mb-2">
+              <h1 className="text-2xl font-bold text-sec-900 mb-2">
                 Something went wrong
               </h1>
-              <p className="text-gray-600 mb-6">
+              <p className="text-sec-600 mb-6">
                 {this.props.customErrorMessage || 
                   'We encountered an error while loading this page. Please try again.'}
               </p>
@@ -157,11 +161,11 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
 
             {/* Error details in development */}
             {this.props.showErrorDetails && this.state.error && (
-              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md text-left">
-                <h3 className="text-sm font-medium text-red-800 mb-2">
+              <div className="mb-6 p-4 bg-acc-50 border border-acc-200 rounded-md text-left">
+                <h3 className="text-sm font-medium text-acc-800 mb-2">
                   Error Details (Development Only)
                 </h3>
-                <pre className="text-xs text-red-700 whitespace-pre-wrap">
+                <pre className="text-xs text-acc-700 whitespace-pre-wrap">
                   {this.state.error.toString()}
                   {this.state.errorInfo?.componentStack}
                 </pre>
@@ -172,14 +176,14 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
             <div className="space-y-3">
               <button
                 onClick={this.resetError}
-                className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
               >
                 Try Again
               </button>
               
               <button
                 onClick={() => window.location.reload()}
-                className="w-full px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                className="w-full px-4 py-2 bg-sec-600 text-main-50 rounded-md hover:bg-sec-700 transition-colors focus:outline-none focus:ring-2 focus:ring-sec-500 focus:ring-offset-2"
               >
                 Reload Page
               </button>
@@ -187,7 +191,7 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
               {this.props.onRecover && (
                 <button
                   onClick={this.props.onRecover}
-                  className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
+                  className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
                 >
                   Alternative Action
                 </button>
@@ -195,7 +199,7 @@ export class PublicErrorBoundary extends Component<PublicErrorBoundaryProps, Pub
             </div>
 
             {/* Help text */}
-            <div className="mt-6 text-sm text-gray-500">
+            <div className="mt-6 text-sm text-sec-500">
               <p>
                 If this problem persists, please contact support or try accessing the page later.
               </p>
@@ -240,12 +244,12 @@ export function DefaultPublicErrorFallback({
   resetError 
 }: PublicErrorBoundaryState) {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-background flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
         <div className="mb-6">
-          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
+          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
             <svg
-              className="h-6 w-6 text-red-600"
+              className="h-6 w-6 text-acc-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -258,17 +262,17 @@ export function DefaultPublicErrorFallback({
               />
             </svg>
           </div>
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+          <h1 className="text-2xl font-bold text-sec-900 mb-2">
             Page Error
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             We encountered an error while loading this page.
           </p>
         </div>
 
         <button
           onClick={resetError}
-          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          className="w-full px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors focus:outline-none focus:ring-2 focus:ring-main-500 focus:ring-offset-2"
         >
           Try Again
         </button>