Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-04 15:39:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update dropdown styles

Browse source
This commit is contained in:
Pas 2025-11-07 13:00:56 -07:00
parent 95270201cb
commit 1f5049f7a8
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/form/Dropdown.tsx
View file

@ -33,7 +33,7 @@ export function Dropdown(props: DropdownProps) {
{customButton ? (
<Listbox.Button as={Fragment}>{customButton}</Listbox.Button>
) : (
<Listbox.Button className="relative z-[30] w-full rounded-lg bg-dropdown-background hover:bg-dropdown-hoverBackground py-3 pl-3 pr-10 text-left text-white shadow-md focus:outline-none tabbable cursor-pointer">
<Listbox.Button className="relative z-[30] w-full rounded-xl bg-dropdown-background hover:bg-dropdown-hoverBackground py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none tabbable cursor-pointer">
<span className="flex gap-4 items-center truncate">
{props.selectedItem.leftIcon
? props.selectedItem.leftIcon
@ -51,7 +51,7 @@ export function Dropdown(props: DropdownProps) {
<Transition
animation="slide-down"
show={open}
className={`absolute z-[40] min-w-[20px] w-fit max-h-60 overflow-auto rounded-lg bg-dropdown-background py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-background-secondary scrollbar-thumb-type-secondary focus:outline-none ${
className={`absolute z-[40] min-w-[20px] w-fit max-h-60 overflow-auto rounded-xl bg-dropdown-background py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-background-secondary scrollbar-thumb-type-secondary focus:outline-none ${
direction === "up" ? "bottom-full mb-4" : "top-full mt-1"
} ${props.side === "right" ? "right-0" : "left-0"}`}
>
@ -60,7 +60,7 @@ export function Dropdown(props: DropdownProps) {
{customMenu}
</Listbox.Options>
) : (
<Listbox.Options static className="py-1">
<Listbox.Options static>
{props.options.map((opt) => (
<Listbox.Option
className={({ active }) =>

6
src/components/form/GroupDropdown.tsx
View file

@ -85,7 +85,7 @@ export function GroupDropdown({
<div ref={dropdownRef} className="relative min-w-[200px]">
<button
type="button"
className="w-full px-3 py-2 text-xs bg-background-main border border-background-secondary rounded-lg text-white flex justify-between items-center hover:bg-mediaCard-hoverBackground transition-colors"
className="w-full px-3 py-2 text-xs bg-background-main border border-background-secondary rounded-xl text-white flex justify-between items-center hover:bg-mediaCard-hoverBackground transition-colors"
onClick={() => setOpen((v) => !v)}
>
{currentGroups.length > 0 ? (
@ -116,7 +116,7 @@ export function GroupDropdown({
</span>
</button>
{open && (
<div className="absolute min-w-full z-[150] mt-1 end-0 bg-background-main border border-background-secondary rounded-lg shadow-lg py-1 pb-3 text-sm">
<div className="absolute min-w-full z-[150] mt-1 end-0 bg-background-main border border-background-secondary rounded-xl shadow-lg py-1 pb-3 text-sm">
{groups.length === 0 && !showInput && (
<div className="px-4 py-2 text-type-secondary">
{t("home.bookmarks.groups.dropdown.empty")}
@ -128,7 +128,7 @@ export function GroupDropdown({
return (
<label
key={group}
className="flex items-center gap-2 mx-1 px-3 py-2 hover:bg-mediaCard-hoverBackground rounded-md cursor-pointer transition-colors text-type-link/80"
className="flex items-center gap-2 mx-1 px-3 py-2 hover:bg-mediaCard-hoverBackground rounded-lg cursor-pointer transition-colors text-type-link/80"
>
<input
type="checkbox"