fix: Adjust map left sidebar colors

dataforgoodfr · Dec 11, 2024 · 3c55a00 · 3c55a00
1 parent 277d186
commit 3c55a00
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 50 deletions.
diff --git a/frontend/components/core/left-panel.tsx b/frontend/components/core/left-panel.tsx
@@ -101,7 +101,7 @@ export default function LeftPanel() {
                 variants={svgVariants}
                 initial="close"
               >
-                <ChevronRightIcon className="size-8" />
+                <ChevronRightIcon className="size-8 text-neutral-200" />
               </motion.div>
             </button>
           </div>
@@ -114,7 +114,7 @@ export default function LeftPanel() {
                 name="Dashboard"
                 wide={leftPanelOpened}
               >
-                <ChartBarIcon className="w-8 min-w-8 stroke-inherit stroke-[0.75]" />
+                <ChartBarIcon className="w-8 min-w-8 stroke-neutral-200 stroke-1 hover:stroke-[1.25]" />
               </NavigationLink>
             </div>
             <div className="flex flex-col gap-3 bg-color-3 p-5">

diff --git a/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx b/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx
@@ -4,28 +4,25 @@ import { useEffect, useMemo, useState } from "react"
 import { PopoverContent, PopoverTrigger } from "@radix-ui/react-popover"
 import { format } from "date-fns"
 import {
-  CalendarIcon,
   ChevronRight,
   MinusIcon,
   PenIcon,
   Ship as ShipIcon,
   XIcon,
 } from "lucide-react"
 import { DayPicker, getDefaultClassNames, Matcher } from "react-day-picker"
+import { useShallow } from "zustand/react/shallow"
 
 import { Vessel } from "@/types/vessel"
+import { useMapStore } from "@/libs/stores/map-store"
+import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
+import { useVesselsStore } from "@/libs/stores/vessels-store"
 import { cn } from "@/libs/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Popover } from "@/components/ui/popover"
 
-import { useVesselsStore } from "@/libs/stores/vessels-store"
-import { useMapStore } from "@/libs/stores/map-store"
-import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
-import { useShallow } from "zustand/react/shallow"
-
 import TrackedVesselItem from "./tracked-vessel-item"
-import Spinner from "@/components/ui/custom/spinner"
 
 function NoVesselsPlaceholder() {
   return (
@@ -119,7 +116,6 @@ function TrackModeDatePicker({
           mode="single"
           selected={date}
           onSelect={setDate}
-
           classNames={{
             root: `${defaultClassNames.root} bg-white rounded-md`,
             selected: `bg-color-1 rounded-md`,
@@ -150,24 +146,27 @@ function TrackModeDatePicker({
 }
 
 function TrackModeHeader() {
-  const {
-    setMode: setMapMode
-  } = useMapStore(useShallow((state) => ({
-    setMode: state.setMode,
-  })))
+  const { setMode: setMapMode } = useMapStore(
+    useShallow((state) => ({
+      setMode: state.setMode,
+    }))
+  )
 
-  const { startDate, endDate, setStartDate, setEndDate } = useTrackModeOptionsStore(useShallow((state) => ({
-    startDate: state.startDate,
-    endDate: state.endDate,
-    setStartDate: state.setStartDate,
-    setEndDate: state.setEndDate,
-  })))
+  const { startDate, endDate, setStartDate, setEndDate } =
+    useTrackModeOptionsStore(
+      useShallow((state) => ({
+        startDate: state.startDate,
+        endDate: state.endDate,
+        setStartDate: state.setStartDate,
+        setEndDate: state.setEndDate,
+      }))
+    )
 
-  const [startDateSelected, setStartDateSelected] = useState(startDate);
-  const [endDateSelected, setEndDateSelected] = useState(endDate);
+  const [startDateSelected, setStartDateSelected] = useState(startDate)
+  const [endDateSelected, setEndDateSelected] = useState(endDate)
 
-  const today = new Date();
-  const minDate = startDate ? startDate : today;
+  const today = new Date()
+  const minDate = startDate ? startDate : today
 
   const onSetStartDate = (date: Date | undefined) => {
     setStartDateSelected(date)
@@ -230,26 +229,31 @@ export default function TrackedVesselsPanel({
     mode: mapMode,
     setMode: setMapMode,
     setActivePosition: setActivePosition,
-  } = useMapStore(useShallow((state) => ({
-    mode: state.mode,
-    setMode: state.setMode,
-    setActivePosition: state.setActivePosition,
-  })))
+  } = useMapStore(
+    useShallow((state) => ({
+      mode: state.mode,
+      setMode: state.setMode,
+      setActivePosition: state.setActivePosition,
+    }))
+  )
 
-  const { trackedVesselIDs, setTrackedVesselIDs } = useTrackModeOptionsStore(useShallow((state) => ({
-    trackedVesselIDs: state.trackedVesselIDs,
-    setTrackedVesselIDs: state.setTrackedVesselIDs,
-  })))
+  const { trackedVesselIDs, setTrackedVesselIDs } = useTrackModeOptionsStore(
+    useShallow((state) => ({
+      trackedVesselIDs: state.trackedVesselIDs,
+      setTrackedVesselIDs: state.setTrackedVesselIDs,
+    }))
+  )
 
-  const { vessels: allVessels } = useVesselsStore(useShallow((state) => ({
-    vessels: state.vessels,
-  })))
+  const { vessels: allVessels } = useVesselsStore(
+    useShallow((state) => ({
+      vessels: state.vessels,
+    }))
+  )
 
   const trackedVesselsDetails = useMemo(() => {
     return allVessels.filter((vessel) => trackedVesselIDs.includes(vessel.id))
   }, [allVessels, trackedVesselIDs])
 
-
   const hasTrackedVessels = useMemo(() => {
     return trackedVesselIDs.length > 0
   }, [trackedVesselIDs])
@@ -261,15 +265,15 @@ export default function TrackedVesselsPanel({
 
   const vesselsSelectedCount = trackedVesselIDs.length
 
-  const [animateBadge, setAnimateBadge] = useState(false);
+  const [animateBadge, setAnimateBadge] = useState(false)
 
   useEffect(() => {
     if (vesselsSelectedCount > 0) {
-      setAnimateBadge(true);
-      const timer = setTimeout(() => setAnimateBadge(false), 300);
-      return () => clearTimeout(timer);
+      setAnimateBadge(true)
+      const timer = setTimeout(() => setAnimateBadge(false), 300)
+      return () => clearTimeout(timer)
     }
-  }, [vesselsSelectedCount]);
+  }, [vesselsSelectedCount])
 
   const WideModeTab = () => {
     return (
@@ -306,17 +310,15 @@ export default function TrackedVesselsPanel({
   return (
     <>
       <div>
-        <h5
-          className="flex gap-1 text-sm font-bold uppercase leading-6"
-        >
+        <h5 className="flex gap-1 text-sm font-bold uppercase leading-6">
           {!wideMode && (
             <div className="relative">
-              <ShipIcon className="w-8 min-w-8" />
+              <ShipIcon className="w-8 min-w-8 stroke-neutral-200 hover:stroke-neutral-100" />
               {vesselsSelectedCount > 0 && (
                 <Badge
                   variant="outline"
                   className={cn(
-                    "absolute right-0 top-0 translate-x-1/2 -translate-y-1/2 flex justify-center items-center size-5 bg-color-1 text-color-3 border-none",
+                    "absolute right-0 top-0 flex size-5 -translate-y-1/2 translate-x-1/2 items-center justify-center border-none bg-color-1 text-color-3",
                     animateBadge && "animate-grow-shrink"
                   )}
                 >
@@ -326,7 +328,7 @@ export default function TrackedVesselsPanel({
             </div>
           )}
           {mapMode === "position" && wideMode && (
-            <span>{`Selected vessel (${trackedVesselIDs.length})`}</span>
+            <span className="text-card">{`Selected vessel (${trackedVesselIDs.length})`}</span>
           )}
         </h5>
       </div>

diff --git a/frontend/components/ui/navigation-link.tsx b/frontend/components/ui/navigation-link.tsx
@@ -18,7 +18,7 @@ const NavigationLink = ({
   return (
     <Link
       href={href}
-      className="flex cursor-pointer place-items-center gap-3 rounded stroke-neutral-400 stroke-[0.75] p-1 text-neutral-400 transition-colors duration-100 hover:bg-neutral-700/30 hover:stroke-neutral-100 hover:text-neutral-100"
+      className="group flex cursor-pointer place-items-center gap-3 rounded stroke-neutral-200 p-1 text-neutral-200 transition-colors duration-100 hover:stroke-foreground hover:font-semibold hover:text-card"
     >
       {children}
       {wide && (