diff --git a/public/images/status/warning.svg b/public/images/status/warning.svg new file mode 100644 index 0000000..6e58fe3 --- /dev/null +++ b/public/images/status/warning.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 4ab82b9..0e72bd4 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -7,8 +7,9 @@ const STYLES = { secondary: "bg-secondary-main text-secondary-contrast hover:bg-secondary-dark disabled:bg-primary/12", }, outlined: { - primary: "bg-primary-light text-secondary-contrast hover:bg-primary", - secondary: "bg-secondary-main text-secondary-contrast hover:bg-secondary-dark", + primary: "border border-primary-light text-primary-main hover:border-primary hover:bg-primary/10", + secondary: + "border border-secondary-main text-secondary-main hover:border-secondary-light hover:bg-secondary-light/10", }, } as const; diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx index 6a34de0..93a36b2 100644 --- a/src/components/Dialog/Dialog.stories.tsx +++ b/src/components/Dialog/Dialog.stories.tsx @@ -7,6 +7,7 @@ import { ScrollLocker } from "@/context/Dialog.context"; import { Button } from "@/components/Button"; import { Checkbox } from "@/components/Input"; import { Text } from "@/components/Text"; +import { Heading } from "@/index"; const meta: Meta = { component: Dialog, @@ -77,3 +78,48 @@ export const Default: Story = { ); }, }; + +export const NoBackdrop: Story = { + args: { + hasBackdrop: false, + }, + render: (props) => { + const [visible, setVisibility] = useState(false); + + return ( + + + + + + Warning + + Unbonding Error + + + Your request to unbond failed due to: Failed to sign PSBT for the unbonding transaction + + + + + + + + + ); + }, +}; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 2a655a4..227a646 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -8,9 +8,17 @@ import { Backdrop } from "./components/Backdrop"; export interface DialogProps extends DetailedHTMLProps, HTMLDivElement> { open?: boolean; onClose?: () => void; + hasBackdrop?: boolean; } -export const Dialog = ({ children, open = false, className, onClose, ...restProps }: DialogProps) => { +export const Dialog = ({ + children, + open = false, + className, + onClose, + hasBackdrop = true, + ...restProps +}: DialogProps) => { const { mounted, unmount } = useModalManager({ open }); return ( @@ -28,7 +36,7 @@ export const Dialog = ({ children, open = false, className, onClose, ...restProp - + {hasBackdrop && } ); };