pretty spin

Author: monneyboi

poliloom-gui/src/components/layout/Header.tsx

@@ -85,7 +85,10 @@ export function Header() {
             size="small"
             className="max-md:text-lg max-md:py-4 max-md:px-6 max-md:justify-start"
           >
-            <SpinningCounter value={evaluationCount ?? 0} className="mr-2" /> Evaluations
+            <SpinningCounter
+              value={evaluationCount ?? 0}
+              title="Total accepted and rejected statements"
+            />
           </Button>
         )}
         {status === 'authenticated' ? (

poliloom-gui/src/components/ui/SpinningCounter.tsx

@@ -4,42 +4,52 @@ interface SpinningCounterProps {
   value: number
   className?: string
   minDigits?: number
+  title?: string
 }
 
+const DIGIT_HEIGHT = 22
+
 function DigitWheel({ digit }: { digit: number }) {
   return (
-    <div className="relative h-5 w-3 overflow-hidden bg-zinc-900 rounded-sm">
+    <div
+      className="relative w-4 overflow-hidden bg-gray-50 border-x border-gray-100 first:border-l-0 first:rounded-l last:border-r-0 last:rounded-r"
+      style={{ height: DIGIT_HEIGHT }}
+    >
       <div
         className="absolute w-full transition-transform duration-500 ease-out"
         style={{
-          transform: `translateY(-${digit * 20}px)`,
+          transform: `translateY(-${digit * DIGIT_HEIGHT}px)`,
         }}
       >
         {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
           <div
             key={n}
-            className="h-5 flex items-center justify-center text-white font-bold text-xs leading-none"
+            className="flex items-center justify-center text-gray-700 font-semibold text-sm leading-none tabular-nums"
+            style={{ height: DIGIT_HEIGHT }}
           >
             {n}
           </div>
         ))}
       </div>
-      {/* Subtle shine overlay */}
-      <div className="absolute inset-0 bg-gradient-to-b from-white/10 via-transparent to-black/20 pointer-events-none" />
     </div>
   )
 }
 
-export function SpinningCounter({ value, className = '', minDigits = 4 }: SpinningCounterProps) {
+export function SpinningCounter({
+  value,
+  className = '',
+  minDigits = 4,
+  title,
+}: SpinningCounterProps) {
   // Convert to string and pad with zeros, always one extra leading zero
   const valueStr = String(value)
   const padLength = Math.max(minDigits, valueStr.length + 1)
   const digits = valueStr.padStart(padLength, '0').split('').map(Number)
 
   return (
     <div
-      className={`inline-flex items-center gap-[1px] bg-zinc-800 p-[3px] rounded shadow-inner ${className}`}
-      style={{ boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.3)' }}
+      className={`inline-flex items-center bg-white border border-gray-200 rounded-md overflow-hidden ${className}`}
+      title={title}
     >
       {digits.map((digit, index) => (
         <DigitWheel key={index} digit={digit} />