From 6801ea4c0ca550e96d31a211637036e4a44f9a9f Mon Sep 17 00:00:00 2001
From: Pessina <fs.pessina@gmail.com>
Date: Fri, 18 Oct 2024 21:15:24 +0700
Subject: [PATCH] Fix button styles

---
 src/ui/IframeDialog.tsx  | 14 +++++++++++---
 src/ui/styles.css        |  1 +
 src/ui/styles.output.css |  5 +++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/ui/IframeDialog.tsx b/src/ui/IframeDialog.tsx
index 2652e70..5b36de4 100644
--- a/src/ui/IframeDialog.tsx
+++ b/src/ui/IframeDialog.tsx
@@ -32,6 +32,7 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
     const [isDialogOpen, setIsDialogOpen] = useState(isOpen);
     const [dialogHeight, setDialogHeight] = useState('0px');
     const [isHidden, setIsHideModal] = useState(false);
+    const [isIframeLoaded, setIsIframeLoaded] = useState(false);
 
     const handleOnMessage = (event: MessageEvent<MessageEventData>) => {
       if (event.data.dialogHeight) {
@@ -78,26 +79,33 @@ export const IframeDialog = forwardRef<HTMLIFrameElement, IframeModalProps>(
         className="nfw-iframe"
         allowFullScreen
         allow="publickey-credentials-get *; clipboard-write"
+        onLoad={() => setIsIframeLoaded(true)}
       />
     )
 
     if (!isModal) {
       return isDialogOpen ? (
         <div id="nfw-connect-iframe-container" className="nfw-iframe-container">
-          <X onClick={handleDialogClose} className="nfw-close-button" />
+          {isIframeLoaded && <X onClick={handleDialogClose} className="nfw-close-button" />}
           {iframeElement}
         </div>
       ) : null;
     } else {
       return isDesktop ?
         <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
-          <DialogContent className={`${isHidden ? 'hidden' : ''} w-[375px]`} style={{ height: dialogHeight }}  >
+          <DialogContent className={`${isHidden ? 'hidden' : ''} w-[375px]`}
+            style={{
+              height: dialogHeight,
+            }}>
             {iframeElement}
           </DialogContent>
         </Dialog>
         :
         <Drawer open={isDialogOpen} onOpenChange={handleDialogClose}   >
-          <DrawerContent className={`${isHidden ? 'hidden' : ''}`} style={{ height: dialogHeight }}>
+          <DrawerContent className={`${isHidden ? 'hidden' : ''}`}
+            style={{
+              height: dialogHeight,
+            }}>
             {iframeElement}
           </DrawerContent>
         </Drawer>
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 35e2b9b..7ff6dc6 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -122,4 +122,5 @@
   top: 10px;
   right: 10px;
   cursor: pointer;
+  opacity: 0.7;
 }
\ No newline at end of file
diff --git a/src/ui/styles.output.css b/src/ui/styles.output.css
index c018035..1ad64b1 100644
--- a/src/ui/styles.output.css
+++ b/src/ui/styles.output.css
@@ -649,6 +649,10 @@ body {
   margin-top: 6rem;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -793,6 +797,7 @@ body {
   top: 10px;
   right: 10px;
   cursor: pointer;
+  opacity: 0.7;
 }
 
 .hover\:opacity-100:hover {