UI and auth-middleware updates.

Author: joehdodd

apps/web/app/components/Card.tsx

@@ -9,7 +9,7 @@ export function Card({
 }): JSX.Element {
   return (
     <div
-      className={`${className} overflow-y-scroll p-4 rounded-md shadow-md bg-white`}
+      className={`${className} overflow-y-scroll p-4 rounded-md shadow-md bg-ps-secondary`}
     >
       {children}
     </div>

apps/web/app/components/Prompt/Prompt.tsx

@@ -9,11 +9,11 @@ export default async function Prompt({ promptId }: { promptId: string }) {
 
   return (
     <div className="mb-6">
-      <p className="text-lg text-slate-700 italic">
+      <p className="text-lg text-ps-primary italic">
         &ldquo;{prompt.content}&rdquo;
       </p>
       {prompt.sentAt && (
-        <p className="text-sm text-slate-400 mt-2">
+        <p className="text-sm text-ps-primary mt-2">
           Sent {new Date(prompt.sentAt).toLocaleDateString()}
         </p>
       )}

apps/web/app/components/Prompt/PromptContent.tsx

@@ -23,7 +23,7 @@ export default function PromptContent({ content }: PromptContentProps) {
           The Prompt
         </h2>
       </div>
-      <div className="bg-ps-neutral-50 p-6 rounded-lg border-l-4 border-l-ps-primary-500">
+      <div className="bg-ps-neutral-50 p-2 rounded-lg border-l-4 border-l-ps-primary-500">
         <p className="text-xl text-ps-primary italic leading-relaxed">
           &ldquo;{content}&rdquo;
         </p>

apps/web/app/entry/[promptId]/page.tsx

@@ -47,15 +47,15 @@ export default async function Entry({ params }: EntryPageProps) {
 
   return (
     <Card className="w-full">
-      <h2 className="text-xl text-slate-600 font-bold mb-4">
+      <h2 className="text-xl text-ps-primary font-bold mb-4">
         {prompt.isOpen ? 'New Entry' : 'Your Entry'}
       </h2>
       <Prompt promptId={prompt.id} />
       {prompt.isOpen ? (
         <EntryForm userId={userId} promptId={prompt.id} />
       ) : (
-        <div className="mt-4 p-4 bg-slate-50 rounded-md">
-          <p className="text-slate-700">
+        <div className="mt-4 p-4 rounded-md">
+          <p className="text-ps-primary leading-relaxed">
             {existingEntry ? existingEntry.content : '...'}
           </p>
         </div>

apps/web/app/prompt/[id]/page.tsx

@@ -34,7 +34,8 @@ export default async function PromptDetail({ params }: PromptPageProps) {
           <div className="bg-ps-secondary rounded-lg border-ps p-8 mb-6 border shadow-md">
             <PromptHeader prompt={prompt} />
             <PromptContent content={prompt.content} />
-            <PromptResponse 
+            <hr className="my-6 border-ps-border" />
+            <PromptResponse
               promptId={id}
               isOpen={prompt.isOpen}
               existingEntry={existingEntry}

apps/web/lib/auth-middleware.ts

@@ -39,6 +39,7 @@ export async function validateTokenForMiddleware(
 
     return payload;
   } catch (error) {
+    console.error('Error validating token in middleware:', error);
     // Don't log detailed errors in middleware for security
     return null;
   }