From 349c8813fbf1aa253e0bb972629a6025ee965cd8 Mon Sep 17 00:00:00 2001 From: yjin Date: Thu, 16 Jan 2025 15:39:40 +0900 Subject: [PATCH] fix: [GSW-2040] Mobile UI --- .../ConnectSocialWalletModal.styles.ts | 7 +++++++ .../ConnectSocialWalletModal.tsx | 15 ++++++++++++++- .../ConnectWalletModal.styles.ts | 15 ++++++++++++++- .../connect-wallet-modal/ConnectWalletModal.tsx | 6 +++--- .../ConnectWalletModalDivider.styles.ts | 2 +- 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.styles.ts b/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.styles.ts index ed3922ace..6d12d0f1b 100644 --- a/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.styles.ts +++ b/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; export const ConnectSocialWalletModalWrapper = styled.div` display: flex; @@ -61,6 +62,8 @@ export const ConnectSocialWalletModalWrapper = styled.div` flex-direction: column; align-items: center; gap: 8px; + + text-align: center; .title { color: ${({ theme }) => theme.color.text01}; font-size: 18px; @@ -89,4 +92,8 @@ export const ConnectSocialWalletModalWrapper = styled.div` } } } + ${media.mobile} { + width: 328px; + padding: 15px 11px; + } `; diff --git a/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.tsx b/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.tsx index 985bb724d..c44dcea97 100644 --- a/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.tsx +++ b/packages/web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.tsx @@ -15,6 +15,19 @@ interface ConnectSocialWalletModalProps { const ConnectSocialWalletModal = ({ close, loginType }: ConnectSocialWalletModalProps) => { const { connectingState } = useSocialWalletContext(); + const displayLoginType = React.useMemo(() => { + switch (loginType) { + case "email": + return "Email"; + case "google": + return "Google"; + case "twitter": + return "X"; + default: + return "Unknown"; + } + }, [loginType]); + React.useEffect(() => { if (connectingState === "done" || connectingState === "error") { close(); @@ -35,7 +48,7 @@ const ConnectSocialWalletModal = ({ close, loginType }: ConnectSocialWalletModal
-
Connecting to {loginType}
+
Connecting to {displayLoginType}
{loginType === "email" ? (
Check your email to approve the connection.
) : ( diff --git a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.styles.ts b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.styles.ts index 3bec556ab..917cd8270 100644 --- a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.styles.ts +++ b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.styles.ts @@ -86,6 +86,11 @@ export const ConnectWalletModalWrapper = styled.div` * { fill: ${({ theme }) => theme.color.text05}; } + &:hover { + * { + fill: ${({ theme }) => (theme.themeKey === "dark" ? theme.color.background07 : theme.color.border07)}; + } + } } ${media.mobile} { @@ -96,6 +101,9 @@ export const ConnectWalletModalWrapper = styled.div` .validation-message { color: ${({ theme }) => theme.color.red01}; font-weight: 500; + ${media.mobile} { + font-size: 14px; + } } > div { @@ -103,7 +111,12 @@ export const ConnectWalletModalWrapper = styled.div` .button-connect { gap: 8px; height: 57px; - &.adena { + &.dark { + &:hover { + background-color: ${({ theme }) => (theme.themeKey === "dark" ? theme.color.hover02 : "")}; + } + } + &.primary { span { color: white; } diff --git a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx index 08c4dec96..eb68caffd 100644 --- a/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx +++ b/packages/web/src/components/common/connect-wallet-modal/ConnectWalletModal.tsx @@ -112,7 +112,7 @@ const ConnectWalletModal: React.FC = ({ close, connect, loadingConnect }) hierarchy: ButtonHierarchy.Dark, fullWidth: true, }} - className="button-connect" + className="button-connect dark" />
@@ -145,7 +145,7 @@ const ConnectWalletModal: React.FC = ({ close, connect, loadingConnect }) hierarchy: ButtonHierarchy.Primary, fullWidth: true, }} - className="button-connect " + className="button-connect primary" /> diff --git a/packages/web/src/components/common/connect-wallet-modal/connect-wallet-modal-divider/ConnectWalletModalDivider.styles.ts b/packages/web/src/components/common/connect-wallet-modal/connect-wallet-modal-divider/ConnectWalletModalDivider.styles.ts index 3e5ddf758..ece56313a 100644 --- a/packages/web/src/components/common/connect-wallet-modal/connect-wallet-modal-divider/ConnectWalletModalDivider.styles.ts +++ b/packages/web/src/components/common/connect-wallet-modal/connect-wallet-modal-divider/ConnectWalletModalDivider.styles.ts @@ -30,7 +30,7 @@ export const DividerWrapper = styled.div` span { ${fonts.body12}color: ${({ theme }) => theme.color.text01}; - font-size: 10px; + font-size: 12px; font-weight: 500; } `;