diff --git a/frontend/app/(routes)/map-explanation/page.tsx b/frontend/app/(routes)/map-explanation/page.tsx index 6512791..28aeb98 100644 --- a/frontend/app/(routes)/map-explanation/page.tsx +++ b/frontend/app/(routes)/map-explanation/page.tsx @@ -144,7 +144,7 @@ export default function ModelExplanationPage() { {" "} {/* Adjusted for page content */} {/* Header */} -
+
Map @@ -632,7 +632,7 @@ function Step5Content({ function InfoCard({ icon: Icon, title, description }: { icon: React.ElementType; title: string; description: string }) { return (
- +

{title}

{description}

@@ -675,7 +675,7 @@ function FactorCard({ function ProximityItem({ icon: Icon, text }: { icon: React.ElementType; text: string }) { return (
- +
{text}
); diff --git a/frontend/app/(routes)/map/page.tsx b/frontend/app/(routes)/map/page.tsx index 8fa0a97..0e0617b 100644 --- a/frontend/app/(routes)/map/page.tsx +++ b/frontend/app/(routes)/map/page.tsx @@ -48,7 +48,7 @@ export default function MapPage() { {/* Prediction model banner */}
-
+

Price Prediction: 15,000,000 ฿

Based on our AI model analysis

diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 1186e16..869ce11 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -1,4 +1,4 @@ -@import "tailwindcss" prefix(tw); +@import 'tailwindcss' prefix(tw); @plugin "tailwindcss-animate"; @@ -6,6 +6,96 @@ @custom-variant dark (&:is(.dark *)); +@custom-variant dark (&:is(.dark *)); + +@theme { + --font-sans: + var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --color-sidebar: hsl(var(--sidebar-background)); + --color-sidebar-foreground: hsl(var(--sidebar-foreground)); + --color-sidebar-border: hsl(var(--sidebar-border)); + --color-sidebar-ring: hsl(var(--sidebar-ring)); + + --color-sidebar-accent: hsl(var(--sidebar-accent)); + --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); + + --radius-lg: var(--radius); + --radius-md: calc(var(--radius) - 2px); + --radius-sm: calc(var(--radius) - 4px); + + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; + --animate-caret-blink: caret-blink 1s ease-in-out infinite; + + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } + @keyframes caret-blink { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } + } +} + +@utility container { + margin-inline: auto; + padding-inline: 2rem; + @media (width >= --theme(--breakpoint-sm)) { + max-width: none; + } + @media (width >= 1400px) { + max-width: 1400px; + } +} + @theme { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); @@ -75,6 +165,24 @@ } } +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} + /* The default border color has changed to `currentColor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still diff --git a/frontend/components/common/ThemeController.tsx b/frontend/components/common/ThemeController.tsx index 39fb275..f3283b1 100644 --- a/frontend/components/common/ThemeController.tsx +++ b/frontend/components/common/ThemeController.tsx @@ -72,7 +72,7 @@ export function ThemeController({ children, defaultColorScheme = "Blue" }: Theme {children} {/* Theme Controller UI */} -
+
{" "} {/* Ensure high z-index */} @@ -83,7 +83,7 @@ export function ThemeController({ children, defaultColorScheme = "Blue" }: Theme diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx index f000e3e..f6eae7c 100644 --- a/frontend/components/ui/badge.tsx +++ b/frontend/components/ui/badge.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx index 36496a2..ec4cf64 100644 --- a/frontend/components/ui/button.tsx +++ b/frontend/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx index f62edea..08dc8c7 100644 --- a/frontend/components/ui/card.tsx +++ b/frontend/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
{children} - + Close diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx index 0fc4c0e..6b143f3 100644 --- a/frontend/components/ui/dropdown-menu.tsx +++ b/frontend/components/ui/dropdown-menu.tsx @@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef< >( ( div]:rotate-90", + "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className )} {...props} diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx index cbe5a36..8607fbe 100644 --- a/frontend/components/ui/select.tsx +++ b/frontend/components/ui/select.tsx @@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef< span]:line-clamp-1", + "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} @@ -118,7 +118,7 @@ const SelectItem = React.forwardRef< {children} - + Close diff --git a/frontend/components/ui/sidebar.tsx b/frontend/components/ui/sidebar.tsx index eeb2d7a..5a12497 100644 --- a/frontend/components/ui/sidebar.tsx +++ b/frontend/components/ui/sidebar.tsx @@ -141,7 +141,7 @@ const SidebarProvider = React.forwardRef< } as React.CSSProperties } className={cn( - "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", + "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className )} ref={ref} @@ -181,7 +181,7 @@ const Sidebar = React.forwardRef< return (