Merge pull request #133 from bryanlundberg/style-select

style: light theme for select inputs

src/components/Select.tsx

@@ -12,33 +12,20 @@ import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { Themes } from "@/interfaces/types/Themes";
 import { useCubesModalStore } from "@/store/CubesModalStore";
+import useClickOutside from "@/hooks/useClickOutside";
 
 export default function Select() {
   const [open, setOpen] = useState<boolean>(false);
   const { selectedCube, cubes } = useTimerStore();
   const { lang, settings } = useSettingsModalStore();
   const componentRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        componentRef.current &&
-        !componentRef.current.contains(event.target as Node)
-      ) {
-        setOpen(false);
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
   const handleClose = () => {
     setOpen(false);
   };
 
+  useClickOutside(componentRef, handleClose);
+
   const variation: Record<Themes, string> = {
     light: "shadow-black bg-neutral-100 hover:bg-neutral-200",
     dark: "bg-zinc-950 hover:bg-zinc-800 border-zinc-800",
@@ -152,12 +139,12 @@ function Option({
   const { settings } = useSettingsModalStore();
 
   const variation: Record<Themes, string> = {
-    light: "hover:bg-zinc-700 hover:text-neutral-100",
+    light: "hover:bg-neutral-600 hover:text-neutral-100",
     dark: "hover:bg-zinc-800",
   };
 
   const variation2: Record<Themes, string> = {
-    light: "bg-zinc-800 text-neutral-200",
+    light: "bg-neutral-600 text-neutral-100",
     dark: "bg-zinc-800",
   };
 
@@ -173,7 +160,7 @@ function Option({
         }
         handleClose();
       }}
-      className={` p-1 select-none rounded-md ps-2 flex items-center justify-between overflow-hidden ${
+      className={`transition duration-200 p-1 select-none rounded-md ps-2 flex items-center justify-between overflow-hidden ${
         variation[settings.theme.background.color]
       } ${
         selectedCube?.id === cubeId

src/components/select/SelectOption.tsx

@@ -10,9 +10,9 @@ export function SelectOption({ label, selected, onSelect }: SelectOption) {
     <>
       <div
         onClick={onSelect}
-        className={`flex justify-between items-center dark:hover:text-neutral-200 dark:text-neutral-300 p-1 rounded-md ${
+        className={`transition duration-200 flex justify-between items-center p-1 rounded-md ${
           active
-            ? "dark:bg-zinc-800 light:bg-zinc-900 light:text-neutral-200"
+            ? "dark:bg-zinc-800 light:bg-neutral-600 light:text-neutral-100"
             : "dark:bg-zinc-950 dark:hover:bg-zinc-900 light:bg-transparent light:hover:bg-zinc-200 light:hover:text-neutral-950 light:text-neutral-800"
         }`}
       >

src/components/stats/CardStatistic.tsx

@@ -14,7 +14,7 @@ export default function CardStatistic({
   return (
     <>
       <div
-        className={`border dark:border-zinc-800 light:border-neutral-200 rounded-lg flex justify-between items-center p-3 dark:bg-zinc-900 light:bg-neutral-100 ${className}`}
+        className={`border dark:border-zinc-800 light:border-neutral-200 rounded-lg flex justify-between items-center p-3 dark:bg-zinc-950 light:bg-neutral-100 ${className}`}
       >
         <div className="grow">
           <div className="text-3xl font-medium">{total}</div>

src/components/stats/LastActivity.tsx

@@ -7,7 +7,7 @@ export default function LastActivity() {
 
   return (
     <>
-      <div className="w-full p-3 text-left border rounded-md dark:border-zinc-800 light:border-neutral-200 sm:text-center dark:bg-neutral-900 light:bg-neutral-100">
+      <div className="w-full p-3 text-left border rounded-md dark:border-zinc-800 light:border-neutral-200 sm:text-center dark:bg-neutral-950 light:bg-neutral-100">
         <div className="mb-3 text-xl font-medium">
           {translation.metrics["last-activity"][lang]}
         </div>

src/components/stats/PersonalStatistics.tsx

@@ -93,13 +93,13 @@ export default function PersonalStatistics() {
           />
         </PersonalCardsContainer>
         <PersonalChartsContainer>
-          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-neutral-900 light:bg-neutral-100">
+          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-zinc-950 light:bg-neutral-100">
             <RadarCharter data={data01} />
             <div className="mb-3 text-2xl font-medium text-center">
               {translation.metrics["cube-insights"][lang]}
             </div>
           </div>
-          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-neutral-900 light:bg-neutral-100">
+          <div className="flex flex-col items-center justify-center w-full p-3 border rounded-md light:border-neutral-200 dark:border-zinc-800 md:w-1/2 h-96 dark:bg-zinc-950 light:bg-neutral-100">
             <PieCharter data={data02} />
             <div className="mb-3 text-2xl font-medium text-center">
               {translation.metrics["rating-spread"][lang]}