Multiple theme support & fixes

This commit is contained in:
Sacha Weatherstone
2022-12-29 23:45:16 +11:00
parent 5022bda660
commit dab158c7b3
61 changed files with 2462 additions and 581 deletions
+6 -4
View File
@@ -28,13 +28,15 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
) {
return (
<InfoWrapper label={label} description={description} error={error}>
<div className="flex rounded-md shadow-sm">
<div className="flex rounded-md">
<select
ref={ref}
className={`flex h-10 w-full rounded-md border-transparent bg-orange-100 px-3 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
className={`flex h-10 w-full rounded-md border-transparent bg-backgroundPrimary px-3 text-sm text-textPrimary focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent ${
action ? "rounded-r-none" : ""
} ${
disabled ? "cursor-not-allowed bg-orange-50 text-orange-200" : ""
disabled
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled"
: ""
}`}
disabled={disabled}
{...rest}
@@ -49,7 +51,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
<button
type="button"
onClick={action.action}
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium hover:bg-orange-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-backgroundPrimary px-4 py-2 text-sm font-medium text-textSecondary brightness-hover hover:brightness-hover focus:outline-none focus:ring-2 focus:ring-accent active:brightness-press"
>
{action.icon}
</button>