Centered element on button + removed not allowed cursor when active

This commit is contained in:
DrMint 2022-05-28 19:30:53 +02:00
parent 3f7cad9053
commit ae1d1d735e
1 changed files with 4 additions and 4 deletions

View File

@ -42,7 +42,7 @@ export function Button(props: Immutable<Props>): JSX.Element {
place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem] place-items-center gap-2 rounded-full border-[1px] border-dark px-4 pt-[0.4rem]
pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${ pb-[0.5rem] text-dark transition-all hover:[--opacityBadge:0] ${className} ${
active active
? "cursor-not-allowed !border-black bg-black text-light drop-shadow-black-lg" ? "!border-black bg-black text-light drop-shadow-black-lg"
: `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg : `cursor-pointer hover:bg-dark hover:text-light hover:drop-shadow-shade-lg
active:border-black active:bg-black active:text-light active:drop-shadow-black-lg` active:border-black active:bg-black active:text-light active:drop-shadow-black-lg`
}`} }`}
@ -52,11 +52,11 @@ export function Button(props: Immutable<Props>): JSX.Element {
className="absolute -top-3 -right-2 grid h-8 w-8 place-items-center rounded-full bg-dark className="absolute -top-3 -right-2 grid h-8 w-8 place-items-center rounded-full bg-dark
font-bold text-light opacity-[var(--opacityBadge)] transition-opacity" font-bold text-light opacity-[var(--opacityBadge)] transition-opacity"
> >
{badgeNumber} <p className="-translate-y-[0.05em]">{badgeNumber}</p>
</div> </div>
)} )}
{icon && <Ico icon={icon} />} {icon && <Ico className="translate-y-[0.04em]" icon={icon} />}
{text && <p>{text}</p>} {text && <p className="-translate-y-[0.05em]">{text}</p>}
</div> </div>
); );