chore: adjust wallet-button styling + add logo-href (#1411)

jumperexchange · Nov 14, 2024 · 47ab769 · 47ab769
1 parent 483d03b
commit 47ab769
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 59 deletions.
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 import {
   JUMPER_LEARN_PATH,
@@ -19,7 +19,6 @@ import {
 } from '.';
 
 export const Navbar = ({ disableNavbar = false }) => {
-  const router = useRouter();
   const pathname = usePathname();
   const isLearnPage = pathname?.includes(JUMPER_LEARN_PATH);
   const isScanPage =
@@ -33,22 +32,20 @@ export const Navbar = ({ disableNavbar = false }) => {
   const handleClick = () => {
     closeAllMenus();
     setWelcomeScreenClosed(false);
-
-    if (pathname === '/gas' || pathname === '/buy') {
-      return;
-    }
-    if (isLearnPage) {
-      router.push(JUMPER_LEARN_PATH);
-    } else if (isScanPage) {
-      router.push(JUMPER_SCAN_PATH);
-    } else {
-      router.push('/');
-    }
   };
 
+  let logoHref;
+  if (isLearnPage) {
+    logoHref = JUMPER_LEARN_PATH;
+  } else if (isScanPage) {
+    logoHref = JUMPER_SCAN_PATH;
+  } else {
+    logoHref = '/';
+  }
+
   return (
     <Container>
-      <LogoLink id="jumper-logo" onClick={handleClick}>
+      <LogoLink href={logoHref} id="jumper-logo" onClick={handleClick}>
         <Logo
           variant={isScanPage ? 'scan' : isLearnPage ? 'learn' : 'default'}
         />

diff --git a/src/components/Navbar/NavbarButtons/RedirectToApp.style.ts b/src/components/Navbar/NavbarButtons/RedirectToApp.style.ts
@@ -0,0 +1,31 @@
+'use client';
+
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { ConnectButton } from '../WalletButton.style';
+
+export const RedirectAppButton = styled(ConnectButton)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    width: 48,
+    minWidth: 48,
+  },
+}));
+
+export const RedirectAppLabel = styled(Typography)(({ theme }) => ({
+  display: 'none',
+  [theme.breakpoints.up('md')]: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+  },
+}));
+
+export const RedirectAppIcon = styled(SwapHorizIcon)(({ theme }) => ({
+  display: 'block',
+  [theme.breakpoints.up('md')]: {
+    display: 'none',
+  },
+}));
diff --git a/src/components/Navbar/NavbarButtons/RedirectToApp.tsx b/src/components/Navbar/NavbarButtons/RedirectToApp.tsx
@@ -1,10 +1,14 @@
 'use client';
-import { Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 import { TrackingAction, TrackingCategory } from 'src/const/trackingKeys';
 import { useUserTracking } from 'src/hooks/userTracking';
-import { ConnectButton as RedirectAppButton } from '../WalletButton.style';
+import {
+  RedirectAppButton,
+  RedirectAppIcon,
+  RedirectAppLabel,
+} from './RedirectToApp.style';
 
 interface RedirectToAppProps {
   hideConnectButton: boolean;
@@ -33,18 +37,10 @@ export const RedirectToApp = ({ hideConnectButton }: RedirectToAppProps) => {
         ...(!hideConnectButton && { marginRight: theme.spacing(1) }),
       }}
     >
-      <Typography
-        variant={'bodyMediumStrong'}
-        sx={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          display: '-webkit-box',
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: 'vertical',
-        }}
-      >
+      <RedirectAppIcon />
+      <RedirectAppLabel variant={'bodyMediumStrong'}>
         {t('blog.openApp')}
-      </Typography>
+      </RedirectAppLabel>
     </RedirectAppButton>
   );
 };
diff --git a/src/components/Navbar/WalletButton.style.ts b/src/components/Navbar/WalletButton.style.ts
@@ -1,9 +1,16 @@
 import { ButtonPrimary } from '@/components/Button';
-import { alpha, Avatar, Badge, Skeleton, styled } from '@mui/material';
+import {
+  alpha,
+  Avatar,
+  Badge,
+  Skeleton,
+  styled,
+  Typography,
+} from '@mui/material';
+import Image from 'next/image';
 import { getContrastAlphaColor } from 'src/utils/colors';
 import { ButtonTransparent } from '../Button';
 import { avatarMask12 } from '../Mask.style';
-import Image from 'next/image';
 
 export const WalletMgmtWalletAvatar = styled(Avatar)(() => ({
   height: 32,
@@ -35,6 +42,14 @@ export const ConnectButton = styled(ButtonPrimary)(({ theme }) => ({
   textWrap: 'nowrap',
 }));
 
+export const ConnectButtonLabel = styled(Typography)(({ theme }) => ({
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+}));
+
 export const WalletMenuButton = styled(ButtonTransparent)(({ theme }) => ({
   padding: theme.spacing(1),
   paddingRight: theme.spacing(1.5),
@@ -78,3 +93,10 @@ export const SkeletonWalletMenuButton = styled(Skeleton)(({ theme }) => ({
   marginRight: 1.1,
   marginLeft: 1.1,
 }));
+
+export const WalletLabel = styled(Typography)(({ theme }) => ({
+  display: 'block',
+  marginRight: theme.spacing(0.25),
+  marginLeft: theme.spacing(0.75),
+  width: 'auto',
+}));
diff --git a/src/components/Navbar/WalletButton.tsx b/src/components/Navbar/WalletButton.tsx
@@ -21,8 +21,10 @@ import { XPIcon } from '../illustrations/XPIcon';
 import { PromoLabel } from '../PromoLabel.style';
 import {
   ConnectButton,
+  ConnectButtonLabel,
   ImageWalletMenuButton,
   SkeletonWalletMenuButton,
+  WalletLabel,
   WalletMenuButton,
   WalletMgmtBadge,
   WalletMgmtChainAvatar,
@@ -73,18 +75,9 @@ export const WalletButtons = () => {
             openWalletMenu();
           }}
         >
-          <Typography
-            variant={'bodyMediumStrong'}
-            sx={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical',
-            }}
-          >
+          <ConnectButtonLabel variant={'bodyMediumStrong'}>
             {t('navbar.connect')}
-          </Typography>
+          </ConnectButtonLabel>
         </ConnectButton>
       ) : (
         <Stack direction="row" spacing={2}>
@@ -149,14 +142,9 @@ export const WalletButtons = () => {
                 />
               </WalletMgmtBadge>
             ) : null}
-            <Typography
-              variant={'bodyMediumStrong'}
-              width={'auto'}
-              marginRight={0.25}
-              marginLeft={0.75}
-            >
+            <WalletLabel variant={'bodyMediumStrong'}>
               {_walletDigest}
-            </Typography>
+            </WalletLabel>
           </WalletMenuButton>
         </Stack>
       )}

diff --git a/src/components/Portfolio/Portfolio.styles.ts b/src/components/Portfolio/Portfolio.styles.ts
@@ -1,19 +1,15 @@
 import {
   Accordion,
-  AvatarGroup,
   Avatar,
-  Typography,
-  circularProgressClasses,
-  CircularProgress as MuiCircularProgress,
-  keyframes,
+  AvatarGroup,
+  Box,
   darken,
   Divider,
-  Box,
+  Typography,
 } from '@mui/material';
-import { styled } from '@mui/system';
 import { lighten } from '@mui/material/styles';
-import { AccordionProps } from '@mui/material/Accordion';
 import SvgIcon from '@mui/material/SvgIcon/SvgIcon'; // Import AccordionProps
+import { styled } from '@mui/system';
 
 export const TotalValue = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.primary,
@@ -105,9 +101,7 @@ export const PortfolioBox = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   display: 'flex',
   justifyContent: 'center',
-  padding: '16px',
-  paddingTop: '0px',
-  paddingBottom: '0px',
+  padding: theme.spacing(0, 2),
 }));
 
 export const NoTokenImageBox = styled(Box)(() => ({

diff --git a/src/hooks/useImageStatus.ts b/src/hooks/useImageStatus.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { DEFAULT_EFFIGY } from 'src/const/urls';
 
 const useImageStatus = (address: string | undefined) => {