Skip to content

Commit 24afd19

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #2001 from Web3Auth/fix/dapp-class-css-conflicts
Class conflict with Dapp on Web3Auth modal + other issues
2 parents 205c08c + 48b39ee commit 24afd19

19 files changed

+362
-309
lines changed

‎packages/ui/src/components/AdapterLoader.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
3434
}, [modalStatus, onClose]);
3535

3636
return modalStatus !== MODAL_STATUS.INITIALIZED ? (
37-
<div className="w3ajs-modal-loader w3a-modal__loader h-full">
37+
<div className="w3ajs-modal-loader w3a-modal__loader w3a--h-full">
3838
<div className="w3a-modal__loader-content">
3939
<div className="w3a-modal__loader-info">
4040
{modalStatus === MODAL_STATUS.CONNECTING && (
4141
<>
4242
<div className="w3a-modal__loader-bridge">
4343
<div className="w3a-modal__loader-app-logo">
44-
<img src={appLogo} className="block dark:hidden h-10 w-10" alt="" />
45-
<img src={appLogo} className="hidden dark:block h-10 w-10" alt="" />
44+
<img src={appLogo} className="w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10" alt="" />
45+
<img src={appLogo} className="w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10" alt="" />
4646
</div>
4747
<div className="w3a-modal__connector">
4848
<div className="w3a-modal__connector-beat">
@@ -62,9 +62,9 @@ export default function DetailedLoader(props: DetailedLoaderProps) {
6262
</>
6363
)}
6464
{modalStatus === ADAPTER_STATUS.CONNECTED && (
65-
<div className="flex flex-col items-center">
65+
<div className="w3a--flex w3a--flex-col w3a--items-center">
6666
<Icon iconName="connected" />
67-
<div className="w3ajs-modal-loader__message w3a-spinner-message mt-4">{message}</div>
67+
<div className="w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4">{message}</div>
6868
</div>
6969
)}
7070
{modalStatus === ADAPTER_STATUS.ERRORED && (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function Button(props: ButtonProps) {
2525
disabled={disabled}
2626
// eslint-disable-next-line react/button-has-type
2727
type={type}
28-
className={`t-btn t-btn-${variant} rounded-full ${sizeClass} ${className}`}
28+
className={`t-btn t-btn-${variant} w3a--rounded-full ${sizeClass} ${className}`}
2929
onClick={onClick}
3030
title={title}
3131
style={style}

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

Lines changed: 87 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,42 @@
11
#w3a-modal button.t-btn,
22
a.t-btn {
3-
@apply flex
4-
items-center
5-
justify-center
6-
ease-linear
7-
transition-all
8-
duration-150;
3+
@apply w3a--flex w3a--items-center w3a--justify-center w3a--ease-linear w3a--transition-all w3a--duration-150;
94
}
105

116
#w3a-modal button.t-btn:not(.t-btn-text),
127
a.t-btn:not(.t-btn-text) {
13-
@apply disabled:bg-app-gray-300
14-
disabled:border-0
15-
disabled:hover:bg-app-gray-300
16-
disabled:hover:border-app-gray-300
17-
disabled:hover:text-app-gray-400
18-
disabled:active:bg-app-gray-300
19-
disabled:active:ring-offset-0
20-
disabled:active:outline-0
21-
disabled:active:ring-0
22-
disabled:text-app-gray-400
23-
dark:disabled:bg-app-gray-700
24-
dark:disabled:text-app-gray-600;
8+
@apply disabled:w3a--bg-app-gray-300
9+
disabled:w3a--border-0
10+
disabled:hover:w3a--bg-app-gray-300
11+
disabled:hover:w3a--border-app-gray-300
12+
disabled:hover:w3a--text-app-gray-400
13+
disabled:active:w3a--bg-app-gray-300
14+
disabled:active:w3a--ring-offset-0
15+
disabled:active:w3a--outline-0
16+
disabled:active:w3a--ring-0
17+
disabled:w3a--text-app-gray-400
18+
dark:disabled:w3a--bg-app-gray-700
19+
dark:disabled:w3a--text-app-gray-600;
2520
}
2621
#w3a-modal .size-xs {
2722
height: 32px;
28-
@apply px-3 py-2 text-xs;
23+
@apply w3a--px-3 w3a--py-2 w3a--text-xs;
2924
}
3025
#w3a-modal .size-sm {
3126
height: 36px;
32-
@apply px-3 py-2 text-sm;
27+
@apply w3a--px-3 w3a--py-2 w3a--text-sm;
3328
}
3429
#w3a-modal .size-md {
3530
height: 42px;
36-
@apply px-5 py-2.5 text-sm;
31+
@apply w3a--px-5 w3a--py-2.5 w3a--text-sm;
3732
}
3833
#w3a-modal .size-lg {
3934
height: 48px;
40-
@apply px-5 py-3 text-base;
35+
@apply w3a--px-5 w3a--py-3 w3a--text-base;
4136
}
4237
#w3a-modal .size-xl {
4338
height: 52px;
44-
@apply px-4 py-3.5 text-base;
39+
@apply w3a--px-4 w3a--py-3.5 w3a--text-base;
4540
}
4641
/* #w3a-modal .icon {
4742
@apply rounded-full;
@@ -75,90 +70,90 @@ a.t-btn:not(.t-btn-text) {
7570
width: 100%;
7671
} */
7772
#w3a-modal .t-btn.t-btn-primary {
78-
@apply outline-none
79-
bg-app-primary-600
80-
text-app-onPrimary
81-
hover:bg-app-primary-700
82-
active:bg-app-primary-600
83-
active:outline
84-
active:outline-offset-1
85-
active:outline-1
86-
active:outline-app-primary-600
87-
focus-visible:outline
88-
focus-visible:outline-offset-1
89-
focus-visible:outline-1
90-
focus-visible:outline-app-primary-600
73+
@apply w3a--outline-none
74+
w3a--bg-app-primary-600
75+
w3a--text-app-onPrimary
76+
hover:w3a--bg-app-primary-700
77+
active:w3a--bg-app-primary-600
78+
active:w3a--outline
79+
active:w3a--outline-offset-1
80+
active:w3a--outline-1
81+
active:w3a--outline-app-primary-600
82+
focus-visible:w3a--outline
83+
focus-visible:w3a--outline-offset-1
84+
focus-visible:w3a--outline-1
85+
focus-visible:w3a--outline-app-primary-600
9186

92-
dark:bg-app-primary-500
93-
dark:hover:bg-app-primary-400
94-
dark:active:bg-app-primary-500
95-
dark:active:outline-app-primary-500
96-
dark:focus-visible:outline-app-primary-500;
87+
dark:w3a--bg-app-primary-500
88+
dark:hover:w3a--bg-app-primary-400
89+
dark:active:w3a--bg-app-primary-500
90+
dark:active:w3a--outline-app-primary-500
91+
dark:focus-visible:w3a--outline-app-primary-500;
9792
}
9893
#w3a-modal .t-btn.t-btn-secondary {
99-
@apply outline-none
100-
bg-transparent
101-
text-app-gray-600
102-
border
103-
border-app-gray-500
104-
hover:bg-app-gray-200
105-
active:bg-transparent
106-
active:border-app-primary-600
107-
active:ring-1
108-
active:ring-app-primary-600
109-
focus-visible:border-app-primary-600
110-
focus-visible:bg-transparent
111-
focus-visible:ring-1
112-
focus-visible:ring-app-primary-600
94+
@apply w3a--outline-none
95+
w3a--bg-transparent
96+
w3a--text-app-gray-600
97+
w3a--border
98+
w3a--border-app-gray-500
99+
hover:w3a--bg-app-gray-200
100+
active:w3a--bg-transparent
101+
active:w3a--border-app-primary-600
102+
active:w3a--ring-1
103+
active:w3a--ring-app-primary-600
104+
focus-visible:w3a--border-app-primary-600
105+
focus-visible:w3a--bg-transparent
106+
focus-visible:w3a--ring-1
107+
focus-visible:w3a--ring-app-primary-600
113108

114-
dark:text-app-white
115-
dark:border-app-gray-300
116-
dark:hover:bg-app-gray-700
117-
dark:active:bg-transparent
118-
dark:active:border-app-primary-500
119-
dark:active:ring-app-primary-500
120-
dark:focus-visible:border-app-primary-500
121-
dark:focus-visible:bg-transparent
122-
dark:focus-visible:ring-app-primary-500;
109+
dark:w3a--text-app-white
110+
dark:w3a--border-app-gray-300
111+
dark:hover:w3a--bg-app-gray-700
112+
dark:active:w3a--bg-transparent
113+
dark:active:w3a--border-app-primary-500
114+
dark:active:w3a--ring-app-primary-500
115+
dark:focus-visible:w3a--border-app-primary-500
116+
dark:focus-visible:w3a--bg-transparent
117+
dark:focus-visible:w3a--ring-app-primary-500;
123118
}
124119
#w3a-modal .t-btn.t-btn-tertiary {
125-
@apply bg-app-gray-200
126-
text-app-gray-800
127-
hover:bg-app-gray-300
128-
active:bg-app-gray-200
129-
active:ring-2
130-
active:ring-app-primary-600
131-
focus-visible:ring-2
132-
focus-visible:ring-app-primary-600
120+
@apply w3a--bg-app-gray-200
121+
w3a--text-app-gray-800
122+
hover:w3a--bg-app-gray-300
123+
active:w3a--bg-app-gray-200
124+
active:w3a--ring-2
125+
active:w3a--ring-app-primary-600
126+
focus-visible:w3a--ring-2
127+
focus-visible:w3a--ring-app-primary-600
133128

134-
dark:bg-app-gray-500
135-
dark:text-app-white
136-
dark:hover:bg-app-gray-400
137-
dark:active:bg-app-gray-500
138-
dark:active:ring-app-primary-500
139-
dark:focus-visible:ring-app-primary-500;
129+
dark:w3a--bg-app-gray-500
130+
dark:w3a--text-app-white
131+
dark:hover:w3a--bg-app-gray-400
132+
dark:active:w3a--bg-app-gray-500
133+
dark:active:w3a--ring-app-primary-500
134+
dark:focus-visible:w3a--ring-app-primary-500;
140135
}
141136
#w3a-modal .t-btn.t-btn-text {
142-
@apply text-app-primary-600
143-
hover:text-app-primary-800
144-
hover:underline
145-
active:text-app-primary-600
146-
active:ring-2
147-
active:ring-app-primary-600
148-
focus-visible:ring-2
149-
focus-visible:ring-app-primary-600
150-
disabled:text-app-gray-400
151-
disabled:no-underline
137+
@apply w3a--text-app-primary-600
138+
hover:w3a--text-app-primary-800
139+
hover:w3a--underline
140+
active:w3a--text-app-primary-600
141+
active:w3a--ring-2
142+
active:w3a--ring-app-primary-600
143+
focus-visible:w3a--ring-2
144+
focus-visible:w3a--ring-app-primary-600
145+
disabled:w3a--text-app-gray-400
146+
disabled:w3a--no-underline
152147

153-
dark:text-app-primary-500
154-
dark:hover:text-app-primary-400
155-
dark:disabled:text-app-gray-600;
148+
dark:w3a--text-app-primary-500
149+
dark:hover:w3a--text-app-primary-400
150+
dark:disabled:w3a--text-app-gray-600;
156151
}
157152
/* #w3a-modal .t-btn .t-icon {
158153
color: inherit;
159154
} */
160155
#w3a-modal .btn-link {
161-
@apply no-underline;
156+
@apply w3a--no-underline;
162157
}
163158
#w3a-modal button.t-btn:hover > .hover-icon {
164159
display: block;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
1919
variant="tertiary"
2020
type="button"
2121
onClick={() => handleWalletClick(button)}
22-
className="w-full rounded-xl size-xl flex !justify-between items-center wallet-btn"
22+
className="w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn"
2323
title={button.name}
2424
>
25-
<div className="flex items-center">
25+
<div className="w3a--flex w3a--items-center">
2626
<Image
2727
imageId={`login-${button.name}`}
2828
hoverImageId={`login-${button.name}`}
@@ -32,10 +32,10 @@ export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
3232
isButton
3333
extension={button.imgExtension}
3434
/>
35-
<p className="ml-2 text-left text-sm">{button.displayName}</p>
35+
<p className="w3a--ml-2 w3a--text-left w3a--text-sm">{button.displayName}</p>
3636
</div>
3737
{button.hasInjectedWallet && (
38-
<span className="inline-flex items-center rounded-lg px-2 py-1 text-xs font-medium bg-app-primary-100 text-app-primary-800">
38+
<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">
3939
{t("modal.external.installed")}
4040
</span>
4141
)}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ export default function ExternalWalletConnect(props: ExternalWalletConnectProps)
5151

5252
{/* Install links */}
5353
{connectButton.hasInstallLinks && (
54-
<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">
55-
<span className="text-sm truncate flex-grow-0">
54+
<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">
55+
<span className="w3a--text-sm w3a--truncate w3a--flex-grow-0">
5656
{t("modal.external.dont-have")} <span>{connectButton.displayName}</span>?
5757
</span>
58-
<Button type="button" variant="secondary" size="xs" className="flex-grow-1 flex-shrink-0" onClick={showWalletDownload}>
58+
<Button type="button" variant="secondary" size="xs" className="w3a--flex-grow-1 w3a--flex-shrink-0" onClick={showWalletDownload}>
5959
{t("modal.external.get-wallet")}
6060
</Button>
6161
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ export default function ExternalWalletHeader(props: ExternalWalletHeaderProps) {
1111
const { title, goBack, closeModal, disableBackButton } = props;
1212

1313
return (
14-
<div className="flex flex-row justify-center items-center gap-1">
15-
<div className="flex flex-grow-1 flex-shrink-0 items-center justify-start mr-auto">
14+
<div className="w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1">
15+
<div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto">
1616
{!disableBackButton && (
1717
<button type="button" className="w3a-external-back w3ajs-external-back" onClick={goBack}>
1818
<Icon iconName="arrow-left-light" darkIconName="arrow-left-dark" width="16" height="16" />
1919
</button>
2020
)}
2121
</div>
22-
<div className="w3a-header__title flex-grow-0 flex-shrink truncate mr-6">{title}</div>
23-
<div className="flex flex-grow-1 flex-shrink-0 items-center justify-end ml-auto">
22+
<div className="w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6">{title}</div>
23+
<div className="w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto">
2424
<button type="button" onClick={closeModal} className="w3a-header__button_wallet w3ajs-close-btn">
2525
<Icon iconName="x-light" darkIconName="x-dark" />
2626
</button>

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,13 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
8585
const logoLight = `${os}-light`;
8686
const logoDark = `${os}-dark`;
8787
acc.push(
88-
<li key={os} className="w-full">
88+
<li key={os} className="w3a--w-full">
8989
<a href={appUrl} rel="noopener noreferrer" target="_blank">
90-
<Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
90+
<Button
91+
type="button"
92+
variant="tertiary"
93+
className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn"
94+
>
9195
<Image
9296
imageId={logoLight}
9397
darkImageId={logoDark}
@@ -97,7 +101,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
97101
width="28"
98102
isButton
99103
/>
100-
<span className="text-sm font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
104+
<span className="w3a--text-sm w3a--font-medium">{t("modal.external.install-mobile-app", { os: getOsName(os) })}</span>
101105
</Button>
102106
</a>
103107
</li>
@@ -118,7 +122,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
118122
const installLink = browserExtensionUrl ? (
119123
<li key={deviceDetails.browser}>
120124
<a href={browserExtensionUrl} rel="noopener noreferrer" target="_blank">
121-
<Button type="button" variant="tertiary" className="w-full !justify-start flex items-center gap-2 wallet-link-btn">
125+
<Button type="button" variant="tertiary" className="w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn">
122126
<Image
123127
imageId={deviceDetails.browser}
124128
darkImageId={deviceDetails.browser}
@@ -128,7 +132,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
128132
width="30"
129133
isButton
130134
/>
131-
<span className="text-sm font-medium">
135+
<span className="w3a--text-sm w3a--font-medium">
132136
{t("modal.external.install-browser-extension", { browser: getBrowserName(deviceDetails.browser) })}
133137
</span>
134138
</Button>
@@ -144,7 +148,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
144148
<ExternalWalletHeader title={`${t("modal.external.get")} ${connectButton.displayName}`} goBack={goBack} closeModal={closeModal} />
145149

146150
{/* Wallet image */}
147-
<div className="flex justify-center my-6">
151+
<div className="w3a--flex w3a--justify-center w3a--my-6">
148152
<Image
149153
imageId={`login-${connectButton.name}`}
150154
hoverImageId={`login-${connectButton.name}`}
@@ -157,7 +161,7 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
157161
</div>
158162

159163
{/* Download links */}
160-
<ul className="flex flex-col gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
164+
<ul className="w3a--flex w3a--flex-col w3a--gap-3">{deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}</ul>
161165
</div>
162166
);
163167
}

0 commit comments

Comments
 (0)