fix: [GSW-2040] Mobile UI

gnoswap-labs · Jan 16, 2025 · 349c881 · 349c881
1 parent 77a5bb8
commit 349c881
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 6 deletions.
diff --git a/.../web/src/components/common/connect-social-wallet-modal/ConnectSocialWalletModal.styles.ts b/.../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
@@ -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
             <LoadingSpinner />
           </div>
           <div className="description">
-            <div className="title">Connecting to {loginType}</div>
+            <div className="title">Connecting to {displayLoginType}</div>
             {loginType === "email" ? (
               <div className="text">Check your email to approve the connection.</div>
             ) : (

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
@@ -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,14 +101,22 @@ export const ConnectWalletModalWrapper = styled.div`
       .validation-message {
         color: ${({ theme }) => theme.color.red01};
         font-weight: 500;
+        ${media.mobile} {
+          font-size: 14px;
+        }
       }
 
       > div {
         width: 100%;
         .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
@@ -112,7 +112,7 @@ const ConnectWalletModal: React.FC<Props> = ({ close, connect, loadingConnect })
                 hierarchy: ButtonHierarchy.Dark,
                 fullWidth: true,
               }}
-              className="button-connect"
+              className="button-connect dark"
             />
 
             <Button
@@ -123,7 +123,7 @@ const ConnectWalletModal: React.FC<Props> = ({ close, connect, loadingConnect })
                 hierarchy: ButtonHierarchy.Dark,
                 fullWidth: true,
               }}
-              className="button-connect"
+              className="button-connect dark"
             />
           </div>
 
@@ -145,7 +145,7 @@ const ConnectWalletModal: React.FC<Props> = ({ close, connect, loadingConnect })
                 hierarchy: ButtonHierarchy.Primary,
                 fullWidth: true,
               }}
-              className="button-connect "
+              className="button-connect primary"
             />
           </div>
         </div>

diff --git a/...mon/connect-wallet-modal/connect-wallet-modal-divider/ConnectWalletModalDivider.styles.ts b/...mon/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;
   }
 `;