From 7340b65ae98b4ceb3696f91ed6f56921a567013a Mon Sep 17 00:00:00 2001
From: Jonathan Bursztyn <jonathan@bursztyn.io>
Date: Fri, 5 Sep 2025 00:29:18 +0100
Subject: [PATCH 1/3] adds support for dark mode for the three dots button

---
 src/ui/common/assets/three-dots-black.svg     |  5 +++++
 .../ThreeDotsMenu/ThreeDotsMenu.tsx           | 21 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/ui/common/assets/three-dots-black.svg

diff --git a/src/ui/common/assets/three-dots-black.svg b/src/ui/common/assets/three-dots-black.svg
new file mode 100644
index 000000000..297bed51d
--- /dev/null
+++ b/src/ui/common/assets/three-dots-black.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M4.99967 8.33203C4.08301 8.33203 3.33301 9.08203 3.33301 9.9987C3.33301 10.9154 4.08301 11.6654 4.99967 11.6654C5.91634 11.6654 6.66634 10.9154 6.66634 9.9987C6.66634 9.08203 5.91634 8.33203 4.99967 8.33203ZM14.9997 8.33203C14.083 8.33203 13.333 9.08203 13.333 9.9987C13.333 10.9154 14.083 11.6654 14.9997 11.6654C15.9163 11.6654 16.6663 10.9154 16.6663 9.9987C16.6663 9.08203 15.9163 8.33203 14.9997 8.33203ZM9.99967 8.33203C9.08301 8.33203 8.33301 9.08203 8.33301 9.9987C8.33301 10.9154 9.08301 11.6654 9.99967 11.6654C10.9163 11.6654 11.6663 10.9154 11.6663 9.9987C11.6663 9.08203 10.9163 8.33203 9.99967 8.33203Z"
+        fill="#000000" />
+</svg>
diff --git a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
index 490ef2d3a..59d0e5121 100644
--- a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,7 +1,9 @@
 import { Popover, Text } from "@babylonlabs-io/core-ui";
-import { useState } from "react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
-import threeDots from "@/ui/common/assets/three-dots.svg";
+import threeDotsDark from "@/ui/common/assets/three-dots-black.svg";
+import threeDotsLight from "@/ui/common/assets/three-dots.svg";
 
 interface ThreeDotsMenuProps {
   onChange: () => void;
@@ -16,6 +18,12 @@ export const ThreeDotsMenu = ({
 }: ThreeDotsMenuProps) => {
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
     <>
@@ -25,7 +33,14 @@ export const ThreeDotsMenu = ({
         className={className}
         aria-label="Open options"
       >
-        <img src={threeDots} alt="options" width={20} height={20} />
+        {mounted && (
+          <img
+            src={resolvedTheme === "light" ? threeDotsDark : threeDotsLight}
+            alt="options"
+            width={20}
+            height={20}
+          />
+        )}
       </button>
 
       <Popover

From c73f2a2235d691b6575e53896d6d8caf8495a223 Mon Sep 17 00:00:00 2001
From: Jonathan Bursztyn <jonathan@bursztyn.io>
Date: Fri, 5 Sep 2025 15:09:46 +0100
Subject: [PATCH 2/3] refactor

---
 .../Icons/common/ThreeDotsMenuIcon.tsx        | 39 +++++++++++++++++++
 .../ThreeDotsMenu/ThreeDotsMenu.tsx           | 24 +++---------
 2 files changed, 45 insertions(+), 18 deletions(-)
 create mode 100644 src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx

diff --git a/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx b/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx
new file mode 100644
index 000000000..482535683
--- /dev/null
+++ b/src/ui/common/components/Icons/common/ThreeDotsMenuIcon.tsx
@@ -0,0 +1,39 @@
+import { iconColorVariants } from "@babylonlabs-io/core-ui";
+import { twJoin } from "tailwind-merge";
+
+interface ThreeDotsMenuIconProps {
+  className?: string;
+  size?: number;
+  /** Same variants supported by other icons */
+  variant?: keyof typeof iconColorVariants;
+  /** Tailwind className to force a color */
+  color?: string;
+}
+
+export const ThreeDotsMenuIcon = ({
+  className = "",
+  size = 20,
+  variant = "default",
+  color,
+}: ThreeDotsMenuIconProps) => {
+  const colorClass = color || iconColorVariants[variant];
+
+  return (
+    <svg
+      style={{ width: size, height: size }}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twJoin(
+        "transition-opacity duration-200",
+        colorClass,
+        className,
+      )}
+    >
+      <path
+        d="M4.99967 8.33203C4.08301 8.33203 3.33301 9.08203 3.33301 9.9987C3.33301 10.9154 4.08301 11.6654 4.99967 11.6654C5.91634 11.6654 6.66634 10.9154 6.66634 9.9987C6.66634 9.08203 5.91634 8.33203 4.99967 8.33203ZM14.9997 8.33203C14.083 8.33203 13.333 9.08203 13.333 9.9987C13.333 10.9154 14.083 11.6654 14.9997 11.6654C15.9163 11.6654 16.6663 10.9154 16.6663 9.9987C16.6663 9.08203 15.9163 8.33203 14.9997 8.33203ZM9.99967 8.33203C9.08301 8.33203 8.33301 9.08203 8.33301 9.9987C8.33301 10.9154 9.08301 11.6654 9.99967 11.6654C10.9163 11.6654 11.6663 10.9154 11.6663 9.9987C11.6663 9.08203 10.9163 8.33203 9.99967 8.33203Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
index 59d0e5121..e105a622f 100644
--- a/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/src/ui/common/components/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,9 +1,7 @@
 import { Popover, Text } from "@babylonlabs-io/core-ui";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-import threeDotsDark from "@/ui/common/assets/three-dots-black.svg";
-import threeDotsLight from "@/ui/common/assets/three-dots.svg";
+import { ThreeDotsMenuIcon } from "@/ui/common/components/Icons/common/ThreeDotsMenuIcon";
 
 interface ThreeDotsMenuProps {
   onChange: () => void;
@@ -18,12 +16,6 @@ export const ThreeDotsMenu = ({
 }: ThreeDotsMenuProps) => {
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const { resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
 
   return (
     <>
@@ -33,14 +25,10 @@ export const ThreeDotsMenu = ({
         className={className}
         aria-label="Open options"
       >
-        {mounted && (
-          <img
-            src={resolvedTheme === "light" ? threeDotsDark : threeDotsLight}
-            alt="options"
-            width={20}
-            height={20}
-          />
-        )}
+        <ThreeDotsMenuIcon
+          size={20}
+          className="text-accent-primary dark:text-white"
+        />
       </button>
 
       <Popover

From 1a52f8b45752e411e80a8839ceb3b0d4b5e0d2bf Mon Sep 17 00:00:00 2001
From: Jonathan Bursztyn <jonathan@bursztyn.io>
Date: Fri, 5 Sep 2025 15:14:28 +0100
Subject: [PATCH 3/3] remove icon

---
 src/ui/common/assets/three-dots.svg | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 src/ui/common/assets/three-dots.svg

diff --git a/src/ui/common/assets/three-dots.svg b/src/ui/common/assets/three-dots.svg
deleted file mode 100644
index 16dabb8c6..000000000
--- a/src/ui/common/assets/three-dots.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M4.99967 8.33203C4.08301 8.33203 3.33301 9.08203 3.33301 9.9987C3.33301 10.9154 4.08301 11.6654 4.99967 11.6654C5.91634 11.6654 6.66634 10.9154 6.66634 9.9987C6.66634 9.08203 5.91634 8.33203 4.99967 8.33203ZM14.9997 8.33203C14.083 8.33203 13.333 9.08203 13.333 9.9987C13.333 10.9154 14.083 11.6654 14.9997 11.6654C15.9163 11.6654 16.6663 10.9154 16.6663 9.9987C16.6663 9.08203 15.9163 8.33203 14.9997 8.33203ZM9.99967 8.33203C9.08301 8.33203 8.33301 9.08203 8.33301 9.9987C8.33301 10.9154 9.08301 11.6654 9.99967 11.6654C10.9163 11.6654 11.6663 10.9154 11.6663 9.9987C11.6663 9.08203 10.9163 8.33203 9.99967 8.33203Z"
-        fill="white" />
-</svg>
\ No newline at end of file