Merge pull request #3 from babylonlabs-io/update-dialog

update dialog and example

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;
 

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<typeof Dialog> = {
   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 (
+      <ScrollLocker>
+        <Button
+          onClick={() => {
+            setVisibility(true);
+          }}
+        >
+          Push me softly
+        </Button>
+
+        <Dialog {...props} open={visible} hasBackdrop={false}>
+          <DialogBody className="flex flex-col items-center pb-8 pt-4 text-primary-dark">
+            <img src="/images/status/warning.svg" alt="Warning" width={88} height={88} />
+            <Heading variant="h5" className="mt-4">
+              Unbonding Error
+            </Heading>
+            <Text variant="body1" className="mt-2 text-center">
+              Your request to unbond failed due to: Failed to sign PSBT for the unbonding transaction
+            </Text>
+          </DialogBody>
+
+          <DialogFooter>
+            <Button
+              fluid
+              variant="outlined"
+              onClick={() => {
+                setVisibility(false);
+              }}
+            >
+              Done
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      </ScrollLocker>
+    );
+  },
+};

src/components/Dialog/Dialog.tsx

@@ -8,9 +8,17 @@ import { Backdrop } from "./components/Backdrop";
 export interface DialogProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, 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
         </div>
       </div>
 
-      <Backdrop open={open} onClick={onClose} />
+      {hasBackdrop && <Backdrop open={open} onClick={onClose} />}
     </Portal>
   );
 };