Improve header 3

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -123,7 +123,7 @@ export default function AffiliateStatusCheck() {
       setAffiliateState('OWN_LINK')
 
       if (referralAddressQueryParam) {
-        history.push('/profile' + location.search)
+        history.push('/account' + location.search)
       }
       return
     }

src/custom/components/CowBalanceButton/index.tsx

@@ -11,7 +11,7 @@ import { transparentize } from 'polished'
 export const Wrapper = styled.div<{ isLoading: boolean }>`
   background-color: ${({ theme }) => theme.bg4};
   color: ${({ theme }) => theme.text1};
-  padding: 6px 12px;
+  padding: 7px 12px;
   border: 1px solid transparent;
   font-weight: 500;
   display: flex;

src/custom/components/Header/index.tsx

@@ -80,7 +80,7 @@ const StyledNavLink = styled(StyledNavLinkUni)`
 
 const BalanceText = styled(BalanceTextUni)`
   font-weight: 500;
-  padding: 0 12px;
+  padding: 0 0 0 12px;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     overflow: hidden;
@@ -228,6 +228,10 @@ const AccountElement = styled(AccountElementUni)<{ active: boolean }>`
   &:focus {
     border: 1px solid ${({ theme }) => transparentize(0.4, theme.text1)};
   }
+
+  ${BalanceText} {
+    min-width: initial;
+  }
 `
 
 export default function Header() {
@@ -249,7 +253,7 @@ export default function Header() {
   const isMenuOpen = useModalOpen(ApplicationModal.MENU)
 
   const history = useHistory()
-  const handleBalanceButtonClick = () => history.push('/profile')
+  const handleBalanceButtonClick = () => history.push('/account')
 
   // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
@@ -273,7 +277,9 @@ export default function Header() {
           </Title>
           <HeaderLinks>
             <StyledNavLink to="/swap">Swap</StyledNavLink>
-            <StyledNavLink to="/profile">Profile</StyledNavLink>
+            <StyledNavLink to="/account">Account</StyledNavLink>
+            <StyledNavLink to="/faq">FAQ</StyledNavLink>
+            <StyledNavLink to="/swap">More</StyledNavLink>
           </HeaderLinks>
         </HeaderRow>
 

src/custom/components/Menu/index.tsx

@@ -281,7 +281,7 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
   const history = useHistory()
   const handleBalanceButtonClick = () => {
     close()
-    history.push('/profile')
+    history.push('/account')
   }
 
   return (
@@ -292,8 +292,8 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap
         </ResponsiveInternalMenuItem>
-        <ResponsiveInternalMenuItem to="/profile" onClick={close}>
-          <User size={14} /> Profile
+        <ResponsiveInternalMenuItem to="/account" onClick={close}>
+          <User size={14} /> Account
         </ResponsiveInternalMenuItem>
         <InternalMenuItem to="/about" onClick={close}>
           <Star size={14} />

src/custom/constants/tokens/index.ts

@@ -140,7 +140,7 @@ export const ADDRESS_IMAGE_OVERRIDE = {
 
 /**
  * Addresses related to COW vesting for Locked GNO
- * These are used in src/custom/pages/Profile/LockedGnoVesting hooks and index files
+ * These are used in src/custom/pages/Account/LockedGnoVesting hooks and index files
  */
 export const MERKLE_DROP_CONTRACT_ADDRESSES: Record<number, string> = {
   [SupportedChainId.MAINNET]: '0x64646f112FfD6F1B7533359CFaAF7998F23C8c40',

src/custom/pages/Profile/LockedGnoVesting/index.tsx → src/custom/pages/Account/LockedGnoVesting/index.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { useCallback, useState, useEffect } from 'react'
 import SVG from 'react-inlinesvg'
-import { Card, BalanceDisplay, ConvertWrapper, VestingBreakdown, CardActions, ExtLink } from 'pages/Profile/styled'
+import { Card, BalanceDisplay, ConvertWrapper, VestingBreakdown, CardActions, ExtLink } from 'pages/Account/styled'
 import { ButtonPrimary } from 'custom/components/Button'
 import { HelpCircle } from 'components/Page'
 import { MouseoverTooltipContent } from 'components/Tooltip'

src/custom/pages/Profile/index.tsx → src/custom/pages/Account/index.tsx

@@ -24,7 +24,7 @@ import {
   BannerCardSvg,
   CardsLoader,
   CardsSpinner,
-} from 'pages/Profile/styled'
+} from '@src/custom/pages/Account/styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import Copy from 'components/Copy/CopyMod'
 import { RefreshCcw } from 'react-feather'
@@ -63,7 +63,7 @@ import { SwapVCowStatus } from 'state/cowToken/actions'
 import LockedGnoVesting from './LockedGnoVesting'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
 import usePrevious from 'hooks/usePrevious'
-import { useCowFromLockedGnoBalances } from 'pages/Profile/LockedGnoVesting/hooks'
+import { useCowFromLockedGnoBalances } from '@src/custom/pages/Account/LockedGnoVesting/hooks'
 
 const COW_DECIMALS = COW[ChainId.MAINNET].decimals
 
@@ -250,7 +250,7 @@ export default function Profile() {
       <ErrorModal />
 
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}
-      <Title>Profile</Title>
+      <Title>Account</Title>
 
       <CardsWrapper>
         {isCardsLoading ? (

src/custom/pages/App/index.tsx

@@ -20,7 +20,7 @@ const PrivacyPolicy = lazy(() => import(/* webpackChunkName: "privacy_policy" */
 const CookiePolicy = lazy(() => import(/* webpackChunkName: "cookie_policy" */ 'pages/CookiePolicy'))
 const TermsAndConditions = lazy(() => import(/* webpackChunkName: "terms" */ 'pages/TermsAndConditions'))
 const About = lazy(() => import(/* webpackChunkName: "about" */ 'pages/About'))
-const Profile = lazy(() => import(/* webpackChunkName: "profile" */ 'pages/Profile'))
+const Account = lazy(() => import(/* webpackChunkName: "profile" */ '@src/custom/pages/Account'))
 const NotFound = lazy(() => import(/* webpackChunkName: "not_found" */ 'pages/error/NotFound'))
 const CowRunner = lazy(() => import(/* webpackChunkName: "cow_runner" */ 'pages/games/CowRunner'))
 const MevSlicer = lazy(() => import(/* webpackChunkName: "mev_slicer" */ 'pages/games/MevSlicer'))
@@ -94,12 +94,13 @@ export default function App() {
       <Wrapper>
         <Suspense fallback={Loading}>
           <Switch>
-            <Redirect from="/claim" to="/profile" />
+            <Redirect from="/claim" to="/account" />
+            <Redirect from="/profile" to="/account" />
             <Route exact strict path="/swap" component={Swap} />
             <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
             <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
             <Route exact strict path="/about" component={About} />
-            <Route exact strict path="/profile" component={Profile} />
+            <Route exact strict path="/account" component={Account} />
 
             <Route exact path="/faq" component={Faq} />
             <Route exact strict path="/faq/protocol" component={ProtocolFaq} />

src/custom/pages/Claim/ClaimingStatus.tsx

@@ -133,7 +133,7 @@ export default function ClaimingStatus({ handleChangeAccount }: ClaimNavProps) {
               </SuccessBanner>
             </ExternalLink>
             {isSelfClaiming && (
-              <Link to="/profile">
+              <Link to="/account">
                 <SuccessBanner type={'Profile'}>
                   <span>
                     <Trans>View vCOW balance</Trans>