daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-05 17:58:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Webapp stylings (#1916)

Browse Source
This commit is contained in:
BFlat authored and GitHub committed 2026-09-01 10:25:21 +07:00
1 parent d2ad5820e0
commit 60bcfffc8d
156 files changed
+2512 -2753
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/libs/components/select/src/lib/select.tsx
+6 -9
View File
@@ -28,7 +28,7 @@ export const Select = ({
className,
}: ListDropdownProps) => {
const selectedOption = options.find(
(option: SelectOption) => option.value === value
(option: SelectOption) => option.value === value,
) || { label: placeholder || "", value: "" };
return (
@@ -38,7 +38,7 @@ export const Select = ({
<>
<ListboxButton
id={id}
className="relative h-10 w-full cursor-pointer rounded-none bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-colors duration-150 ease-in-out sm:text-sm focus:!outline-none hover:border-white/40"
className="relative h-10 w-full cursor-pointer rounded-[3px] bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-colors duration-150 ease-in-out sm:text-sm focus:!outline-none hover:border-white/40"
>
<span
className={twMerge("block truncate", !value && "opacity-50")}
@@ -46,7 +46,7 @@ export const Select = ({
{selectedOption.label}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5">
<ChevronDownIcon aria-hidden="true" />
<ChevronDownIcon aria-hidden="true" />
</span>
</ListboxButton>
@@ -57,7 +57,7 @@ export const Select = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-none bg-ui-panel border border-ui-panel-border text-base focus:outline-none sm:text-sm">
<ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[3px] bg-ui-panel border border-ui-panel-border text-base focus:outline-none sm:text-sm">
{options.map((option, itemIdx) => (
<ListboxOption
key={itemIdx}
@@ -66,7 +66,7 @@ export const Select = ({
"relative cursor-pointer select-none py-2 pl-7 pr-2 transition-colors duration-150 ease-in-out",
!selected ? "text-base-fg/90" : "text-base-fg",
selected && "bg-white/10",
focus && "bg-white text-black"
focus && "bg-white text-black",
)
}
value={option.value}
@@ -82,10 +82,7 @@ export const Select = ({
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-2.5">
<CheckIcon
aria-hidden="true"
className="text-xs" />
<CheckIcon aria-hidden="true" className="text-xs" />
</span>
) : null}
</>