@jmruthers/pace-core 0.5.121 → 0.5.123

package/src/examples/PublicPageApp.tsx

@@ -97,23 +97,23 @@ function PublicRecipeGridReportPage() {
   // Step 4: Handle error state
   if (error) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 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">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Recipe Grid Report Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
             </p>
             <button
               onClick={refetch}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -126,17 +126,17 @@ function PublicRecipeGridReportPage() {
   // Step 5: Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Recipe Grid Report Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This recipe grid report is not available for public viewing.
           </p>
           <button
             onClick={refetch}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -158,13 +158,13 @@ function PublicRecipeGridReportPage() {
       <main className="max-w-6xl mx-auto px-4 py-8">
         {/* Recipe Grid Report Content */}
         <div className="mb-12">
-          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-            <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
-            <p className="text-green-800">
+          <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+            <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+            <p className="text-main-800">
               This is where your recipe grid report content would go. 
               The public page is now working correctly without authentication context conflicts.
             </p>
-            <div className="mt-4 text-sm text-green-700">
+            <div className="mt-4 text-sm text-main-700">
               <p><strong>Event Code:</strong> {eventCode}</p>
               <p><strong>Event ID:</strong> {event.event_id}</p>
               <p><strong>Event Name:</strong> {event.event_name}</p>
@@ -176,12 +176,12 @@ function PublicRecipeGridReportPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
           <div className="lg:col-span-2 space-y-6">
             <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-              <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+              <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+              <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <h3 className="font-semibold text-gray-700">Date</h3>
-                    <p className="text-gray-900">
+                    <h3 className="font-semibold text-sec-700">Date</h3>
+                    <p className="text-sec-900">
                       {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                         weekday: 'long',
                         year: 'numeric',
@@ -191,16 +191,16 @@ function PublicRecipeGridReportPage() {
                     </p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Venue</h3>
-                    <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Venue</h3>
+                    <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Participants</h3>
-                    <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Participants</h3>
+                    <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Event Code</h3>
-                    <p className="text-gray-900 font-mono">{event.event_code}</p>
+                    <h3 className="font-semibold text-sec-700">Event Code</h3>
+                    <p className="text-sec-900 font-mono">{event.event_code}</p>
                   </div>
                 </div>
               </div>
@@ -218,7 +218,7 @@ function PublicRecipeGridReportPage() {
                 showDelete={false}
                 className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
               />
-              <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+              <p className="mt-4 text-sm text-sec-600">Event Logo</p>
             </div>
           </div>
         </div>
@@ -268,9 +268,9 @@ function PublicEventPage() {
                   .substring(0, 3);
               }}
             />
-          <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
+          <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
           {event.event_date && (
-            <p className="text-gray-600 mt-2">
+            <p className="text-sec-600 mt-2">
               {new Date(event.event_date).toLocaleDateString('en-AU')}
             </p>
           )}
@@ -287,12 +287,12 @@ function PublicEventPage() {
  */
 function PublicInfoPage() {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
           Public Information Page
         </h1>
-        <p className="text-gray-600">
+        <p className="text-sec-600">
           This is a public information page that doesn't require authentication.
         </p>
       </div>
@@ -305,12 +305,12 @@ function PublicInfoPage() {
  */
 function PublicReportPage() {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
           Public Report Page
         </h1>
-        <p className="text-gray-600">
+        <p className="text-sec-600">
           This is a public report page that doesn't require authentication.
         </p>
       </div>

package/src/examples/PublicPageUsageExample.tsx

@@ -65,23 +65,23 @@ export function PublicPageUsageExample() {
   // Step 4: Handle error state
   if (error) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 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">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Event Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the event is not available for public viewing.
             </p>
             <button
               onClick={refetch}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -94,17 +94,17 @@ export function PublicPageUsageExample() {
   // Step 5: Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Event Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This event is not available for public viewing.
           </p>
           <button
             onClick={refetch}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -130,12 +130,12 @@ export function PublicPageUsageExample() {
             {/* Event Information */}
             <div className="lg:col-span-2 space-y-6">
               <div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-                <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                      <h3 className="font-semibold text-gray-700">Date</h3>
-                      <p className="text-gray-900">
+                      <h3 className="font-semibold text-sec-700">Date</h3>
+                      <p className="text-sec-900">
                         {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                           weekday: 'long',
                           year: 'numeric',
@@ -145,23 +145,23 @@ export function PublicPageUsageExample() {
                       </p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Venue</h3>
-                      <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Venue</h3>
+                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Participants</h3>
-                      <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Participants</h3>
+                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Event Code</h3>
-                      <p className="text-gray-900 font-mono">{event.event_code}</p>
+                      <h3 className="font-semibold text-sec-700">Event Code</h3>
+                      <p className="text-sec-900 font-mono">{event.event_code}</p>
                     </div>
                   </div>
                   
                   {event.event_news && (
                     <div>
-                      <h3 className="font-semibold text-gray-700 mb-2">Event News</h3>
-                      <p className="text-gray-900">{event.event_news}</p>
+                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
+                      <p className="text-sec-900">{event.event_news}</p>
                     </div>
                   )}
                 </div>
@@ -179,20 +179,20 @@ export function PublicPageUsageExample() {
                   showDelete={false}
                   className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
                 />
-                <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
               </div>
             </div>
           </div>
 
           {/* Recipe Grid Report Content */}
           <div className="mb-12">
-            <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-              <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
-              <p className="text-green-800">
+            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+              <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+              <p className="text-main-800">
                 This is where your recipe grid report content would go. 
                 The public page is now working correctly without authentication context conflicts.
               </p>
-              <div className="mt-4 text-sm text-green-700">
+              <div className="mt-4 text-sm text-main-700">
                 <p><strong>Event Code:</strong> {eventCode}</p>
                 <p><strong>Event ID:</strong> {event.event_id}</p>
                 <p><strong>Event Name:</strong> {event.event_name}</p>
@@ -202,9 +202,9 @@ export function PublicPageUsageExample() {
 
           {/* Event Footer Information */}
           {event.event_footer && (
-            <div className="bg-gray-50 rounded-lg p-6">
-              <h3 className="font-semibold text-gray-900 mb-2">Additional Information</h3>
-              <p className="text-gray-700">{event.event_footer}</p>
+            <div className="bg-sec-50 rounded-lg p-6">
+              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
+              <p className="text-sec-700">{event.event_footer}</p>
             </div>
           )}
         </main>