Skip to content

Commit 20bb63e

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #2132 from Web3Auth/feat/modal-19-ui-fix
UI Fix
2 parents 46d6d85 + f13db31 commit 20bb63e

File tree

24 files changed

+88
-50
lines changed

24 files changed

+88
-50
lines changed

‎demo/vue-app-new/package-lock.json‎

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps)
4141
fill="none"
4242
xmlns="http://www.w3.org/2000/svg"
4343
onClick={onClose}
44-
className="w3a--text-app-gray-500 dark:w3a--text-app-gray-200"
44+
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
4545
>
4646
<path
4747
fillRule="evenodd"

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import Image from "../../Image";
55
import { ButtonSocialProps } from "./ButtonSocial.type";
66

77
function getProviderIcon(method: string, isDark: boolean, isPrimaryBtn: boolean) {
8-
const imageId =
9-
method === AUTH_CONNECTION.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
8+
const imageId = method === AUTH_CONNECTION.TWITTER ? `login-X${isDark ? "-dark" : "-light"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
109
const hoverId =
1110
method === AUTH_CONNECTION.APPLE || method === AUTH_CONNECTION.GITHUB || method === AUTH_CONNECTION.TWITTER ? imageId : `login-${method}-active`;
1211
if (isPrimaryBtn) {

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
4343
className={cn(
4444
"w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl",
4545
{
46-
"w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white":
46+
"w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white hover:!w3a--bg-app-gray-100 dark:hover:!w3a--bg-app-gray-800":
4747
selectedChain === chain.id,
4848
}
4949
)}

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
2121
className="w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full"
2222
onClick={handleBack}
2323
>
24-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" className="w3a--text-app-gray-900 dark:w3a--text-app-white">
24+
<svg
25+
xmlns="http://www.w3.org/2000/svg"
26+
fill="none"
27+
viewBox="0 0 20 20"
28+
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
29+
>
2530
<path
2631
fill="currentColor"
2732
fillRule="evenodd"

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useState } from "react";
12
import { useTranslation } from "react-i18next";
23

34
import i18n from "../../../localeImport";
@@ -115,9 +116,20 @@ function ConnectWalletList(props: ConnectWalletListProps) {
115116
buttonRadius,
116117
} = props;
117118

119+
const [showMoreWallets, setShowMoreWallets] = useState(true);
120+
121+
const onShowMoreWalletsClick = () => {
122+
setShowMoreWallets(false);
123+
handleMoreWallets();
124+
};
125+
118126
return (
119127
<>
120-
<ul className={cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px]")}>
128+
<ul
129+
className={cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px]", {
130+
"w3a--h-[328px]": !showMoreWallets,
131+
})}
132+
>
121133
{externalButtons.length === 0 ? (
122134
<NoWalletsFound />
123135
) : (
@@ -131,11 +143,11 @@ function ConnectWalletList(props: ConnectWalletListProps) {
131143
/>
132144
)}
133145
</ul>
134-
{totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && (
146+
{showMoreWallets && totalExternalWalletsCount > 15 && !isLoading && initialWalletCount < totalExternalWalletsCount && (
135147
<MoreWalletsButton
136148
totalExternalWalletsCount={totalExternalWalletsCount}
137149
initialWalletCount={initialWalletCount}
138-
handleMoreWallets={handleMoreWallets}
150+
handleMoreWallets={onShowMoreWalletsClick}
139151
isLoading={isLoading}
140152
isDark={isDark}
141153
buttonRadius={buttonRadius}

‎packages/modal/src/ui/components/Image/Image.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useContext, useMemo } from "react";
22

33
import { ThemedContext } from "../../context/ThemeContext";
4+
import { cn } from "../../utils";
45
import { ImageProps } from "./Image.type";
56

67
/**
@@ -30,7 +31,16 @@ export default function Image(props: ImageProps) {
3031

3132
if (isButton) {
3233
if (imageData) {
33-
return <img id={id} src={imageData} height={height} width={width} alt={hoverImageId} className="w3a--object-contain" />;
34+
return (
35+
<img
36+
id={id}
37+
src={imageData}
38+
height={height}
39+
width={width}
40+
alt={hoverImageId}
41+
className={cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)}
42+
/>
43+
);
3444
}
3545
return (
3646
<img
@@ -39,7 +49,7 @@ export default function Image(props: ImageProps) {
3949
height={height}
4050
width={width}
4151
alt={hoverImageId}
42-
className="w3a--rounded w3a--object-contain"
52+
className={cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)}
4353
/>
4454
);
4555
}
@@ -52,7 +62,7 @@ export default function Image(props: ImageProps) {
5262
height={height}
5363
width={width}
5464
alt={imageId}
55-
className="w3a--object-contain"
65+
className={cn("w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)}
5666
onError={({ currentTarget }) => {
5767
if (fallbackImageId) {
5868
const img = currentTarget;
@@ -71,7 +81,7 @@ export default function Image(props: ImageProps) {
7181
height={height}
7282
width={width}
7383
alt={imageId}
74-
className="w3a--rounded w3a--object-contain"
84+
className={cn("w3a--rounded w3a--object-contain", `w3a--h-${height} w3a--w-${width}`)}
7585
onError={({ currentTarget }) => {
7686
if (fallbackImageId) {
7787
const img = currentTarget;

‎packages/modal/src/ui/components/Login/Login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,7 @@ function Login(props: LoginProps) {
517517
logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0"
518518
)}
519519
>
520-
<img src={headerLogo || getIcons(isDark ? "logo-dark" : "logo-light")} alt="Logo" className="w3a--object-contain" />
520+
<img src={headerLogo || getIcons(isDark ? "logo-dark" : "logo-light")} alt="Logo" className="w3a--size-full w3a--object-contain" />
521521
</figure>
522522
<p
523523
className={cn(

‎packages/modal/src/ui/components/Modal/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function Modal(props: ModalProps) {
8585
fill="none"
8686
xmlns="http://www.w3.org/2000/svg"
8787
onClick={onCloseHandler}
88-
className="w3a--text-app-gray-500 dark:w3a--text-app-gray-200"
88+
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
8989
>
9090
<path
9191
fillRule="evenodd"

0 commit comments

Comments
 (0)