Fix button styles

near · Oct 18, 2024 · 6801ea4 · 6801ea4
1 parent 76ef343
commit 6801ea4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -122,4 +122,5 @@
   top: 10px;
   right: 10px;
   cursor: pointer;
+  opacity: 0.7;
 }
diff --git 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 {