Browse Source

Fix UI inconsistencies

Update button colors, as well as cursor for menumultiselect.
master
TheoryOfNekomata 1 year ago
parent
commit
3e48a1cdcd
3 changed files with 13 additions and 9 deletions
  1. +3
    -3
      categories/action/react/src/components/ActionButton/index.tsx
  2. +1
    -1
      categories/multichoice/react/src/components/MenuMultiSelect/index.tsx
  3. +9
    -5
      categories/navigation/react/src/components/LinkButton/index.tsx

+ 3
- 3
categories/action/react/src/components/ActionButton/index.tsx View File

@@ -87,9 +87,9 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
'pr-2': compact || menuItem,
},
{
'border-2 border-primary disabled:border-primary focus:border-secondary active:border-tertiary': variant !== 'bare',
'bg-negative text-primary disabled:text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
'bg-primary text-negative disabled:bg-primary focus:bg-secondary active:bg-tertiary': variant === 'filled',
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
},
{
'h-10': size === 'small',


+ 1
- 1
categories/multichoice/react/src/components/MenuMultiSelect/index.tsx View File

@@ -96,7 +96,7 @@ export const MenuMultiSelect = React.forwardRef<
height: startingHeight,
}}
className={clsx(
'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit',
'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit cursor-pointer',
'focus:outline-0',
'disabled:opacity-50 disabled:cursor-not-allowed',
{


+ 9
- 5
categories/navigation/react/src/components/LinkButton/index.tsx View File

@@ -29,20 +29,24 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
block = false,
component: EnabledComponent = 'a',
disabled = false,
href,
...etcProps
},
forwardedRef,
) => {
const Component = disabled ? 'span' : EnabledComponent;
const Component = disabled ? 'button' : EnabledComponent;
return (
<Component
{...etcProps}
href={disabled ? undefined : href}
type={disabled ? 'button' : undefined}
ref={forwardedRef}
disabled={disabled || undefined}
className={clsx(
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0',
'focus:outline-0 focus:ring-4',
'active:ring-tertiary/50',
disabled && 'opacity-50 cursor-not-allowed',
'disabled:opacity-50 disabled:cursor-not-allowed',
{
'flex w-full': block,
'inline-flex max-w-full align-middle': !block,
@@ -54,9 +58,9 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
'pr-2': compact || menuItem,
},
{
'border-2 border-primary focus:border-secondary active:border-tertiary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative': variant === 'filled',
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
},
{
'h-10': size === 'small',


Loading…
Cancel
Save