danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: dark theme to a few components

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 19:01:54 +03:30
parent e92c33963d
commit 5936f66665
7 changed files with 92 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/combobox/Combobox.tsx
+5 -5
View File
@@ -97,7 +97,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
{...props}
>
<div
className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer"
className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer"
tabIndex={0}
onClick={toggleExpand}
role="combobox"
@@ -110,7 +110,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
htmlFor="content-select"
className="pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]"
>
<span className="relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap">
<span className="relative text-foreground w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap">
{title}
</span>
</label>
@@ -137,7 +137,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
<motion.div
data-expand={expand}
aria-hidden={!expand}
className="absolute top-full left-0 w-full mt-1 text-foreground bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
className="absolute top-full left-0 w-full mt-1 text-foreground bg-container rounded-xl outline outline-solid outline-border shadow-lg z-10"
role="listbox"
aria-label={`${title} options`}
onClick={(e) => e.stopPropagation()}
@@ -147,7 +147,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
>
{searchable &&
<div className="w-full flex gap-2 border-b px-3 items-center">
<div className="w-full flex gap-2 border-b border-border px-3 items-center">
<SearchNormal size={16} className='stroke-gray-400' />
<input
placeholder="جستجو ..."
@@ -165,7 +165,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI
onClick={(e) => setSelection(e, i)}
key={v.id}
data-selected={v.id === selectedId}
className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-current/10 rounded-md last:rounded-b-xl"
tabIndex={0}
role="option"
aria-selected