fix: change adaption rate bg color and logic

app/app.css

@@ -78,6 +78,7 @@ html[dir="rtl"] body {
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
+  --color-dark-blue: var(--dark-blue);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
@@ -125,6 +126,7 @@ html[dir="rtl"] body {
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #22c55e;
+  --dark-blue: #33364d;
 
   /* Primary color scale */
   --color-primary-50: #f0fdf4;

app/components/dashboard/strategic-alignment-popup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useReducer, useState } from "react";
+import { useEffect, useReducer, useRef, useState } from "react";
 import {
   Bar,
   BarChart,
@@ -118,6 +118,7 @@ export function StrategicAlignmentPopup({
 }: StrategicAlignmentPopupProps) {
   const [data, setData] = useState<StrategicAlignmentData[]>([]);
   const [loading, setLoading] = useState(false);
+  const contentRef = useRef<HTMLDivElement | null>(null);
   const [state, dispatch] = useReducer(reducer, {
     isOpen: false,
     selectedValue: "همه مضامین",
@@ -260,6 +261,25 @@ export function StrategicAlignmentPopup({
     });
   };
 
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        dispatch({
+          type: "CLOSE",
+        });
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={dialogHandler}>
       <DialogContent className="w-full max-w-4xl bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] text-white border-none">
@@ -273,13 +293,19 @@ export function StrategicAlignmentPopup({
               >
                 <DropdownMenuButton>{state.selectedValue}</DropdownMenuButton>
 
-                <DropdownMenuContent forceMount={true} className="w-56">
+                <DropdownMenuContent
+                  ref={contentRef}
+                  forceMount={true}
+                  className="w-56"
+                >
                   {state.dropDownItems.map((item: string, key: number) => (
                     <div
                       onClick={() => selectItem(item)}
                       key={`${key}-${item}`}
                     >
-                      <DropdownMenuItem>{item}</DropdownMenuItem>
+                      <DropdownMenuItem selected={state.selectedValue === item}>
+                        {item}
+                      </DropdownMenuItem>
                     </div>
                   ))}
                 </DropdownMenuContent>

app/components/ui/dropdown-menu.tsx

@@ -77,13 +77,15 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    selected?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, selected, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-pointer select-none  rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-gray-600  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-pointer select-none  rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-dark-blue  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
+      selected && "bg-dark-blue text-white",
       className
     )}
     {...props}