Add number font

resources/css/app.css

@@ -5,12 +5,23 @@
 @source '../views';
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 
+@font-face {
+    font-family: '7Segment';
+    src: url('/fonts/7segment.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-digital {
+    font-family: '7Segment', monospace;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {
     --font-sans:
         'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    
+
     --font-mono-display:
         'Major Mono Display', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 

resources/js/components/Display/LedCounter.tsx

@@ -15,9 +15,9 @@ interface LedCounterProps {
     onAddMilestone?: () => void;
 }
 
-export default function LedCounter({ 
-    value, 
-    className, 
+export default function LedCounter({
+    value,
+    className,
     animate = true,
     currentPrice,
     onHover,
@@ -45,13 +45,13 @@ export default function LedCounter({
 
     // Milestone navigation
     const nextMilestone = () => {
-        setCurrentMilestoneIndex((prev) => 
+        setCurrentMilestoneIndex((prev) =>
             prev < milestones.length - 1 ? prev + 1 : 0
         );
     };
 
     const prevMilestone = () => {
-        setCurrentMilestoneIndex((prev) => 
+        setCurrentMilestoneIndex((prev) =>
             prev > 0 ? prev - 1 : milestones.length - 1
         );
     };
@@ -72,7 +72,7 @@ export default function LedCounter({
         const duration = 1000; // 1 second animation
         const steps = 60; // 60fps
         const stepValue = (value - displayValue) / steps;
-        
+
         if (Math.abs(stepValue) < 0.01) {
             setDisplayValue(value);
             return;
@@ -101,7 +101,7 @@ export default function LedCounter({
         // Otherwise show up to 6 decimal places, removing trailing zeros
         return value.toFixed(6).replace(/\.?0+$/, '');
     };
-    
+
     const formattedValue = formatValue(displayValue);
 
     const formatCurrency = (amount: number) => {
@@ -113,7 +113,7 @@ export default function LedCounter({
     };
 
     return (
-        <div 
+        <div
             className={cn(
                 "font-mono text-center select-none relative group cursor-pointer",
                 "bg-black text-red-500",
@@ -142,15 +142,15 @@ export default function LedCounter({
         >
             <div className="relative">
                 {/* Background glow effect */}
-                <div className="absolute inset-0 text-red-500/20 blur-sm font-mono-display text-6xl md:text-8xl lg:text-9xl tracking-widest">
+                <div className="absolute inset-0 text-red-500/20 blur-sm font-digital text-6xl md:text-8xl lg:text-9xl tracking-widest">
                     {formattedValue}
                 </div>
-                
+
                 {/* Main LED text */}
                 <div className={cn(
                     "relative z-10",
                     "text-6xl md:text-8xl lg:text-9xl",
-                    "font-mono-display font-normal tracking-widest",
+                    "font-digital font-normal tracking-widest",
                     "text-red-500",
                     "drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
                     "filter brightness-110"
@@ -205,7 +205,7 @@ export default function LedCounter({
             )}>
                 <div className="relative">
                     {/* Progress Bar */}
-                    <div 
+                    <div
                         className="h-2 bg-gray-800 cursor-pointer relative overflow-hidden"
                         onClick={handleProgressBarClick}
                     >
@@ -213,9 +213,9 @@ export default function LedCounter({
                         {isCompleted && (
                             <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
                         )}
-                        
+
                         {/* Progress fill */}
-                        <div 
+                        <div
                             className={cn(
                                 "h-full transition-all duration-1000 ease-out",
                                 currentMilestone.color,
@@ -224,9 +224,9 @@ export default function LedCounter({
                             )}
                             style={{ width: `${progress}%` }}
                         />
-                        
+
                         {/* Glow effect */}
-                        <div 
+                        <div
                             className={cn(
                                 "absolute top-0 h-full transition-all duration-1000 ease-out",
                                 "bg-gradient-to-r from-transparent to-white/30",
@@ -252,11 +252,11 @@ export default function LedCounter({
                             <div className="text-red-400 text-sm font-mono">
                                 {value.toFixed(2)} / {currentMilestone.target}
                             </div>
-                            
+
                             <div className="text-red-500 font-bold text-sm">
                                 {currentMilestone.label}
                             </div>
-                            
+
                             <div className="text-red-400 text-sm">
                                 {isCompleted ? 'COMPLETED' : `${(100 - progress).toFixed(1)}% TO GO`}
                             </div>
@@ -287,7 +287,7 @@ export default function LedCounter({
                                     <span className="font-mono">MILE</span>
                                 </button>
                             )}
-                            
+
                             <button
                                 onClick={nextMilestone}
                                 className="text-red-400 hover:text-red-300 transition-colors p-1"
@@ -295,7 +295,7 @@ export default function LedCounter({
                             >
                                 <ChevronRight className="w-4 h-4" />
                             </button>
-                            
+
                             {/* Stats indicator */}
                             <div className={cn(
                                 "text-xs text-red-400/60 cursor-pointer transition-colors",
@@ -309,4 +309,4 @@ export default function LedCounter({
             </div>
         </div>
     );
-}
+}

resources/js/components/Display/LedDisplay.tsx

@@ -73,7 +73,7 @@ export default function LedDisplay({
         >
             <div className="relative">
                 {/* Background glow effect */}
-                <div className="absolute inset-0 text-red-500/20 blur-sm font-mono-display text-6xl md:text-8xl lg:text-9xl tracking-widest">
+                <div className="absolute inset-0 text-red-500/20 blur-sm font-digital text-6xl md:text-8xl lg:text-9xl tracking-widest">
                     {formattedValue}
                 </div>
                 
@@ -81,7 +81,7 @@ export default function LedDisplay({
                 <div className={cn(
                     "relative z-10",
                     "text-6xl md:text-8xl lg:text-9xl",
-                    "font-mono-display font-normal tracking-widest",
+                    "font-digital font-normal tracking-widest",
                     "text-red-500",
                     "drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
                     "filter brightness-110"

resources/js/components/Settings/UserMenuContent.tsx

@@ -1,4 +1,4 @@
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/DropdownMenu';
 import { UserInfo } from '@/components/Settings/UserInfo';
 import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
 import { type User } from '@/types';

resources/views/app.blade.php

@@ -38,6 +38,8 @@
 
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600|major-mono-display:400" rel="stylesheet" />
+        
+        <link rel="preload" href="/fonts/7segment.woff" as="font" type="font/woff" crossorigin>
 
         @routes
         @viteReactRefresh