Merge pull request #2001 from Web3Auth/fix/dapp-class-css-conflicts

Class conflict with Dapp on Web3Auth modal + other issues

packages/ui/src/components/AdapterLoader.tsx

@@ -34,15 +34,15 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
   }, [modalStatus, onClose]);
 
   return modalStatus !== MODAL_STATUS.INITIALIZED ? (
-    <div className="w3ajs-modal-loader w3a-modal__loader h-full">
+    <div className="w3ajs-modal-loader w3a-modal__loader w3a--h-full">
       <div className="w3a-modal__loader-content">
         <div className="w3a-modal__loader-info">
           {modalStatus === MODAL_STATUS.CONNECTING && (
             <>
               <div className="w3a-modal__loader-bridge">
                 <div className="w3a-modal__loader-app-logo">
-                  <img src={appLogo} className="block dark:hidden h-10 w-10" alt="" />
-                  <img src={appLogo} className="hidden dark:block h-10 w-10" alt="" />
+                  <img src={appLogo} className="w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10" alt="" />
+                  <img src={appLogo} className="w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10" alt="" />
                 </div>
                 <div className="w3a-modal__connector">
                   <div className="w3a-modal__connector-beat">
@@ -62,9 +62,9 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
             </>
           )}
           {modalStatus === ADAPTER_STATUS.CONNECTED && (
-            <div className="flex flex-col items-center">
+            <div className="w3a--flex w3a--flex-col w3a--items-center">
               <Icon iconName="connected" />
-              <div className="w3ajs-modal-loader__message w3a-spinner-message mt-4">{message}</div>
+              <div className="w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4">{message}</div>
             </div>
           )}
           {modalStatus === ADAPTER_STATUS.ERRORED && (

packages/ui/src/components/Button/Button.tsx

@@ -25,7 +25,7 @@ function Button(props: ButtonProps) {
       disabled={disabled}
       // eslint-disable-next-line react/button-has-type
       type={type}
-      className={`t-btn t-btn-${variant} rounded-full ${sizeClass} ${className}`}
+      className={`t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`}
       onClick={onClick}
       title={title}
       style={style}

packages/ui/src/components/Button/styles.css

@@ -1,47 +1,42 @@
 #w3a-modal button.t-btn,
 a.t-btn {
-  @apply flex
-    items-center
-    justify-center
-    ease-linear
-    transition-all
-    duration-150;
+  @apply w3a--flex w3a--items-center w3a--justify-center w3a--ease-linear w3a--transition-all w3a--duration-150;
 }
 
 #w3a-modal button.t-btn:not(.t-btn-text),
 a.t-btn:not(.t-btn-text) {
-  @apply disabled:bg-app-gray-300
-    disabled:border-0
-    disabled:hover:bg-app-gray-300
-    disabled:hover:border-app-gray-300
-    disabled:hover:text-app-gray-400
-    disabled:active:bg-app-gray-300
-    disabled:active:ring-offset-0
-    disabled:active:outline-0
-    disabled:active:ring-0
-    disabled:text-app-gray-400
-    dark:disabled:bg-app-gray-700
-    dark:disabled:text-app-gray-600;
+  @apply disabled:w3a--bg-app-gray-300
+    disabled:w3a--border-0
+    disabled:hover:w3a--bg-app-gray-300
+    disabled:hover:w3a--border-app-gray-300
+    disabled:hover:w3a--text-app-gray-400
+    disabled:active:w3a--bg-app-gray-300
+    disabled:active:w3a--ring-offset-0
+    disabled:active:w3a--outline-0
+    disabled:active:w3a--ring-0
+    disabled:w3a--text-app-gray-400
+    dark:disabled:w3a--bg-app-gray-700
+    dark:disabled:w3a--text-app-gray-600;
 }
 #w3a-modal .size-xs {
   height: 32px;
-  @apply px-3 py-2 text-xs;
+  @apply w3a--px-3 w3a--py-2 w3a--text-xs;
 }
 #w3a-modal .size-sm {
   height: 36px;
-  @apply px-3 py-2 text-sm;
+  @apply w3a--px-3 w3a--py-2 w3a--text-sm;
 }
 #w3a-modal .size-md {
   height: 42px;
-  @apply px-5 py-2.5 text-sm;
+  @apply w3a--px-5 w3a--py-2.5 w3a--text-sm;
 }
 #w3a-modal .size-lg {
   height: 48px;
-  @apply px-5 py-3 text-base;
+  @apply w3a--px-5 w3a--py-3 w3a--text-base;
 }
 #w3a-modal .size-xl {
   height: 52px;
-  @apply px-4 py-3.5 text-base;
+  @apply w3a--px-4 w3a--py-3.5 w3a--text-base;
 }
 /* #w3a-modal .icon {
   @apply rounded-full;
@@ -75,90 +70,90 @@ a.t-btn:not(.t-btn-text) {
   width: 100%;
 } */
 #w3a-modal .t-btn.t-btn-primary {
-  @apply outline-none
-    bg-app-primary-600
-    text-app-onPrimary
-    hover:bg-app-primary-700
-    active:bg-app-primary-600
-    active:outline
-    active:outline-offset-1
-    active:outline-1
-    active:outline-app-primary-600
-    focus-visible:outline
-    focus-visible:outline-offset-1
-    focus-visible:outline-1
-    focus-visible:outline-app-primary-600
+  @apply w3a--outline-none
+    w3a--bg-app-primary-600
+    w3a--text-app-onPrimary
+    hover:w3a--bg-app-primary-700
+    active:w3a--bg-app-primary-600
+    active:w3a--outline
+    active:w3a--outline-offset-1
+    active:w3a--outline-1
+    active:w3a--outline-app-primary-600
+    focus-visible:w3a--outline
+    focus-visible:w3a--outline-offset-1
+    focus-visible:w3a--outline-1
+    focus-visible:w3a--outline-app-primary-600
 
-    dark:bg-app-primary-500
-    dark:hover:bg-app-primary-400
-    dark:active:bg-app-primary-500
-    dark:active:outline-app-primary-500
-    dark:focus-visible:outline-app-primary-500;
+    dark:w3a--bg-app-primary-500
+    dark:hover:w3a--bg-app-primary-400
+    dark:active:w3a--bg-app-primary-500
+    dark:active:w3a--outline-app-primary-500
+    dark:focus-visible:w3a--outline-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-secondary {
-  @apply outline-none
-    bg-transparent
-    text-app-gray-600
-    border
-    border-app-gray-500
-    hover:bg-app-gray-200
-    active:bg-transparent
-    active:border-app-primary-600
-    active:ring-1
-    active:ring-app-primary-600
-    focus-visible:border-app-primary-600
-    focus-visible:bg-transparent
-    focus-visible:ring-1
-    focus-visible:ring-app-primary-600
+  @apply w3a--outline-none
+    w3a--bg-transparent
+    w3a--text-app-gray-600
+    w3a--border
+    w3a--border-app-gray-500
+    hover:w3a--bg-app-gray-200
+    active:w3a--bg-transparent
+    active:w3a--border-app-primary-600
+    active:w3a--ring-1
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--border-app-primary-600
+    focus-visible:w3a--bg-transparent
+    focus-visible:w3a--ring-1
+    focus-visible:w3a--ring-app-primary-600
 
-    dark:text-app-white
-    dark:border-app-gray-300
-    dark:hover:bg-app-gray-700
-    dark:active:bg-transparent
-    dark:active:border-app-primary-500
-    dark:active:ring-app-primary-500
-    dark:focus-visible:border-app-primary-500
-    dark:focus-visible:bg-transparent
-    dark:focus-visible:ring-app-primary-500;
+    dark:w3a--text-app-white
+    dark:w3a--border-app-gray-300
+    dark:hover:w3a--bg-app-gray-700
+    dark:active:w3a--bg-transparent
+    dark:active:w3a--border-app-primary-500
+    dark:active:w3a--ring-app-primary-500
+    dark:focus-visible:w3a--border-app-primary-500
+    dark:focus-visible:w3a--bg-transparent
+    dark:focus-visible:w3a--ring-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-tertiary {
-  @apply bg-app-gray-200
-    text-app-gray-800
-    hover:bg-app-gray-300
-    active:bg-app-gray-200
-    active:ring-2
-    active:ring-app-primary-600
-    focus-visible:ring-2
-    focus-visible:ring-app-primary-600
+  @apply w3a--bg-app-gray-200
+    w3a--text-app-gray-800
+    hover:w3a--bg-app-gray-300
+    active:w3a--bg-app-gray-200
+    active:w3a--ring-2
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--ring-2
+    focus-visible:w3a--ring-app-primary-600
 
-    dark:bg-app-gray-500
-    dark:text-app-white
-    dark:hover:bg-app-gray-400
-    dark:active:bg-app-gray-500
-    dark:active:ring-app-primary-500
-    dark:focus-visible:ring-app-primary-500;
+    dark:w3a--bg-app-gray-500
+    dark:w3a--text-app-white
+    dark:hover:w3a--bg-app-gray-400
+    dark:active:w3a--bg-app-gray-500
+    dark:active:w3a--ring-app-primary-500
+    dark:focus-visible:w3a--ring-app-primary-500;
 }
 #w3a-modal .t-btn.t-btn-text {
-  @apply text-app-primary-600
-    hover:text-app-primary-800
-    hover:underline
-    active:text-app-primary-600
-    active:ring-2
-    active:ring-app-primary-600
-    focus-visible:ring-2
-    focus-visible:ring-app-primary-600
-    disabled:text-app-gray-400
-    disabled:no-underline
+  @apply w3a--text-app-primary-600
+    hover:w3a--text-app-primary-800
+    hover:w3a--underline
+    active:w3a--text-app-primary-600
+    active:w3a--ring-2
+    active:w3a--ring-app-primary-600
+    focus-visible:w3a--ring-2
+    focus-visible:w3a--ring-app-primary-600
+    disabled:w3a--text-app-gray-400
+    disabled:w3a--no-underline
 
-    dark:text-app-primary-500
-    dark:hover:text-app-primary-400
-    dark:disabled:text-app-gray-600;
+    dark:w3a--text-app-primary-500
+    dark:hover:w3a--text-app-primary-400
+    dark:disabled:w3a--text-app-gray-600;
 }
 /* #w3a-modal .t-btn .t-icon {
   color: inherit;
 } */
 #w3a-modal .btn-link {
-  @apply no-underline;
+  @apply w3a--no-underline;
 }
 #w3a-modal button.t-btn:hover > .hover-icon {
   display: block;

packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx

@@ -19,10 +19,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
       variant="tertiary"
       type="button"
       onClick={() => handleWalletClick(button)}
-      className="w-full rounded-xl size-xl flex !justify-between items-center wallet-btn"
+      className="w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn"
       title={button.name}
     >
-      <div className="flex items-center">
+      <div className="w3a--flex w3a--items-center">
         <Image
           imageId={`login-${button.name}`}
           hoverImageId={`login-${button.name}`}
@@ -32,10 +32,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
           isButton
           extension={button.imgExtension}
         />
-        <p className="ml-2 text-left text-sm">{button.displayName}</p>
+        <p className="w3a--ml-2 w3a--text-left w3a--text-sm">{button.displayName}</p>
       </div>
       {button.hasInjectedWallet && (
-        <span className="inline-flex items-center rounded-lg px-2 py-1 text-xs font-medium bg-app-primary-100 text-app-primary-800">
+        <span className="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800">
           {t("modal.external.installed")}
         </span>
       )}

packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx

@@ -51,11 +51,11 @@ export default function ExternalWalletConnect(props: ExternalWalletConnectProps)
 
           {/* Install links */}
           {connectButton.hasInstallLinks && (
-            <div className="flex flex-row items-center justify-between gap-2 bg-app-gray-50 dark:bg-app-gray-700 text-app-gray-900 dark:text-app-white px-3 py-2 rounded-xl">
-              <span className="text-sm truncate flex-grow-0">
+            <div className="w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl">
+              <span className="w3a--text-sm w3a--truncate w3a--flex-grow-0">
                 {t("modal.external.dont-have")} <span>{connectButton.displayName}</span>?
               </span>
-              <Button type="button" variant="secondary" size="xs" className="flex-grow-1 flex-shrink-0" onClick={showWalletDownload}>
+              <Button type="button" variant="secondary" size="xs" className="w3a--flex-grow-1 w3a--flex-shrink-0" onClick={showWalletDownload}>
                 {t("modal.external.get-wallet")}
               </Button>
             </div>

packages/ui/src/components/ExternalWallet/ExternalWalletHeader.tsx

@@ -11,16 +11,16 @@ export default function ExternalWalletHeader(props: ExternalWalletHeaderProps) {
   const { title, goBack, closeModal, disableBackButton } = props;
 
   return (
-    <div className="flex flex-row justify-center items-center gap-1">
-      <div className="flex flex-grow-1 flex-shrink-0 items-center justify-start mr-auto">
+    <div className="w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1">
+      <div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto">
         {!disableBackButton && (
           <button type="button" className="w3a-external-back w3ajs-external-back" onClick={goBack}>
             <Icon iconName="arrow-left-light" darkIconName="arrow-left-dark" width="16" height="16" />
           </button>
         )}
       </div>
-      <div className="w3a-header__title flex-grow-0 flex-shrink truncate mr-6">{title}</div>
-      <div className="flex flex-grow-1 flex-shrink-0 items-center justify-end ml-auto">
+      <div className="w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6">{title}</div>
+      <div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto">
         <button type="button" onClick={closeModal} className="w3a-header__button_wallet w3ajs-close-btn">
           <Icon iconName="x-light" darkIconName="x-dark" />
         </button>

packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx

@@ -85,9 +85,13 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       const logoLight = `${os}-light`;
       const logoDark = `${os}-dark`;
       acc.push(
-        <li key={os} className="w-full">
+        <li key={os} className="w3a--w-full">
           <a href={appUrl} rel="noopener noreferrer" target="_blank">
-            <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+            <Button
+              type="button"
+              variant="tertiary"
+              className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn"
+            >
               <Image
                 imageId={logoLight}
                 darkImageId={logoDark}
@@ -97,7 +101,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
                 width="28"
                 isButton
               />
-              <span className="text-sm font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
+              <span className="w3a--text-sm w3a--font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
             </Button>
           </a>
         </li>
@@ -118,7 +122,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
     const installLink = browserExtensionUrl ? (
       <li key={deviceDetails.browser}>
         <a href={browserExtensionUrl} rel="noopener noreferrer" target="_blank">
-          <Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
+          <Button type="button" variant="tertiary" className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn">
             <Image
               imageId={deviceDetails.browser}
               darkImageId={deviceDetails.browser}
@@ -128,7 +132,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
               width="30"
               isButton
             />
-            <span className="text-sm font-medium">
+            <span className="w3a--text-sm w3a--font-medium">
               {t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails.browser) })}
             </span>
           </Button>
@@ -144,7 +148,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       <ExternalWalletHeader title={`${t("modal.external.get")} ${connectButton.displayName}`} goBack={goBack} closeModal={closeModal} />
 
       {/* Wallet image */}
-      <div className="flex justify-center my-6">
+      <div className="w3a--flex w3a--justify-center w3a--my-6">
         <Image
           imageId={`login-${connectButton.name}`}
           hoverImageId={`login-${connectButton.name}`}
@@ -157,7 +161,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
       </div>
 
       {/* Download links */}
-      <ul className="flex flex-col gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
+      <ul className="w3a--flex w3a--flex-col w3a--gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
     </div>
   );
 }