implements UI kit - first iteration

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -15,6 +15,8 @@
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-popover": "1.1.2",
+    "@radix-ui/react-scroll-area": "1.2.0",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-separator": "1.1.0",
     "@radix-ui/react-slot": "1.1.0",

client/src/app/(projects)/page.tsx

@@ -61,7 +61,7 @@ export default function Projects() {
         <ProjectsHeader />
         <ResizablePanelGroup
           direction="vertical"
-          className="grid flex-grow grid-rows-2 gap-3"
+          className="grid flex-grow grid-rows-2"
         >
           <ResizablePanel
             className="flex flex-1 flex-col"
@@ -71,9 +71,9 @@ export default function Projects() {
           >
             <ProjectsMap />
           </ResizablePanel>
-          <ResizableHandle withHandle className="my-3" />
+          <ResizableHandle withHandle />
           <ResizablePanel
-            className="flex flex-1 flex-col"
+            className="mb-4 flex flex-1 flex-col"
             minSize={PANEL_MIN_SIZE}
             defaultSize={100}
           >

client/src/app/(projects)/store.ts

@@ -9,9 +9,3 @@ export const projectsUIState = atom<{
   mapExpanded: "default",
   tableExpanded: "default",
 });
-
-export const projectsMapState = atom<{
-  legendOpen: boolean;
-}>({
-  legendOpen: true,
-});

client/src/app/globals.css

@@ -17,73 +17,39 @@ body {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --background: 214, 58%, 14%;
+    --foreground: 213, 73%, 97%;
+    --card: 213, 58%, 18%;
+    --card-foreground: 213, 73%, 97%;
+    --popover: 213, 58%, 18%;
+    --popover-foreground: 213, 73%, 97%;
+    --primary: 192, 86%, 69%;
+    --primary-foreground: 213, 73%, 97%;
+    --secondary: 213, 73%, 97%;
+    --secondary-foreground: 213, 58%, 18%;
+    --muted: 210, 64%, 27%;
+    --muted-foreground: 211, 69%, 86%;
+    --accent: 192, 86%, 69%;
+    --accent-foreground: 212, 57%, 24%;
+    --destructive: 350, 89%, 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 201, 59%, 24%;
+    --input: 213, 73%, 97%;
+    --ring: 212, 57%, 24%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-background: 214, 58%, 14%;
+    --sidebar-foreground: 213, 73%, 97%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-accent: 212, 57%, 24%;
+    --sidebar-accent-foreground: 192, 86%, 69%;
     --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-ring: 212, 57%, 24%;
   }
 }
 
@@ -92,6 +58,6 @@ body {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
   }
 }

client/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
 
-import { Inter } from "next/font/google";
+import { Spline_Sans } from "next/font/google";
 
 import type { Metadata } from "next";
 import "@/app/globals.css";
@@ -13,7 +13,11 @@ import Toaster from "@/components/ui/toast/toaster";
 
 import LayoutProviders from "./providers";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Spline_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+  variable: "--font-spline-sans",
+});
 
 export const metadata: Metadata = {
   title: "Blue Carbon Cost",

client/src/components/map/constants.ts

@@ -6,4 +6,5 @@ export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   longitude: 0,
 };
 
-export const MAPBOX_STYLE = "mapbox://styles/mapbox/standard-satellite";
+export const MAPBOX_STYLE =
+  "mapbox://styles/vizzualitybluecarbon/cm37685r0000h01mfhl92a2p1";

client/src/components/map/index.tsx

@@ -152,6 +152,8 @@ export default function Map({
         onMove={handleMapMove}
         onLoad={handleMapLoad}
         mapStyle={MAPBOX_STYLE}
+        maxZoom={10}
+        minZoom={0}
         {...mapboxProps}
         {...localViewState}
       >

client/src/components/ui/button.tsx

@@ -6,26 +6,26 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-big-stone-900 shadow hover:bg-sky-blue-200 focus-visible:ring-sky-blue-300/40",
+        secondary:
+          "bg-secondary text-accent-foreground shadow-sm hover:bg-big-stone-200 focus-visible:ring-sky-blue-300/40",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-rose-700 focus-visible:ring-destructive",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "border border-border bg-background shadow-sm hover:bg-big-stone-900 focus-visible:ring-sky-blue-300/40",
+        link: "text-primary-foreground underline-offset-4 hover:underline focus-visible:ring-sky-blue-900",
+        ghost: "text-foreground hover:bg-big-stone-900",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {

client/src/components/ui/input.tsx

@@ -1,19 +1,35 @@
 import * as React from "react";
 
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/lib/utils";
 
+const inputVariants = cva(
+  "flex h-9 w-full rounded-full border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-big-stone-950 text-big-stone-900 shadow border-border focus-visible:border-primary focus-visible:ring-sky-blue-300/40",
+        ghost: "text-foreground border-0 focus-visible:ring-sky-blue-300/40",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, variant, type, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
+        className={cn(inputVariants({ variant, className }))}
         ref={ref}
         {...props}
       />

client/src/components/ui/pagination.tsx

@@ -65,8 +65,8 @@ PaginationButton.displayName = "PaginationButton";
 const PaginationFirst = ({ className, ...props }: ButtonProps) => (
   <PaginationButton
     aria-label="Go to first page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    size="icon"
+    className={cn("gap-1", className)}
     {...props}
   >
     <ChevronFirstIcon className="h-4 w-4" />
@@ -77,8 +77,8 @@ PaginationFirst.displayName = "PaginationFirst";
 const PaginationPrevious = ({ className, ...props }: ButtonProps) => (
   <PaginationButton
     aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    size="icon"
+    className={cn("gap-1", className)}
     {...props}
   >
     <ChevronLeftIcon className="h-4 w-4" />
@@ -92,8 +92,8 @@ const PaginationNext = ({
 }: React.ComponentProps<typeof PaginationButton>) => (
   <PaginationButton
     aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    size="icon"
+    className={cn("gap-1", className)}
     {...props}
   >
     <ChevronRightIcon className="h-4 w-4" />
@@ -104,8 +104,8 @@ PaginationNext.displayName = "PaginationNext";
 const PaginationLast = ({ className, ...props }: ButtonProps) => (
   <PaginationButton
     aria-label="Go to first page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    size="icon"
+    className={cn("gap-1", className)}
     {...props}
   >
     <ChevronLastIcon className="h-4 w-4" />

client/src/components/ui/popover.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

client/src/components/ui/resizable.tsx

@@ -30,14 +30,14 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "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-none 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",
+      "relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-0 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}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm bg-secondary">
+        <DragHandleDots2Icon className="h-2.5 w-2.5 text-big-stone-900" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>