jandres/temp_SSA_SCAN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed colors palette & scroll on history

Browse Source
This commit is contained in:
Jose Andres
2025-08-27 14:43:32 -06:00
parent f1dd78d109
commit 0ea245562d
3 changed files with 43 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/globals.css
View File

@@ -4,74 +4,48 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1 0 0); /* #ffffff - pure white */
--foreground: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--card: oklch(0.985 0.024 102.37); /* #fefce8 - light cream */
--card-foreground: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--popover: oklch(1 0 0); /* #ffffff - white for popups */
--popover-foreground: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--primary: oklch(0.647 0.167 70.67); /* #d97706 - amber-600 */
--primary-foreground: oklch(1 0 0); /* #ffffff - white text */
--secondary: oklch(0.627 0.265 303.9); /* #6366f1 - bright blue */
--secondary-foreground: oklch(1 0 0); /* #ffffff - white text */
--muted: oklch(0.98 0.005 106.42); /* #f8fafc - light gray */
--muted-foreground: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--accent: oklch(0.627 0.265 303.9); /* #6366f1 - bright blue */
--accent-foreground: oklch(1 0 0); /* #ffffff - white text */
--destructive: oklch(0.576 0.232 35.75); /* #ea580c - orange-red */
--destructive-foreground: oklch(1 0 0); /* #ffffff - white text */
--border: oklch(0.647 0.167 70.67); /* #d97706 - amber border */
--input: oklch(0.985 0.024 102.37); /* #fefce8 - light cream input */
--ring: oklch(0.647 0.167 70.67 / 0.5); /* amber focus ring */
--chart-1: oklch(0.647 0.167 70.67); /* #d97706 - amber */
--chart-2: oklch(0.627 0.265 303.9); /* #6366f1 - blue */
--chart-3: oklch(0.576 0.232 35.75); /* #ea580c - orange */
--chart-4: oklch(0.368 0.014 257.29); /* #4b5563 - gray */
--chart-5: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--background: oklch(0.98 0.005 106.42); /* Light Gray */
--foreground: oklch(0.1 0 0); /* Dark Gray */
--card: oklch(1 0 0); /* White */
--card-foreground: oklch(0.1 0 0); /* Dark Gray */
--popover: oklch(1 0 0); /* White */
--popover-foreground: oklch(0.1 0 0); /* Dark Gray */
--primary: oklch(0.6 0.2 260); /* Vibrant Blue */
--primary-foreground: oklch(0.95 0 0); /* Light Gray */
--secondary: oklch(0.8 0.15 280); /* Vibrant Purple */
--secondary-foreground: oklch(0.95 0 0); /* Light Gray */
--muted: oklch(0.9 0.01 250); /* Light Gray */
--muted-foreground: oklch(0.4 0.01 250); /* Gray */
--accent: oklch(0.7 0.25 290); /* Vibrant Pink */
--accent-foreground: oklch(0.95 0 0); /* Light Gray */
--destructive: oklch(0.5 0.25 25); /* Deep Red */
--destructive-foreground: oklch(0.95 0 0); /* Light Gray */
--border: oklch(0.8 0.02 250); /* Gray */
--input: oklch(0.8 0.02 250); /* Gray */
--ring: oklch(0.6 0.2 260 / 0.5); /* Vibrant Blue with transparency */
--radius: 0.5rem;
--sidebar: oklch(0.98 0.005 106.42); /* #f8fafc - light gray */
--sidebar-foreground: oklch(0.278 0.013 257.57); /* #374151 - dark gray */
--sidebar-primary: oklch(0.647 0.167 70.67); /* #d97706 - amber */
--sidebar-primary-foreground: oklch(1 0 0); /* #ffffff - white */
--sidebar-accent: oklch(0.627 0.265 303.9); /* #6366f1 - blue */
--sidebar-accent-foreground: oklch(1 0 0); /* #ffffff - white */
--sidebar-border: oklch(0.647 0.167 70.67); /* #d97706 - amber border */
--sidebar-ring: oklch(0.647 0.167 70.67 / 0.5); /* amber focus ring */
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.647 0.167 70.67); /* Keep amber in dark mode */
--primary-foreground: oklch(0.145 0 0);
--secondary: oklch(0.627 0.265 303.9); /* Keep blue in dark mode */
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.627 0.265 303.9); /* Keep blue accent */
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.576 0.232 35.75);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.647 0.167 70.67 / 0.5);
--chart-1: oklch(0.647 0.167 70.67);
--chart-2: oklch(0.627 0.265 303.9);
--chart-3: oklch(0.576 0.232 35.75);
--chart-4: oklch(0.368 0.014 257.29);
--chart-5: oklch(0.278 0.013 257.57);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.647 0.167 70.67);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.627 0.265 303.9);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.647 0.167 70.67 / 0.5);
--background: oklch(0.1 0 0); /* Dark Gray */
--foreground: oklch(0.95 0 0); /* Light Gray */
--card: oklch(0.15 0 0); /* Darker Gray */
--card-foreground: oklch(0.95 0 0); /* Light Gray */
--popover: oklch(0.1 0 0); /* Dark Gray */
--popover-foreground: oklch(0.95 0 0); /* Light Gray */
--primary: oklch(0.6 0.2 260); /* Vibrant Blue */
--primary-foreground: oklch(0.95 0 0); /* Light Gray */
--secondary: oklch(0.8 0.15 280); /* Vibrant Purple */
--secondary-foreground: oklch(0.95 0 0); /* Light Gray */
--muted: oklch(0.2 0 0); /* Dark Gray */
--muted-foreground: oklch(0.7 0 0); /* Light Gray */
--accent: oklch(0.7 0.25 290); /* Vibrant Pink */
--accent-foreground: oklch(0.95 0 0); /* Light Gray */
--destructive: oklch(0.5 0.25 25); /* Deep Red */
--destructive-foreground: oklch(0.95 0 0); /* Light Gray */
--border: oklch(0.2 0 0); /* Dark Gray */
--input: oklch(0.2 0 0); /* Dark Gray */
--ring: oklch(0.6 0.2 260 / 0.5); /* Vibrant Blue with transparency */
}
@theme inline {

4
components/history-sidebar.tsx
View File

@@ -21,11 +21,11 @@ interface HistorySidebarProps {
export default function HistorySidebar({ history, isOpen, onOpenChange, onItemClick }: HistorySidebarProps) {
return (
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetContent>
<SheetContent className="flex flex-col h-full">
<SheetHeader>
<SheetTitle>Historial de Escaneos</SheetTitle>
</SheetHeader>
<div className="mt-4 space-y-4 py-4">
<div className="flex-1 mt-4 space-y-4 py-4 overflow-y-auto">
{history.length === 0 ? (
<p className="text-sm text-gray-500">No hay zapatos en el historial.</p>
) : (

4
components/shoe-results-popup.tsx
View File

@@ -22,7 +22,7 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
useEffect(() => {
if (shoe) {
const images = [shoe.imageUrl, ...shoe.colorOptions.map(o => o.imageUrl)];
const images = [shoe.imageUrl, ...shoe.colorOptions.map(o => o.imageUrl)].filter(Boolean) as string[];
setAllImages(images);
setActiveImageUrl(shoe.imageUrl);
api?.scrollTo(0, true); // Jump to start without animation
@@ -61,6 +61,8 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
<div className="sticky top-0 z-10 w-full bg-inherit rounded-t-[10px] py-4">
<div className="mx-auto h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700" />
</div>
<Drawer.Title className="sr-only">{shoe.name}</Drawer.Title>
<Drawer.Description className="sr-only">{shoe.description}</Drawer.Description>
<div className="p-4">
<Carousel setApi={setApi} className="w-full mb-6">