8fb34f2e85
* feat: improve 2fa styles based on feedback * fix: preferences panes and dialogs electron compatibility * fix: no horizontal line when opening two factor activation * feat: improve two factor activation styles * feat: further 2fa style improvements * feat: padding 2fa widgets * feat: add padding between QR code and content * feat: refresh 2fa after passcode confirmation * feat: don't autocomplete passwords for DecoratedInput
50 lines
978 B
TypeScript
50 lines
978 B
TypeScript
import { FunctionComponent } from 'preact';
|
|
import { Icon, IconType } from './Icon';
|
|
|
|
interface Props {
|
|
/**
|
|
* onClick - preventDefault is handled within the component
|
|
*/
|
|
onClick: () => void;
|
|
|
|
className?: string;
|
|
|
|
icon: IconType;
|
|
|
|
iconClassName?: string;
|
|
|
|
/**
|
|
* Button tooltip
|
|
*/
|
|
title: string;
|
|
|
|
focusable: boolean;
|
|
}
|
|
|
|
/**
|
|
* IconButton component with an icon
|
|
* preventDefault is already handled within the component
|
|
*/
|
|
export const IconButton: FunctionComponent<Props> = ({
|
|
onClick,
|
|
className = '',
|
|
icon,
|
|
title,
|
|
focusable,
|
|
}) => {
|
|
const click = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
onClick();
|
|
};
|
|
const focusableClass = focusable ? '' : 'focus:shadow-none';
|
|
return (
|
|
<button
|
|
title={title}
|
|
className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
|
|
onClick={click}
|
|
>
|
|
<Icon type={icon} />
|
|
</button>
|
|
);
|
|
};
|