From d2e8b521f050a6966ca0ab64690a9fd189abd496 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Thu, 6 Nov 2025 23:29:12 -0700
Subject: [PATCH] update dropdown styles

---
 src/components/Icon.tsx               |  2 ++
 src/components/form/GroupDropdown.tsx | 36 ++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index eb567e98..ad256aa0 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -82,6 +82,7 @@ export enum Icons {
   BELL = "bell",
   RELOAD = "reload",
   REPEAT = "repeat",
+  PLUS = "plus",
 }
 
 export interface IconProps {
@@ -181,6 +182,7 @@ const iconList: Record<Icons, string> = {
   bell: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 64C302.3 64 288 78.3 288 96L288 99.2C215 114 160 178.6 160 256L160 277.7C160 325.8 143.6 372.5 113.6 410.1L103.8 422.3C98.7 428.6 96 436.4 96 444.5C96 464.1 111.9 480 131.5 480L508.4 480C528 480 543.9 464.1 543.9 444.5C543.9 436.4 541.2 428.6 536.1 422.3L526.3 410.1C496.4 372.5 480 325.8 480 277.7L480 256C480 178.6 425 114 352 99.2L352 96C352 78.3 337.7 64 320 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z"/></svg>`,
   reload: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg>`,
   repeat: `<svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>`,
+  plus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" fill="currentColor"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>`,
 };
 
 export const Icon = memo((props: IconProps) => {
diff --git a/src/components/form/GroupDropdown.tsx b/src/components/form/GroupDropdown.tsx
index ecd925ec..990a8d6a 100644
--- a/src/components/form/GroupDropdown.tsx
+++ b/src/components/form/GroupDropdown.tsx
@@ -4,6 +4,8 @@ import React, { useEffect, useRef, useState } from "react";
 import { Icon, Icons } from "@/components/Icon";
 import { UserIcon, UserIcons } from "@/components/UserIcon";
 
+import { Button } from "../buttons/Button";
+
 interface GroupDropdownProps {
   groups: string[];
   currentGroups: string[];
@@ -122,6 +124,7 @@ export function GroupDropdown({
           )}
           {groups.map((group) => {
             const { icon, name } = parseGroupString(group);
+            const isChecked = currentGroups.includes(group);
             return (
               <label
                 key={group}
@@ -129,11 +132,27 @@ export function GroupDropdown({
               >
                 <input
                   type="checkbox"
-                  checked={currentGroups.includes(group)}
+                  checked={isChecked}
                   onChange={() => handleToggleGroup(group)}
-                  className="accent-type-link"
+                  className="sr-only"
                 />
-                <span className="w-5 h-5 flex items-center justify-center ml-1">
+                <div
+                  className={`relative w-4 h-4 rounded border-2 transition-all duration-200 flex items-center justify-center ${
+                    isChecked
+                      ? "bg-buttons-purple border-buttons-purple"
+                      : "border-background-secondary hover:border-buttons-purple/50"
+                  }`}
+                >
+                  <Icon
+                    icon={Icons.CHECKMARK}
+                    className={`w-4 h-4 transition-all duration-200 ${
+                      isChecked
+                        ? "text-white opacity-100 scale-75"
+                        : "opacity-0"
+                    }`}
+                  />
+                </div>
+                <span className="w-4 h-4 flex items-center justify-center ml-1">
                   <UserIcon
                     icon={icon}
                     className="inline-block w-full h-full"
@@ -158,15 +177,14 @@ export function GroupDropdown({
                 }}
                 style={{ minWidth: 0 }}
               />
-              <button
-                type="button"
-                className="text-type-link font-bold px-2 py-1 min-w-[2.5rem]"
+              <Button
+                theme="purple"
                 onClick={() => handleCreate(newGroup, selectedIcon)}
                 disabled={!newGroup.trim()}
-                style={{ flexShrink: 0 }}
+                className="h-6 w-6 min-w-12 md:min-w-6 justify-center items-center"
               >
-                {t("home.bookmarks.groups.dropdown.addButton")}
-              </button>
+                <Icon icon={Icons.PLUS} className="text-white w-4 h-4" />
+              </Button>
             </div>
             {newGroup.trim().length > 0 && (
               <div className="flex items-center gap-2 flex-wrap pt-2 w-full justify-center">