fix minor styles problems

Author: juliancwirko

CHANGELOG.md

@@ -1,3 +1,8 @@
+### [9.0.2](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.0.2) (2023-09-28)
+- update useElven (native token configuration improvements)
+- fix styles for xPortal deeplink on login modal + other minor style fixes
+- update dependencies
+
 ### [9.0.1](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.0.1) (2023-09-23)
 - update useElven (update with a bugfix)
 - update dependencies

components/elven-ui/login-modal-button.tsx

@@ -58,7 +58,7 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
           {isLoggingIn ? 'Connecting...' : 'Connect'}
         </Button>
       )}
-      <DialogContent className="max-w-xs sm:max-w-lg bg-zinc-200 dark:bg-zinc-950 p-0">
+      <DialogContent className="max-w-xs sm:max-w-lg bg-white dark:bg-zinc-950 p-0">
         <DialogHeader className="px-6 pt-6">
           <DialogTitle>Connect your wallet</DialogTitle>
         </DialogHeader>

components/elven-ui/walletconnect-qr-code.tsx

@@ -34,14 +34,8 @@ export const WalletConnectQRCode: FunctionComponent<
 
   return (
     <div>
-      <div
-        className="[&>svg]:rounded-xl [&>svg]:max-w-xs [&>svg]:mx-auto"
-        dangerouslySetInnerHTML={{
-          __html: qrCodeSvg,
-        }}
-      />
       {mobile ? (
-        <div className="justify-center">
+        <div className="flex justify-center w-full mb-6">
           <Button asChild>
             <a
               href={`${walletConnectDeepLink}?wallet-connect=${encodeURIComponent(
@@ -50,11 +44,17 @@ export const WalletConnectQRCode: FunctionComponent<
               rel="noopener noreferrer nofollow"
               target="_blank"
             >
-              xPortal Login
+              Go to xPortal to sign in!
             </a>
           </Button>
         </div>
       ) : null}
+      <div
+        className="[&>svg]:rounded-xl [&>svg]:max-w-xs [&>svg]:mx-auto [&>svg]:border [&>svg]:border-solid [&>svg]:border-zinc-300 dark:[&>svg]:border-0"
+        dangerouslySetInnerHTML={{
+          __html: qrCodeSvg,
+        }}
+      />
     </div>
   );
 };

components/ui/dialog.tsx

@@ -10,11 +10,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
@@ -25,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-zinc-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}