Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 04:32:25 +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 ? ( {customButton ? (
<Listbox.Button as={Fragment}>{customButton}</Listbox.Button> <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"> <span className="flex gap-4 items-center truncate">
{props.selectedItem.leftIcon {props.selectedItem.leftIcon
? props.selectedItem.leftIcon ? props.selectedItem.leftIcon
@ -51,7 +51,7 @@ export function Dropdown(props: DropdownProps) {
<Transition <Transition
animation="slide-down" animation="slide-down"
show={open} 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" direction === "up" ? "bottom-full mb-4" : "top-full mt-1"
} ${props.side === "right" ? "right-0" : "left-0"}`} } ${props.side === "right" ? "right-0" : "left-0"}`}
> >
@ -60,7 +60,7 @@ export function Dropdown(props: DropdownProps) {
{customMenu} {customMenu}
</Listbox.Options> </Listbox.Options>
) : ( ) : (
<Listbox.Options static className="py-1"> <Listbox.Options static>
{props.options.map((opt) => ( {props.options.map((opt) => (
<Listbox.Option <Listbox.Option
className={({ active }) => 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]"> <div ref={dropdownRef} className="relative min-w-[200px]">
<button <button
type="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)} onClick={() => setOpen((v) => !v)}
> >
{currentGroups.length > 0 ? ( {currentGroups.length > 0 ? (
@ -116,7 +116,7 @@ export function GroupDropdown({
</span> </span>
</button> </button>
{open && ( {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 && ( {groups.length === 0 && !showInput && (
<div className="px-4 py-2 text-type-secondary"> <div className="px-4 py-2 text-type-secondary">
{t("home.bookmarks.groups.dropdown.empty")} {t("home.bookmarks.groups.dropdown.empty")}
@ -128,7 +128,7 @@ export function GroupDropdown({
return ( return (
<label <label
key={group} 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 <input
type="checkbox" type="checkbox"