Header/Menu improvement (#607)

* Update right header elements styling. * Improve header 2 (#606) * Move onclick for balance + wallet * Improve header 3 (#605) * Rename /profile to /account * Improve header 4 (#604) * Switch to custom MenuDropdown compontent and create a POC. * 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. * Improve header 1 updates (#628) * Updating util function * change onClick onTouchStart * Add footer margin on small and medium resolutions. (#652) * FAQ adjust margin (#653) * Fix iOS scrolling mobile menu overlay attempt and improve events (#656) * Fix iOS scrolling attempt and improve events * Fix iOS scrolling attempt and improve events * Improve header 1 elena feedback (#650) * Resolve FAQ exact links and styling submenu. * Unify FAQ menu links by importing them. * close dropdowns on click and on click outside. * Fix code style issues with Prettier * fix touch event issue. * Re-position Appzi modal on mobile. (#651) * Re-position Appzi modal on mobile. * FAQ adjust modal * FAQ adjust modal * try catching Appzi root ID. * try catching Appzi root ID. * try catching Appzi root ID. * try catching Appzi root ID. * try catching Appzi root ID. * fix account margin * uncomment * simple overrides * restore original code * add terms conditions (#670) Co-authored-by: Lint Action <[email protected]>
cowprotocol · Jun 14, 2022 · ffe64f9 · ffe64f9
1 parent 381ff3e
commit ffe64f9
Show file tree

Hide file tree

Showing 65 changed files with 1,196 additions and 1,175 deletions.
diff --git a/src/custom/assets/cow-swap/carret-down.svg b/src/custom/assets/cow-swap/carret-down.svg
diff --git a/src/custom/assets/cow-swap/code.svg b/src/custom/assets/cow-swap/code.svg
diff --git a/src/custom/assets/cow-swap/discord.svg b/src/custom/assets/cow-swap/discord.svg
diff --git a/src/custom/assets/cow-swap/doc.svg b/src/custom/assets/cow-swap/doc.svg
diff --git a/src/custom/assets/cow-swap/info.svg b/src/custom/assets/cow-swap/info.svg
diff --git a/src/custom/assets/cow-swap/menu.svg b/src/custom/assets/cow-swap/menu.svg
diff --git a/src/custom/assets/cow-swap/moon.svg b/src/custom/assets/cow-swap/moon.svg
diff --git a/src/custom/assets/cow-swap/pie.svg b/src/custom/assets/cow-swap/pie.svg
diff --git a/src/custom/assets/cow-swap/sun.svg b/src/custom/assets/cow-swap/sun.svg
diff --git a/src/custom/assets/cow-swap/twitter.svg b/src/custom/assets/cow-swap/twitter.svg
diff --git a/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx b/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>
                 .

diff --git a/src/custom/components/AccountDetails/index.tsx b/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()
   }
 

diff --git a/src/custom/components/AffiliateStatusCheck/index.tsx b/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
     }

diff --git a/src/custom/components/AppziButton/index.tsx b/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;

diff --git a/src/custom/components/ClickWrap/index.tsx b/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>

diff --git a/src/custom/components/CowBalanceButton/index.tsx b/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>
   )
 }
diff --git a/src/custom/components/CowProtocolLogo/index.tsx b/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);

diff --git a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx b/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>

diff --git a/src/custom/components/Footer/index.tsx b/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`