From e537a95f804765f33ff072309d03e0529ed0cd27 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Fri, 6 Feb 2026 19:42:41 -0500
Subject: [PATCH] redo some ui oops

---
 sites/mainweb/app/(portal)/judge/page.tsx     | 36 ++-------
 .../components/portal/judge/RubricSlider.tsx  | 77 +++++++++++++------
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/sites/mainweb/app/(portal)/judge/page.tsx b/sites/mainweb/app/(portal)/judge/page.tsx
index 13bab53..8944aca 100644
--- a/sites/mainweb/app/(portal)/judge/page.tsx
+++ b/sites/mainweb/app/(portal)/judge/page.tsx
@@ -1,13 +1,12 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useSession, signOut } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import { trpc } from '@/lib/trpc';
 import { useRouter } from 'next/navigation';
-import { LiquidGlass } from '@/components/portal/LiquidGlass';
 import { LoadingScreen } from '@/components/portal/LoadingScreen';
 import { StatusScreen } from '@/components/portal/StatusScreen';
-import { RubricSlider } from '@/components/portal/judge/RubricSlider';
+import { RubricSlider, RubricSliderStyles } from '@/components/portal/judge/RubricSlider';
 
 // Rubric criteria definitions
 const RUBRIC_CRITERIA = [
@@ -130,9 +129,6 @@ export default function JudgePage() {
         variant="denied"
         title="Not a Judge"
         message="You're not registered as a judge."
-        onAction={() => signOut({ callbackUrl: '/login' })}
-        actionLabel="Sign Out"
-        actionVariant="danger"
       />
     );
   }
@@ -143,9 +139,6 @@ export default function JudgePage() {
         variant="waiting"
         title="No Assignment"
         message="Please wait for event assignment."
-        onAction={() => signOut({ callbackUrl: '/login' })}
-        actionLabel="Sign Out"
-        actionVariant="default"
       />
     );
   }
@@ -159,9 +152,6 @@ export default function JudgePage() {
         variant="success"
         title="All Done!"
         message="You've judged all projects. Thank you!"
-        onAction={() => signOut({ callbackUrl: '/login' })}
-        actionLabel="Sign Out"
-        actionVariant="primary"
       />
     );
   }
@@ -182,7 +172,7 @@ export default function JudgePage() {
           />
         </div>
 
-        <main className="flex-1 flex flex-col items-center justify-center px-6 py-8 safe-area-inset">
+        <main className="flex-1 flex flex-col items-center justify-center px-6 py-8">
           {/* Progress text */}
           <p className="text-gray-500 text-sm font-mono mb-6">
             {((progress?.completed || 0) + 1)} of {progress?.total}
@@ -211,13 +201,6 @@ export default function JudgePage() {
           >
             Start Judging
           </button>
-
-          <button
-            onClick={() => signOut({ callbackUrl: '/login' })}
-            className="mt-8 text-gray-600 text-xs font-mono py-3 uppercase tracking-widest"
-          >
-            Sign Out
-          </button>
         </main>
       </div>
     );
@@ -270,7 +253,7 @@ export default function JudgePage() {
           )}
         </div>
 
-        {/* Rubric Scoring */}
+        {/* Rubric Scoring - Sliders */}
         <div className="space-y-6 mb-6">
           {RUBRIC_CRITERIA.map((criterion) => (
             <RubricSlider
@@ -295,18 +278,13 @@ export default function JudgePage() {
         <button
           onClick={handleSubmit}
           disabled={submit.isPending}
-          className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-lg uppercase tracking-wide rounded-2xl active:scale-[0.98] transition-transform disabled:opacity-50 mb-4"
+          className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-lg uppercase tracking-wide rounded-2xl active:scale-[0.98] transition-transform disabled:opacity-50 mb-8"
         >
           {submit.isPending ? 'Submitting...' : 'Submit & Next'}
         </button>
-
-        <button
-          onClick={() => signOut({ callbackUrl: '/login' })}
-          className="w-full text-gray-600 text-xs font-mono py-3 uppercase tracking-widest text-center"
-        >
-          Sign Out
-        </button>
       </main>
+
+      <RubricSliderStyles />
     </div>
   );
 }
diff --git a/sites/mainweb/components/portal/judge/RubricSlider.tsx b/sites/mainweb/components/portal/judge/RubricSlider.tsx
index 067329a..3321407 100644
--- a/sites/mainweb/components/portal/judge/RubricSlider.tsx
+++ b/sites/mainweb/components/portal/judge/RubricSlider.tsx
@@ -7,8 +7,6 @@ interface RubricSliderProps {
     description: string;
     value: number;
     onChange: (value: number) => void;
-    isExpanded?: boolean;
-    onToggleExpand?: () => void;
 }
 
 export function RubricSlider({
@@ -18,7 +16,7 @@ export function RubricSlider({
     onChange,
 }: RubricSliderProps) {
     return (
-        <div className="space-y-3">
+        <div className="space-y-2">
             {/* Label and current score */}
             <div className="flex items-center justify-between">
                 <div className="flex-1 min-w-0 pr-3">
@@ -30,29 +28,64 @@ export function RubricSlider({
                 </span>
             </div>
 
-            {/* Button-based scoring - much better for mobile */}
-            <div className="flex gap-1">
-                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
-                    <button
-                        key={num}
-                        onClick={() => onChange(num)}
-                        className={`
-                            flex-1 py-3 rounded-lg font-bold text-sm transition-all active:scale-95
-                            ${value === num
-                                ? 'bg-[#00A8A8] text-black shadow-[0_0_15px_rgba(0,168,168,0.4)]'
-                                : 'bg-white/5 text-gray-400 hover:bg-white/10 active:bg-white/15'
-                            }
-                        `}
-                    >
-                        {num}
-                    </button>
-                ))}
+            {/* Slider - Large touch target */}
+            <div className="relative py-2">
+                <input
+                    type="range"
+                    min="1"
+                    max="10"
+                    value={value}
+                    onChange={(e) => onChange(parseInt(e.target.value))}
+                    className="w-full h-14 appearance-none bg-transparent cursor-pointer touch-pan-y rubric-slider"
+                    style={{
+                        background: `linear-gradient(to right, #00A8A8 0%, #00A8A8 ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) 100%)`,
+                        borderRadius: '12px',
+                    }}
+                />
+                <div className="flex justify-between text-xs text-gray-500 font-mono px-1 mt-1">
+                    <span>1</span>
+                    <span>5</span>
+                    <span>10</span>
+                </div>
             </div>
         </div>
     );
 }
 
-// Keep for backward compatibility but no longer needed
+// Slider styles for the page
 export function RubricSliderStyles() {
-    return null;
+    return (
+        <style jsx global>{`
+      .rubric-slider {
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      .rubric-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 36px;
+        height: 36px;
+        background: white;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 4px 12px rgba(0,0,0,0.4);
+        border: 4px solid #00A8A8;
+      }
+      .rubric-slider::-moz-range-thumb {
+        width: 36px;
+        height: 36px;
+        background: white;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 4px 12px rgba(0,0,0,0.4);
+        border: 4px solid #00A8A8;
+      }
+      .rubric-slider:active::-webkit-slider-thumb {
+        transform: scale(1.15);
+      }
+      .rubric-slider:active::-moz-range-thumb {
+        transform: scale(1.15);
+      }
+    `}</style>
+    );
 }