Improve header 5 (#603)

* Improve FAQ text

* Improve header 6 (#602)

* connect button styling

* Further flyout menu styling

* Improve header 7 (#601)

* Further flyout menu styling

* Uniform menu items styling

* Move styled components to styled

* Add hamburger icon with animation component.

* Improve header 8 (#600)

* Add mediaQuery hook

* Improve header 9 (#599)

* Progress mobile responsive menu

* Progress mobile responsive menu

* Improve header 10 (#598)

* Move to helper function

* Optimise menu code

* Improve header 11 (#597)

* Move URLS to an ENUM

* Fix enum issue.

* Styling and route fixes.

* Styling.

* Styling.

* Header/Menu improvement (waterfall PR FINAL)  (#596)

* Styling.

* Styling footer and bridge banner.

* Improve header 13 (#610)

* Fix network selector position.

* Fix exports/imports for network selector.

* Only open ordersPanel if account is true.

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/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 {

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,25 +4,35 @@ 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 }>`
   background-color: ${({ theme }) => theme.bg4};
   color: ${({ theme }) => theme.text1};
-  padding: 7px 12px;
-  border: 1px solid transparent;
+  padding: 6px 12px;
+  border: 2px solid transparent;
   font-weight: 500;
+  width: auto;
   display: flex;
   align-items: center;
   position: relative;
   border-radius: 21px;
   pointer-events: auto;
-  transition: border 0.2s ease-in-out;
+  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: 1px solid ${({ theme }) => transparentize(0.4, theme.text1)};
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)};
   }
 
   ${({ theme, isLoading }) =>
@@ -76,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;
@@ -172,7 +174,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.upToSmall`
+    margin: auto 0 100px;
+  `}
 `
 
 const FooterWrapper = styled.div`

src/custom/components/Header/HeaderMod.tsx

@@ -88,14 +88,14 @@ export const HeaderElement = styled.div`
   display: flex;
   align-items: center;
 
-  &:not(:first-child) {
+  /* &:not(:first-child) {
     margin-left: 0.5em;
-  }
+  } */
 
   /* addresses safari's lack of support for "gap" */
-  & > *:not(:first-child) {
+  /* & > *:not(:first-child) {
     margin-left: 8px;
-  }
+  } */
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     flex-direction: row-reverse;