diff --git a/app/components/button.module.scss b/app/components/button.module.scss index 3a3393e7b..5aa53dcf9 100644 --- a/app/components/button.module.scss +++ b/app/components/button.module.scss @@ -18,6 +18,15 @@ cursor: not-allowed; opacity: 0.5; } + + &.primary { + background-color: var(--primary); + color: white; + + path { + fill: white !important; + } + } } .shadow { diff --git a/app/components/button.tsx b/app/components/button.tsx index 3a2cb8ac5..f93741b39 100644 --- a/app/components/button.tsx +++ b/app/components/button.tsx @@ -5,10 +5,10 @@ import styles from "./button.module.scss"; export function IconButton(props: { onClick?: () => void; icon?: JSX.Element; + type?: "primary" | "danger"; text?: string; bordered?: boolean; shadow?: boolean; - noDark?: boolean; className?: string; title?: string; disabled?: boolean; @@ -19,7 +19,7 @@ export function IconButton(props: { styles["icon-button"] + ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${ props.className ?? "" - } clickable` + } clickable ${styles[props.type ?? ""]}` } onClick={props.onClick} title={props.title} @@ -29,7 +29,8 @@ export function IconButton(props: { {props.icon && (