Header/Menu improvement

src/custom/components/AccountDetails/Transaction/CancelationModal.tsx

@@ -12,6 +12,7 @@ import {
   TransactionErrorContent,
 } from 'components/TransactionConfirmationModal'
 import { CancellationSummary } from './styled'
+import { Routes } from 'constants/routes'
 
 import { shortenOrderId } from 'utils'
 
@@ -48,7 +49,7 @@ function RequestCancellationModal(props: RequestCancellationModalProps): JSX.Ele
               <p>
                 This means that a solver might already have included the order in a solution even if this cancellation
                 is successful. Read more in the{' '}
-                <a target="_blank" href="/#/faq/trading#can-i-cancel-an-order">
+                <a target="_blank" rel="noreferrer" href={`${Routes.FAQ_TRADING}#can-i-cancel-an-order`}>
                   FAQ
                 </a>
                 .

src/custom/components/AccountDetails/index.tsx

@@ -123,15 +123,15 @@ interface AccountDetailsProps {
   confirmedTransactions: string[]
   ENSName?: string
   toggleWalletModal: () => void
-  closeOrdersPanel: () => void
+  handleCloseOrdersPanel: () => void
 }
 
 export default function AccountDetails({
   pendingTransactions = [],
   confirmedTransactions = [],
   ENSName,
   toggleWalletModal,
-  closeOrdersPanel,
+  handleCloseOrdersPanel,
 }: AccountDetailsProps) {
   const { account, connector, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
@@ -148,7 +148,7 @@ export default function AccountDetails({
   const handleDisconnectClick = () => {
     ;(connector as any).close()
     localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER)
-    closeOrdersPanel()
+    handleCloseOrdersPanel()
     toggleWalletModal()
   }
 

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/AppziButton/index.tsx

@@ -23,11 +23,14 @@ const Wrapper = styled(ButtonPrimary)`
   z-index: 2;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: 86px;
-  `};
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    right: 14px;
+    left: 14px;
+    height: 42px;
+    width: 42px;
+    bottom: 11px;
+    right: initial;
+    z-index: 10;
+    box-shadow: none;
+    border-width: 3px;
   `};
 
   &::after {
@@ -43,7 +46,10 @@ const Wrapper = styled(ButtonPrimary)`
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, top 0.2s ease-in-out;
-  }
+
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      display: none;
+    `}
 
   &:hover::after {
     top: -60px;

src/custom/components/ClickWrap/index.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components/macro'
 import { NavLink } from 'react-router-dom'
 import { ButtonPrimary, ButtonOutlined } from 'components/Button'
+import { Routes } from 'constants/routes'
 
 const Wrapper = styled.div`
   display: flex;
@@ -111,9 +112,9 @@ export default function ClickWrap() {
       <div>
         <p>
           We use cookies to provide you with the best experience and to help improve our website and application. Please
-          read our <NavLink to="/cookie-policy">Cookie Policy</NavLink> for more information. By clicking &apos;Accept
-          all&apos;, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage
-          and provide customer support.
+          read our <NavLink to={Routes.COOKIE_POLICY}>Cookie Policy</NavLink> for more information. By clicking
+          &apos;Accept all&apos;, you agree to the storing of cookies on your device to enhance site navigation, analyze
+          site usage and provide customer support.
         </p>
         <Form>
           <span>

src/custom/components/CowBalanceButton/index.tsx

@@ -4,21 +4,36 @@ import CowProtocolLogo from 'components/CowProtocolLogo'
 import { useCombinedBalance } from 'state/cowToken/hooks'
 import { ChainId } from 'state/lists/actions/actionsMod'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
-import { AMOUNT_PRECISION } from 'constants/index'
 import { COW } from 'constants/tokens'
+import { transparentize } from 'polished'
 
 export const Wrapper = styled.div<{ isLoading: boolean }>`
-  ${({ theme }) => theme.card.boxShadow};
+  background-color: ${({ theme }) => theme.bg4};
   color: ${({ theme }) => theme.text1};
-  padding: 0 12px;
-  font-size: 15px;
+  padding: 6px 12px;
+  border: 2px solid transparent;
   font-weight: 500;
-  height: 38px;
+  width: auto;
   display: flex;
   align-items: center;
   position: relative;
-  border-radius: 12px;
+  border-radius: 21px;
   pointer-events: auto;
+  transition: width 0.2s ease-in-out, border 0.2s ease-in-out;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    height: 100%;
+    width: auto;
+    padding: 6px 12px 6px 8px;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 6px 8px;
+  `};
+
+  &:hover {
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
+  }
 
   ${({ theme, isLoading }) =>
     isLoading &&
@@ -51,7 +66,6 @@ export const Wrapper = styled.div<{ isLoading: boolean }>`
 
   > b {
     margin: 0 0 0 5px;
-    color: inherit;
     font-weight: inherit;
     white-space: nowrap;
 
@@ -72,22 +86,25 @@ interface CowBalanceButtonProps {
   account?: string | null | undefined
   chainId: ChainId | undefined
   onClick?: () => void
+  isUpToSmall?: boolean
 }
 
 const COW_DECIMALS = COW[ChainId.MAINNET].decimals
 
-export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) {
+export default function CowBalanceButton({ onClick, isUpToSmall }: CowBalanceButtonProps) {
   const { balance, isLoading } = useCombinedBalance()
 
-  const formattedBalance = formatSmartLocaleAware(balance, AMOUNT_PRECISION)
+  const formattedBalance = formatSmartLocaleAware(balance, 0)
   const formattedMaxBalance = formatMax(balance, COW_DECIMALS)
 
   return (
     <Wrapper isLoading={isLoading} onClick={onClick}>
       <CowProtocolLogo />
-      <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
-        <Trans>{formattedBalance || 0}</Trans>
-      </b>
+      {!isUpToSmall && (
+        <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
+          <Trans>{formattedBalance || 0}</Trans>
+        </b>
+      )}
     </Wrapper>
   )
 }

src/custom/components/CowProtocolLogo/index.tsx

@@ -3,7 +3,7 @@ import CowProtocolIcon from 'assets/cow-swap/cow_v2.svg'
 
 export const Icon = styled.span<Props>`
   --defaultSize: 24px;
-  --smallSize: ${({ size }) => (size ? `calc(${size}px / 1.5)` : 'calc(var(--defaultSize) / 1.5)')};
+  --smallSize: 28px;
   background: url(${CowProtocolIcon}) no-repeat center/contain;
   height: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   width: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
@@ -12,7 +12,7 @@ export const Icon = styled.span<Props>`
   border-radius: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   position: relative;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
     width: var(--smallSize);
     height: var(--smallSize);
     border-radius: var(--smallSize);

src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx

@@ -13,10 +13,12 @@ import { AutoRow } from 'components/Row'
 import Page, { Title } from 'components/Page'
 import { MEDIA_WIDTHS } from '@src/theme'
 import CowError from 'assets/cow-swap/CowError.png'
-import { UniIcon, LogoImage } from '../Header'
+// import { UniIcon, LogoImage } from '../Header'
+import { UniIcon, LogoImage } from 'components/Header/styled' // mod
 import { HeaderRow } from 'components/Header/HeaderMod'
 import Footer from 'components/Footer'
 import { DISCORD_LINK, CODE_LINK } from 'constants/index'
+import { Routes } from 'constants/routes'
 
 /* const FallbackWrapper = styled.div`
   display: flex;
@@ -193,7 +195,7 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
         <AppWrapper>
           <HeaderWrapper>
             <HeaderRow marginRight="0">
-              <a href=".">
+              <a href={Routes.HOME}>
                 <UniIcon>
                   <LogoImage />
                 </UniIcon>

src/custom/components/Footer/index.tsx

@@ -20,6 +20,10 @@ const Wrapper = styled.div`
   justify-content: space-evenly;
   margin: auto 16px;
   width: 100%;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    margin: auto 0 100px;
+  `}
 `
 
 const FooterWrapper = styled.div`