From ffe64f9183c8a5a8fb7eda6bb4a71ad2d3f51dba Mon Sep 17 00:00:00 2001 From: fairlight <31534717+fairlighteth@users.noreply.github.com> Date: Tue, 14 Jun 2022 09:53:53 +0100 Subject: [PATCH] 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 --- src/custom/assets/cow-swap/carret-down.svg | 3 + src/custom/assets/cow-swap/code.svg | 4 + src/custom/assets/cow-swap/discord.svg | 6 +- src/custom/assets/cow-swap/doc.svg | 4 + src/custom/assets/cow-swap/info.svg | 3 + src/custom/assets/cow-swap/menu.svg | 7 + src/custom/assets/cow-swap/moon.svg | 1 + src/custom/assets/cow-swap/pie.svg | 3 + src/custom/assets/cow-swap/sun.svg | 1 + src/custom/assets/cow-swap/twitter.svg | 6 +- .../Transaction/CancelationModal.tsx | 3 +- .../components/AccountDetails/index.tsx | 6 +- .../components/AffiliateStatusCheck/index.tsx | 2 +- src/custom/components/AppziButton/index.tsx | 18 +- src/custom/components/ClickWrap/index.tsx | 7 +- .../components/CowBalanceButton/index.tsx | 41 +- .../components/CowProtocolLogo/index.tsx | 4 +- .../ErrorBoundary/ErrorBoundaryMod.tsx | 6 +- src/custom/components/Footer/index.tsx | 4 + src/custom/components/Header/HeaderMod.tsx | 12 +- .../Header/MobileMenuIcon/index.tsx | 82 ++++ .../NetworkSelector/NetworkSelectorMod.tsx | 15 +- .../Header/NetworkSelector/index.tsx | 59 ++- src/custom/components/Header/index.tsx | 386 +++++++---------- src/custom/components/Header/styled.ts | 354 ++++++++++++++++ src/custom/components/Menu/MenuMod.tsx | 371 ----------------- src/custom/components/Menu/index.tsx | 390 ------------------ src/custom/components/MenuDropdown/index.tsx | 34 ++ src/custom/components/MenuDropdown/styled.ts | 133 ++++++ src/custom/components/Modal/index.ts | 6 +- src/custom/components/OrdersPanel/index.tsx | 12 +- .../TransactionConfirmationModal/index.tsx | 3 +- src/custom/components/WalletModal/index.tsx | 3 +- .../components/Web3Status/Web3StatusMod.tsx | 3 - src/custom/components/Web3Status/index.tsx | 45 +- src/custom/constants/index.ts | 2 +- src/custom/constants/mainMenu.ts | 80 ++++ src/custom/constants/routes.ts | 24 ++ src/custom/constants/tokens/index.ts | 2 +- src/custom/hooks/useMediaQuery.ts | 25 ++ src/custom/pages/About/index.tsx | 3 +- .../{Profile => Account}/AddressSelector.tsx | 0 .../claimData/gnosisChain.json | 0 .../LockedGnoVesting/claimData/index.test.ts | 0 .../LockedGnoVesting/claimData/index.ts | 0 .../LockedGnoVesting/claimData/mainnet.json | 0 .../LockedGnoVesting/claimData/rinkeby.json | 0 .../LockedGnoVesting/hooks.ts | 0 .../LockedGnoVesting/index.tsx | 2 +- src/custom/pages/{Profile => Account}/ens.ts | 0 .../pages/{Profile => Account}/index.tsx | 8 +- .../pages/{Profile => Account}/styled.tsx | 4 +- src/custom/pages/App/AppMod.tsx | 2 +- src/custom/pages/App/index.tsx | 71 ++-- src/custom/pages/Claim/ClaimingStatus.tsx | 3 +- src/custom/pages/Faq/AffiliateFaq.tsx | 19 +- src/custom/pages/Faq/Menu.tsx | 11 +- src/custom/pages/Faq/TokenFaq.tsx | 9 +- src/custom/pages/Faq/index.tsx | 5 +- src/custom/pages/Faq/styled.tsx | 1 + src/custom/pages/Swap/SwapMod.tsx | 11 +- src/custom/pages/Swap/styleds.tsx | 15 + src/custom/theme/baseTheme.tsx | 20 +- src/custom/theme/styled.d.ts | 2 + src/custom/utils/toggleBodyClass.ts | 15 + 65 files changed, 1196 insertions(+), 1175 deletions(-) create mode 100644 src/custom/assets/cow-swap/carret-down.svg create mode 100644 src/custom/assets/cow-swap/code.svg create mode 100644 src/custom/assets/cow-swap/doc.svg create mode 100644 src/custom/assets/cow-swap/info.svg create mode 100644 src/custom/assets/cow-swap/menu.svg create mode 100644 src/custom/assets/cow-swap/moon.svg create mode 100644 src/custom/assets/cow-swap/pie.svg create mode 100644 src/custom/assets/cow-swap/sun.svg create mode 100644 src/custom/components/Header/MobileMenuIcon/index.tsx create mode 100644 src/custom/components/Header/styled.ts delete mode 100644 src/custom/components/Menu/MenuMod.tsx delete mode 100644 src/custom/components/Menu/index.tsx create mode 100644 src/custom/components/MenuDropdown/index.tsx create mode 100644 src/custom/components/MenuDropdown/styled.ts create mode 100644 src/custom/constants/mainMenu.ts create mode 100644 src/custom/constants/routes.ts create mode 100644 src/custom/hooks/useMediaQuery.ts rename src/custom/pages/{Profile => Account}/AddressSelector.tsx (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/claimData/gnosisChain.json (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/claimData/index.test.ts (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/claimData/index.ts (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/claimData/mainnet.json (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/claimData/rinkeby.json (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/hooks.ts (100%) rename src/custom/pages/{Profile => Account}/LockedGnoVesting/index.tsx (99%) rename src/custom/pages/{Profile => Account}/ens.ts (100%) rename src/custom/pages/{Profile => Account}/index.tsx (98%) rename src/custom/pages/{Profile => Account}/styled.tsx (99%) create mode 100644 src/custom/utils/toggleBodyClass.ts diff --git a/src/custom/assets/cow-swap/carret-down.svg b/src/custom/assets/cow-swap/carret-down.svg new file mode 100644 index 0000000000..1831affe5b --- /dev/null +++ b/src/custom/assets/cow-swap/carret-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/custom/assets/cow-swap/code.svg b/src/custom/assets/cow-swap/code.svg new file mode 100644 index 0000000000..2ced6ce64d --- /dev/null +++ b/src/custom/assets/cow-swap/code.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/custom/assets/cow-swap/discord.svg b/src/custom/assets/cow-swap/discord.svg index 58721be551..734c765981 100644 --- a/src/custom/assets/cow-swap/discord.svg +++ b/src/custom/assets/cow-swap/discord.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/src/custom/assets/cow-swap/doc.svg b/src/custom/assets/cow-swap/doc.svg new file mode 100644 index 0000000000..673e82bb95 --- /dev/null +++ b/src/custom/assets/cow-swap/doc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/custom/assets/cow-swap/info.svg b/src/custom/assets/cow-swap/info.svg new file mode 100644 index 0000000000..3bc8b57bf4 --- /dev/null +++ b/src/custom/assets/cow-swap/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/custom/assets/cow-swap/menu.svg b/src/custom/assets/cow-swap/menu.svg new file mode 100644 index 0000000000..b838f69f60 --- /dev/null +++ b/src/custom/assets/cow-swap/menu.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/custom/assets/cow-swap/moon.svg b/src/custom/assets/cow-swap/moon.svg new file mode 100644 index 0000000000..d37991f2af --- /dev/null +++ b/src/custom/assets/cow-swap/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/pie.svg b/src/custom/assets/cow-swap/pie.svg new file mode 100644 index 0000000000..b6c9dcf6d9 --- /dev/null +++ b/src/custom/assets/cow-swap/pie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/custom/assets/cow-swap/sun.svg b/src/custom/assets/cow-swap/sun.svg new file mode 100644 index 0000000000..93e1029721 --- /dev/null +++ b/src/custom/assets/cow-swap/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/twitter.svg b/src/custom/assets/cow-swap/twitter.svg index 69882d6e27..7d68909264 100644 --- a/src/custom/assets/cow-swap/twitter.svg +++ b/src/custom/assets/cow-swap/twitter.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx b/src/custom/components/AccountDetails/Transaction/CancelationModal.tsx index 98538b3d74..b18a1f7b29 100644 --- 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

This means that a solver might already have included the order in a solution even if this cancellation is successful. Read more in the{' '} - + FAQ . diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx index 188758d28c..dc280887e9 100644 --- a/src/custom/components/AccountDetails/index.tsx +++ b/src/custom/components/AccountDetails/index.tsx @@ -123,7 +123,7 @@ interface AccountDetailsProps { confirmedTransactions: string[] ENSName?: string toggleWalletModal: () => void - closeOrdersPanel: () => void + handleCloseOrdersPanel: () => void } export default function AccountDetails({ @@ -131,7 +131,7 @@ export default function AccountDetails({ 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 index b830f58817..c665b92d7e 100644 --- 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 index b72c08710e..937d5cee4d 100644 --- 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 index 09852010b1..dcc39efd7e 100644 --- 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() {

We use cookies to provide you with the best experience and to help improve our website and application. Please - read our Cookie Policy for more information. By clicking 'Accept - all', you agree to the storing of cookies on your device to enhance site navigation, analyze site usage - and provide customer support. + read our Cookie Policy for more information. By clicking + 'Accept all', you agree to the storing of cookies on your device to enhance site navigation, analyze + site usage and provide customer support.

diff --git a/src/custom/components/CowBalanceButton/index.tsx b/src/custom/components/CowBalanceButton/index.tsx index 4265972b37..84b0d69707 100644 --- 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 ( - - {formattedBalance || 0} - + {!isUpToSmall && ( + + {formattedBalance || 0} + + )} ) } diff --git a/src/custom/components/CowProtocolLogo/index.tsx b/src/custom/components/CowProtocolLogo/index.tsx index 3de61e7955..f5f3f5043c 100644 --- 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` --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` 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 index 326b722c50..05f6aa10d9 100644 --- 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 - + diff --git a/src/custom/components/Footer/index.tsx b/src/custom/components/Footer/index.tsx index ed6cc4d7c9..7c4afb3b49 100644 --- 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` diff --git a/src/custom/components/Header/HeaderMod.tsx b/src/custom/components/Header/HeaderMod.tsx index a6b79a603f..185268f147 100644 --- a/src/custom/components/Header/HeaderMod.tsx +++ b/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; @@ -186,13 +186,13 @@ export const UNIWrapper = styled.span` position: relative; cursor: pointer; - :hover { + /* :hover { opacity: 0.8; } :active { opacity: 0.9; - } + } */ ` export const BalanceText = styled(Text)` diff --git a/src/custom/components/Header/MobileMenuIcon/index.tsx b/src/custom/components/Header/MobileMenuIcon/index.tsx new file mode 100644 index 0000000000..25804a2057 --- /dev/null +++ b/src/custom/components/Header/MobileMenuIcon/index.tsx @@ -0,0 +1,82 @@ +import styled, { css } from 'styled-components/macro' + +const Wrapper = styled.div<{ isMobileMenuOpen: boolean; height?: number; width?: number; lineSize?: number }>` + z-index: 102; + display: flex; + cursor: pointer; + margin: 0 6px 0 16px; + position: relative; + width: ${({ width = 34 }) => `${width}px`}; + height: ${({ height = 18 }) => `${height}px`}; + + span { + background-color: ${({ theme }) => theme.text1}; + border-radius: 3px; + height: ${({ lineSize = 2 }) => `${lineSize}px`}; + position: absolute; + transition: all 0.15s cubic-bezier(0.8, 0.5, 0.2, 1.4); + width: 100%; + margin: auto; + } + + span:nth-child(1) { + left: 0; + top: 0; + } + + span:nth-child(2) { + left: 0; + opacity: 1; + top: 50%; + bottom: 50%; + } + + span:nth-child(3) { + bottom: 0; + left: 0; + width: 75%; + } + + + ${({ isMobileMenuOpen }) => + isMobileMenuOpen && + css` + span:nth-child(1) { + transform: rotate(45deg); + top: 50%; + bottom: 50%; + } + + span:nth-child(2) { + opacity: 0; + } + + span:nth-child(3) { + transform: rotate(-45deg); + top: 50%; + bottom: 50%; + width: 100%; + } + `}; + +} +` + +interface IconProps { + isMobileMenuOpen: boolean + width?: number + height?: number + lineSize?: number + onTouchStart?: () => void + onClick?: () => void +} + +export default function MobileMenuIcon(params: IconProps) { + return ( + + + + + + ) +} diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx index 18e4272f2c..6e8b7f3d48 100644 --- a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx +++ b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx @@ -67,20 +67,19 @@ export const FlyoutHeader = styled.div` color: ${({ theme }) => theme.text1}; font-weight: 400; ` */ -const FlyoutMenu = styled.div` +export const FlyoutMenu = styled.div` position: absolute; top: 54px; width: 272px; z-index: 99; padding-top: 10px; - @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) { - top: 40px; - } + /* @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) { + top: 38px; + } */ - // mod - ${({ theme }) => theme.mediaWidth.upToExtraSmall` + /* ${({ theme }) => theme.mediaWidth.upToExtraSmall` right: 20%; - `} + `} */ ` // mod: actually, this is closer to original version but I haven't yet pulled latest from uniswap const FlyoutMenuContents = styled.div` @@ -156,7 +155,7 @@ export const SelectorLabel = styled(NetworkLabel)` margin-right: 8px; } ` -const SelectorControls = styled.div<{ interactive: boolean }>` +export const SelectorControls = styled.div<{ interactive: boolean }>` align-items: center; background-color: ${({ theme }) => theme.bg4}; border: 1px solid ${({ theme }) => theme.bg0}; diff --git a/src/custom/components/Header/NetworkSelector/index.tsx b/src/custom/components/Header/NetworkSelector/index.tsx index 602cd77ec9..10ebf6ec02 100644 --- a/src/custom/components/Header/NetworkSelector/index.tsx +++ b/src/custom/components/Header/NetworkSelector/index.tsx @@ -1,4 +1,57 @@ -import NetworkSelector from './NetworkSelectorMod' +import styled from 'styled-components/macro' +import NetworkSelectorMod, { SelectorLabel, SelectorControls, FlyoutMenu } from './NetworkSelectorMod' +import { transparentize } from 'polished' +export { getChainNameFromId, getParsedChainId } from './NetworkSelectorMod' -export * from './NetworkSelectorMod' -export default NetworkSelector +const Wrapper = styled.div` + display: flex; + + ${FlyoutMenu} { + top: 38px; + right: 0; + + ${({ theme }) => theme.mediaWidth.upToSmall` + width: 100%; + left: 0; + top: 58px; + `}; + } + + ${SelectorLabel} { + ${({ theme }) => theme.mediaWidth.upToMedium` + display: none; + `}; + } + + ${SelectorControls} { + border-radius: 21px; + border: 2px solid transparent; + padding: 6px; + transition: border 0.2s ease-in-out; + + > img { + width: 24px; + height: 24px; + object-fit: contain; + margin: 0 6px 0 0; + } + + ${SelectorLabel} + svg { + width: 18px; + height: 18px; + stroke-width: 3px; + } + + &:hover { + border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)}; + } + } +` + +export default function NetworkSelector() { + return ( + + + + ) +} diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx index f1b164848a..1720af975a 100644 --- a/src/custom/components/Header/index.tsx +++ b/src/custom/components/Header/index.tsx @@ -1,51 +1,47 @@ -import { useState, useEffect, useCallback } from 'react' +import { useState, useEffect, useCallback, useMemo } from 'react' import { SupportedChainId as ChainId } from 'constants/chains' -// import { ExternalLink } from 'theme' +import { Routes } from 'constants/routes' import { useHistory } from 'react-router-dom' import ReactGA from 'react-ga4' - -import HeaderMod, { - Title as TitleMod, - HeaderLinks as HeaderLinksMod, - HeaderRow, - HeaderControls as HeaderControlsUni, - BalanceText as BalanceTextUni, - HeaderElement, - AccountElement, - HeaderElementWrap, - StyledNavLink as StyledNavLinkUni, - StyledMenuButton, - HeaderFrame, - UNIWrapper, -} from './HeaderMod' -import Menu from 'components/Menu' -import { Moon, Sun } from 'react-feather' -import styled from 'styled-components/macro' import { useActiveWeb3React } from 'hooks/web3' import { useNativeCurrencyBalances } from 'state/wallet/hooks' -import { AMOUNT_PRECISION } from 'constants/index' import { useDarkModeManager } from 'state/user/hooks' -import { darken } from 'polished' -// import TwitterImage from 'assets/cow-swap/twitter.svg' -import OrdersPanel from 'components/OrdersPanel' -import { ApplicationModal } from 'state/application/reducer' - +import { useMediaQuery, upToSmall, upToMedium, upToLarge, LargeAndUp } from 'hooks/useMediaQuery' +import { AMOUNT_PRECISION } from 'constants/index' +import { MAIN_MENU, MAIN_MENU_TYPE } from 'constants/mainMenu' import { supportedChainId } from 'utils/supportedChainId' import { formatSmart } from 'utils/format' -import Web3Status from 'components/Web3Status' -import NetworkSelector, { SelectorLabel } from 'components/Header/NetworkSelector' -// import SVG from 'react-inlinesvg' -import { - useModalOpen, - /*useShowClaimPopup,*/ - // useToggleSelfClaimModal -} from 'state/application/hooks' -//import { useUserHasAvailableClaim } from 'state/claim/hooks' +import { addBodyClass, removeBodyClass } from 'utils/toggleBodyClass' +import SVG from 'react-inlinesvg' -// import Modal from 'components/Modal' -// import ClaimModal from 'components/claim/ClaimModal' +// Components +import { ExternalLink } from 'theme/components' +import { HeaderRow } from './HeaderMod' +import { + Wrapper, + Title, + LogoImage, + HeaderLinks, + HeaderModWrapper, + UniIcon, + StyledNavLink, + AccountElement, + BalanceText, + HeaderControls, + HeaderElement, +} from './styled' +import MobileMenuIcon from './MobileMenuIcon' +import MenuDropdown from 'components/MenuDropdown' +import { MenuTitle, MenuSection } from 'components/MenuDropdown/styled' +import Web3Status from 'components/Web3Status' +import OrdersPanel from 'components/OrdersPanel' +import NetworkSelector from 'components/Header/NetworkSelector' import CowBalanceButton from 'components/CowBalanceButton' +// Assets +import IMAGE_MOON from 'assets/cow-swap/moon.svg' +import IMAGE_SUN from 'assets/cow-swap/sun.svg' + export const NETWORK_LABELS: { [chainId in ChainId]?: string } = { [ChainId.RINKEBY]: 'Rinkeby', // [ChainId.ROPSTEN]: 'Ropsten', @@ -64,162 +60,6 @@ export interface LinkType { path: string } -const StyledNavLink = styled(StyledNavLinkUni)` - transition: color 0.15s ease-in-out; - color: ${({ theme }) => darken(0.3, theme.text1)}; - - &:first-of-type { - margin: 0 12px 0 0; - } - - &:hover, - &:focus { - color: ${({ theme }) => theme.text1}; - } -` - -const BalanceText = styled(BalanceTextUni)` - ${({ theme }) => theme.mediaWidth.upToMedium` - overflow: hidden; - max-width: 100px; - text-overflow: ellipsis; - `}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - display: none; - `}; -` - -const HeaderControls = styled(HeaderControlsUni)` - justify-content: flex-end; - - ${({ theme }) => theme.mediaWidth.upToMedium` - max-width: 100%; - padding: 0; - height: auto; - width: 100%; - `}; -` -export const Wrapper = styled.div` - width: 100%; - - ${HeaderFrame} { - padding: 16px; - grid-template-columns: auto auto; - grid-gap: 16px; - - ${({ theme }) => theme.mediaWidth.upToExtraSmall` - padding: 10px; - `} - } - - ${HeaderElement} { - ${({ theme }) => theme.mediaWidth.upToSmall` - width: 100%; - `}; - - ${({ theme }) => theme.mediaWidth.upToMedium` - flex-direction: initial; - align-items: inherit; - `}; - } - - ${StyledMenuButton} { - margin-left: 0.5rem; - padding: 0; - height: 38px; - width: 38px; - } - - ${SelectorLabel} { - ${({ theme }) => theme.mediaWidth.upToMedium` - display: none; - `}; - } -` - -export const HeaderModWrapper = styled(HeaderMod)`` - -const Title = styled(TitleMod)` - margin: 0; - text-decoration: none; - color: ${({ theme }) => theme.text1}; -` - -export const HeaderLinks = styled(HeaderLinksMod)` - margin: 5px 0 0 0; - - ${({ theme }) => theme.mediaWidth.upToLarge` - display: none; - `}; -` - -export const TwitterLink = styled(StyledMenuButton)` - > a { - ${({ theme }) => theme.cursor}; - padding: 8px; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - } - - > a > svg { - width: 100%; - height: 100%; - object-fit: contain; - border: 0; - display: flex; - margin: 0; - padding: 0; - stroke: transparent; - } - - > a > svg > path { - fill: ${({ theme }) => theme.text1}; - } - - > a:hover > svg > path { - fill: ${({ theme }) => theme.primary1}; - } -` - -export const LogoImage = styled.div` - width: 190px; - height: 48px; - background: ${({ theme }) => `url(${theme.logo.src}) no-repeat center/contain`}; - margin: 0 32px 0 0; - position: relative; - - ${({ theme }) => theme.mediaWidth.upToMedium` - background: ${({ theme }) => `url(${theme.logo.srcIcon}) no-repeat left/contain`}; - height: 34px; - `} - - > svg { - width: 100%; - height: 100%; - object-fit: contain; - } -` - -export const UniIcon = styled.div` - display: flex; - position: relative; - transition: transform 0.3s ease; - - &:hover { - transform: rotate(-5deg); - } -` - -const VCowWrapper = styled(UNIWrapper)` - ${({ theme }) => theme.mediaWidth.upToSmall` - display: none; - `} -` - export default function Header() { const { account, chainId: connectedChainId } = useActiveWeb3React() const chainId = supportedChainId(connectedChainId) @@ -236,76 +76,140 @@ export default function Header() { toggleDarkModeAux() }, [toggleDarkModeAux, darkMode]) - // const toggleClaimModal = useToggleSelfClaimModal() - // const availableClaim: boolean = useUserHasAvailableClaim(account) - // const [showUniBalanceModal, setShowUniBalanceModal] = useState(false) - // const showClaimPopup = useShowClaimPopup() - const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState(false) - const closeOrdersPanel = () => setIsOrdersPanelOpen(false) - const openOrdersPanel = () => setIsOrdersPanelOpen(true) - const isMenuOpen = useModalOpen(ApplicationModal.MENU) + const handleOpenOrdersPanel = () => { + account && setIsOrdersPanelOpen(true) + account && isOrdersPanelOpen && addBodyClass('noScroll') + } + const handleCloseOrdersPanel = () => { + setIsOrdersPanelOpen(false) + !isOrdersPanelOpen && removeBodyClass('noScroll') + } const history = useHistory() - const handleBalanceButtonClick = () => history.push('/profile') - - // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open. + const handleBalanceButtonClick = () => history.push('/account') + const isUpToLarge = useMediaQuery(upToLarge) + const isUpToMedium = useMediaQuery(upToMedium) + const isUpToSmall = useMediaQuery(upToSmall) + const isLargeAndUp = useMediaQuery(LargeAndUp) + + const [isTouch, setIsTouch] = useState(false) + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) + const handleMobileMenuOnClick = useCallback(() => { + isUpToLarge && setIsMobileMenuOpen(!isMobileMenuOpen) + }, [isUpToLarge, isMobileMenuOpen]) + + // Toggle the 'noScroll' class on body, whenever the orders panel is open. // This removes the inner scrollbar on the page body, to prevent showing double scrollbars. useEffect(() => { - isOrdersPanelOpen || isMenuOpen - ? document.body.classList.add('noScroll') - : document.body.classList.remove('noScroll') - }, [isOrdersPanelOpen, isMenuOpen]) + isMobileMenuOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll') + // Set if device has touch capabilities + setIsTouch('ontouchstart' in document.documentElement) + }, [isOrdersPanelOpen, isMobileMenuOpen, isUpToLarge, isUpToMedium, isUpToSmall, isLargeAndUp]) + + const getMainMenu = useMemo( + () => + MAIN_MENU.map(({ title, url, externalURL, items }: MAIN_MENU_TYPE, index) => + !items && !externalURL && url ? ( + + {title} + + ) : !items && externalURL && url ? ( + + {title} + + ) : items ? ( + + {items.map(({ sectionTitle, links }, index) => { + return ( + + {sectionTitle && {sectionTitle}} + {links.map(({ title, url, externalURL, icon, iconSVG, action }, index) => { + return action && action === 'setColorMode' ? ( + + ) : !externalURL && url ? ( + + {iconSVG ? ( + + ) : icon ? ( + {`${title} + ) : null}{' '} + {title} + + ) : url ? ( + + {iconSVG ? ( + + ) : icon ? ( + {`${title} + ) : null}{' '} + {title} + + ) : null + })} + + ) + })} + + ) : null + ), + [darkMode, handleMobileMenuOnClick, toggleDarkMode] + ) return ( - + - - {/* setShowUniBalanceModal(false)}> - - */} - + <HeaderRow> + <Title href={Routes.HOME} isMobileMenuOpen={isMobileMenuOpen}> <UniIcon> - <LogoImage /> + <LogoImage isMobileMenuOpen={isMobileMenuOpen} /> </UniIcon> - - Swap - Profile - + {getMainMenu} - - - - - - - + - + + + + {account && userEthBalance && ( - + {formatSmart(userEthBalance, AMOUNT_PRECISION) || '0'} {nativeToken} )} - + - - {/* - - - - */} - - {darkMode ? : } - - - - {isOrdersPanelOpen && } + + {isUpToLarge && ( + + )} + {isOrdersPanelOpen && } ) diff --git a/src/custom/components/Header/styled.ts b/src/custom/components/Header/styled.ts new file mode 100644 index 0000000000..23d22b9459 --- /dev/null +++ b/src/custom/components/Header/styled.ts @@ -0,0 +1,354 @@ +import styled, { css } from 'styled-components/macro' +import { transparentize, darken } from 'polished' +import HeaderMod, { + Title as TitleMod, + HeaderLinks as HeaderLinksMod, + HeaderControls as HeaderControlsUni, + BalanceText as BalanceTextUni, + AccountElement as AccountElementUni, + StyledNavLink as StyledNavLinkUni, + StyledMenuButton, + HeaderFrame, + HeaderElement as HeaderElementUni, +} from './HeaderMod' +import { MenuFlyout, MenuSection, Content as MenuContent, MenuTitle } from 'components/MenuDropdown/styled' + +export const StyledNavLink = styled(StyledNavLinkUni)` + transition: color 0.15s ease-in-out; + color: ${({ theme }) => darken(0.3, theme.text1)}; + + &:first-of-type { + margin: 0 12px 0 0; + } + + &:hover, + &:focus { + color: ${({ theme }) => theme.text1}; + } +` + +export const BalanceText = styled(BalanceTextUni)` + font-weight: 500; + padding: 0 6px 0 12px; + + ${({ theme }) => theme.mediaWidth.upToMedium` + overflow: hidden; + max-width: 100px; + text-overflow: ellipsis; + `}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + display: none; + `}; +` + +export const HeaderControls = styled(HeaderControlsUni)` + justify-content: flex-end; + gap: 12px; + + ${({ theme }) => theme.mediaWidth.upToLarge` + max-width: 100%; + margin: 0 0 0 auto; + padding: 0; + height: auto; + width: auto; + `}; +` + +export const HeaderElement = styled(HeaderElementUni)` + border-radius: 0; + gap: 12px; + + ${({ theme }) => theme.mediaWidth.upToMedium` + flex-direction: row; + justify-content: flex-end; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + border-radius: 0; + height: 64px; + background-color: ${({ theme }) => transparentize(0.1, theme.bg3)}; + border-top: 1px solid ${({ theme }) => transparentize(0.7, theme.border)}; + backdrop-filter: blur(21px); + padding: 10px 16px; + gap: 8px; + `} +` + +export const Wrapper = styled.div<{ isMobileMenuOpen: boolean }>` + width: 100%; + + ${HeaderFrame} { + padding: 16px; + display: flex; + + ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge` + grid-template-columns: unset; + + ${ + isMobileMenuOpen && + css` + position: absolute; + top: 0; + + &::before { + content: ''; + width: 100%; + display: flex; + height: 60px; + background: ${({ theme }) => theme.bg4}; + position: fixed; + top: 0; + left: 0; + z-index: 101; + } + ` + } + `} + } + + ${StyledMenuButton} { + margin-left: 0.5rem; + padding: 0; + height: 38px; + width: 38px; + } +` + +export const HeaderModWrapper = styled(HeaderMod)`` + +export const Title = styled(TitleMod)<{ isMobileMenuOpen: boolean }>` + margin: 0; + text-decoration: none; + color: ${({ theme }) => theme.text1}; + + ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge` + ${ + isMobileMenuOpen && + css` + z-index: 101; + ` + } + `}; +` + +export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>` + margin: 0; + + // Enforce uniform styling of different menu items/components + > ${StyledNavLink}, > ${MenuFlyout} > button { + font-size: 16px; + position: relative; + border-radius: 16px; + display: flex; + align-items: center; + font-weight: 500; + appearance: none; + outline: 0; + margin: 0 4px; + padding: 8px 12px; + background: 0; + border: 0; + cursor: pointer; + background: transparent; + transition: background 0.15s ease-in-out, color 0.15s ease-in-out; + color: ${({ theme }) => transparentize(0.4, theme.text1)}; + + ${({ theme }) => theme.mediaWidth.upToLarge` + width: 100%; + border-radius: 0; + margin: 0; + font-weight: 600; + font-size: 17px; + padding: 28px 10px; + color: ${({ theme }) => theme.text1}; + border-bottom: 1px solid ${({ theme }) => transparentize(0.9, theme.text1)}; + `}; + + > svg > path { + fill: ${({ theme }) => transparentize(0.4, theme.text1)}; + transition: fill 0.15s ease-in-out; + } + + &:hover { + color: ${({ theme }) => theme.text1}; + background: ${({ theme }) => transparentize(0.95, theme.text1)}; + + ${({ theme }) => theme.mediaWidth.upToLarge` + background: transparent; + `}; + + > svg > path { + fill: ${({ theme }) => theme.text1}; + } + } + + &.expanded { + border: 0; + } + + &.expanded + ${MenuContent} { + ${({ theme }) => theme.mediaWidth.upToLarge` + border-bottom: 1px solid ${({ theme }) => transparentize(0.9, theme.text1)}; + `}; + } + + &.ACTIVE { + color: ${({ theme }) => theme.text1}; + } + } + + ${MenuFlyout} { + ${({ theme }) => theme.mediaWidth.upToLarge` + width: 100%; + flex-flow: column wrap; + + > button > svg { + margin: 0 0 0 auto; + height: 10px; + } + `}; + } + + ${MenuContent} { + ${({ theme }) => theme.mediaWidth.upToLarge` + padding: 8px 10px 28px; + gap: 36px; + margin: 0; + `}; + } + + ${MenuSection} { + ${({ theme }) => theme.mediaWidth.upToLarge` + gap 36px; + opacity: 0.7; + `}; + }} + + ${MenuTitle} { + ${({ theme }) => theme.mediaWidth.upToLarge` + display: none; + `}; + }} + + ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge` + display: none; + width: 100%; + height: 100%; + position: fixed; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: flex-start; + top: 0; + left: 0; + bottom: 0; + z-index: 100; + background: ${({ theme }) => theme.bg4}; + outline: 0; + padding: 60px 8px; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; // iOS scroll fix + transform: translate3d(0,0,0); // iOS scroll fix + + ${ + isMobileMenuOpen && + css` + display: flex; + ` + } + `}; +` + +export const TwitterLink = styled(StyledMenuButton)` + > a { + ${({ theme }) => theme.cursor}; + padding: 8px; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + } + + > a > svg { + width: 100%; + height: 100%; + object-fit: contain; + border: 0; + display: flex; + margin: 0; + padding: 0; + stroke: transparent; + } + + > a > svg > path { + fill: ${({ theme }) => theme.text1}; + } + + > a:hover > svg > path { + fill: ${({ theme }) => theme.primary1}; + } +` + +export const LogoImage = styled.div<{ isMobileMenuOpen?: boolean }>` + width: 190px; + height: 48px; + background: ${({ theme }) => `url(${theme.logo.src}) no-repeat center/contain`}; + margin: 0 32px 0 0; + position: relative; + + ${({ theme }) => theme.mediaWidth.upToMedium` + background: ${({ theme }) => `url(${theme.logo.srcIcon}) no-repeat left/contain`}; + height: 34px; + `} + + ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge` + ${ + isMobileMenuOpen && + css` + background: ${({ theme }) => `url(${theme.logo.srcIcon}) no-repeat left/contain`}; + height: 34px; + ` + } + `} + + > svg { + width: 100%; + height: 100%; + object-fit: contain; + } +` + +export const UniIcon = styled.div` + display: flex; + position: relative; + transition: transform 0.3s ease; + + &:hover { + transform: rotate(-5deg); + } +` + +export const AccountElement = styled(AccountElementUni)<{ active: boolean }>` + background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg4)}; + border-radius: 21px; + border: 2px solid transparent; + transition: border 0.2s ease-in-out; + pointer-events: auto; + width: auto; + + ${({ theme }) => theme.mediaWidth.upToMedium` + height: 100%; + `} + + &:hover, + &:focus { + border: 2px solid ${({ theme }) => transparentize(0.7, theme.text1)}; + } + + ${BalanceText} { + min-width: initial; + } +` diff --git a/src/custom/components/Menu/MenuMod.tsx b/src/custom/components/Menu/MenuMod.tsx deleted file mode 100644 index a53f262bce..0000000000 --- a/src/custom/components/Menu/MenuMod.tsx +++ /dev/null @@ -1,371 +0,0 @@ -// eslint-disable-next-line no-restricted-imports -import { t /*, Trans*/ } from '@lingui/macro' -// import { PrivacyPolicyModal } from 'components/PrivacyPolicy' -// import { L2_CHAIN_IDS } from 'constants/chains' -// import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales' -// import { useActiveLocale } from 'hooks/useActiveLocale' -// import useActiveWeb3React from 'hooks/useActiveWeb3React' -// import { useLocationLinkProps } from 'hooks/useLocationLinkProps' -import React, { /*useEffect,*/ useRef /*, useState*/ } from 'react' -// import { -// BookOpen, -// Check, -// ChevronLeft, -// Coffee, -// FileText, -// Globe, -// HelpCircle, -// Info, -// MessageCircle, -// Moon, -// Sun, -// } from 'react-feather' -import { Link } from 'react-router-dom' -// import { useDarkModeManager } from 'state/user/hooks' -import styled, { css } from 'styled-components/macro' - -import { ReactComponent as MenuIcon } from 'assets/images/menu.svg' -import { useOnClickOutside } from 'hooks/useOnClickOutside' -import { useModalOpen, useToggleModal } from 'state/application/hooks' -import { ApplicationModal } from 'state/application/reducer' -import { ExternalLink } from 'theme' -import { ButtonPrimary } from 'components/Button' - -// MOD imports -import { WithClassName } from 'types' - -export enum FlyoutAlignment { - LEFT = 'LEFT', - RIGHT = 'RIGHT', -} - -const StyledMenuIcon = styled(MenuIcon)` - path { - stroke: ${({ theme }) => theme.text1}; - } -` - -export const StyledMenuButton = styled.button` - width: 100%; - //height: 100%; - border: none; - //background-color: transparent; - margin: 0; - //padding: 0; - height: 35px; - background-color: ${({ theme }) => theme.bg3}; - //border: 1px solid ${({ theme }) => theme.bg0}; - padding: 0.15rem 0.5rem; - border-radius: 0.5rem; - - :hover, - :focus { - cursor: pointer; - outline: none; - background-color: ${({ theme }) => theme.bg4}; - } - - svg { - margin-top: 2px; - } -` - -export const UNIbutton = styled(ButtonPrimary)` - background-color: ${({ theme }) => theme.bg3}; - background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2; - border: none; -` - -export const StyledMenu = styled.div` - margin-left: 0.5rem; // mod - display: flex; - justify-content: center; - align-items: center; - position: relative; - border: none; - text-align: left; -` - -export const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>` - min-width: 8.125rem; - background-color: ${({ theme }) => theme.bg3}; - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), - 0px 24px 32px rgba(0, 0, 0, 0.01); - border-radius: 12px; - padding: 0.5rem; - display: flex; - flex-direction: column; - font-size: 1rem; - position: absolute; - top: 3rem; - right: 0rem; - z-index: 100; - - ${({ flyoutAlignment = FlyoutAlignment.RIGHT }) => - flyoutAlignment === FlyoutAlignment.RIGHT - ? css` - right: 0rem; - ` - : css` - left: 0rem; - `}; - ${({ theme }) => theme.mediaWidth.upToMedium` - top: -17.25rem; - `}; -` - -export const MenuItemBase = css` - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - //justify-content: space-between; - color: ${({ theme }) => theme.text2}; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } - > svg { - margin-right: 8px; - } -` - -export const MenuItem = styled(ExternalLink)` - ${MenuItemBase} -` - -export const InternalMenuItem = styled(Link)` - flex: 1; - padding: 0.5rem 0.5rem; - color: ${({ theme }) => theme.text2}; - font-weight: 500; // mod - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } - > svg { - margin-right: 8px; - } -` - -/* const InternalLinkMenuItem = styled(InternalMenuItem)` - display: flex; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - justify-content: space-between; - text-decoration: none; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } -` - -const ToggleMenuItem = styled.button` - background-color: transparent; - margin: 0; - padding: 0; - border: none; - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - padding: 0.5rem 0.5rem; - justify-content: space-between; - font-size: 1rem; - font-weight: 500; - color: ${({ theme }) => theme.text2}; - :hover { - color: ${({ theme }) => theme.text1}; - cursor: pointer; - text-decoration: none; - } -` - -function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) { - const { to, onClick } = useLocationLinkProps(locale) - - if (!to) return null - - return ( - -
{LOCALE_LABEL[locale]}
- {active && } - - ) -} - -function LanguageMenu({ close }: { close: () => void }) { - const activeLocale = useActiveLocale() - - return ( - - - - - {SUPPORTED_LOCALES.map((locale) => ( - - ))} - - ) -} */ - -export default function Menu(props: { children?: React.ReactNode } & WithClassName) { - // const { account, chainId } = useActiveWeb3React() - - const node = useRef() - const open = useModalOpen(ApplicationModal.MENU) - const toggleMenu = useToggleModal(ApplicationModal.MENU) - useOnClickOutside(node, open ? toggleMenu : undefined) - /* const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY) - const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM) - const showUNIClaimOption = Boolean(!!account && !!chainId && !L2_CHAIN_IDS.includes(chainId)) - const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET] - - const [darkMode, toggleDarkMode] = useDarkModeManager() - - const [menu, setMenu] = useState<'main' | 'lang'>('main') - - useEffect(() => { - setMenu('main') - }, [open]) - */ - return ( - <> - {/* // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */} - - - - - - {open && - /* (() => { - switch (menu) { - case 'lang': - return setMenu('main')} /> - case 'main': - default: - return ( - - -
- About -
- - - -
- Help Center -
- - - -
- Request Features -
- - - -
- Discord -
- - - setMenu('lang')}> -
- Language -
- - - toggleDarkMode()}> -
{darkMode ? Light Theme : Dark Theme}
- {darkMode ? : } - - -
- Docs -
- - - togglePrivacyPolicy()}> -
- Legal & Privacy -
- - - {showUNIClaimOption && ( - - Claim UNI - - )} - - ) - } - })()} */ - props?.children} - - {/* */} - - ) -} - -interface NewMenuProps { - flyoutAlignment?: FlyoutAlignment - ToggleUI?: React.FunctionComponent - menuItems: { - content: any - link: string - external: boolean - }[] -} - -const NewMenuFlyout = styled(MenuFlyout)` - top: 3rem !important; -` -const NewMenuItem = styled(InternalMenuItem)` - width: max-content; - text-decoration: none; -` - -const ExternalMenuItem = styled(MenuItem)` - width: max-content; - text-decoration: none; -` - -export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => { - const node = useRef() - const open = useModalOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS) - const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS) - useOnClickOutside(node, open ? toggle : undefined) - const ToggleElement = ToggleUI || StyledMenuIcon - return ( - - - {open && ( - - {menuItems.map(({ content, link, external }, i) => - external ? ( - - {content} - - ) : ( - - {content} - - ) - )} - - )} - - ) -} diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx deleted file mode 100644 index 164f6d3dd8..0000000000 --- a/src/custom/components/Menu/index.tsx +++ /dev/null @@ -1,390 +0,0 @@ -import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather' - -import MenuMod, { - MenuItem, - InternalMenuItem, - MenuFlyout as MenuFlyoutUni, - MenuItemBase, - StyledMenuButton, -} from './MenuMod' -import { useToggleModal } from 'state/application/hooks' -import styled from 'styled-components/macro' -import { useActiveWeb3React } from 'hooks/web3' - -import { Separator as SeparatorBase } from 'components/SearchModal/styleds' -import { CONTRACTS_CODE_LINK, DISCORD_LINK, DOCS_LINK, DUNE_DASHBOARD_LINK, TWITTER_LINK } from 'constants/index' -import cowRunnerImage from 'assets/cow-swap/game.gif' -import ninjaCowImage from 'assets/cow-swap/ninja-cow.png' -import { ApplicationModal } from 'state/application/reducer' -import { getExplorerAddressLink } from 'utils/explorer' -import { useHasOrders } from 'api/gnosisProtocol/hooks' -import { useHistory } from 'react-router-dom' -import CowBalanceButton, { Wrapper as BalanceButtonWrapper } from 'components/CowBalanceButton' - -import twitterImage from 'assets/cow-swap/twitter.svg' -import discordImage from 'assets/cow-swap/discord.svg' -import SVG from 'react-inlinesvg' - -export * from './MenuMod' - -const ResponsiveInternalMenuItem = styled(InternalMenuItem)` - display: none; - - ${({ theme }) => theme.mediaWidth.upToLarge` - display: flex; - `}; -` - -const MenuItemResponsiveBase = styled.div` - ${MenuItemBase} - display: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - display: flex; - `}; -` - -const MenuItemResponsive = styled(MenuItemResponsiveBase)` - font-weight: 500; - flex: 0 1 auto; - padding: 16px; - font-size: 18px; - - svg { - width: 18px; - height: 18px; - object-fit: contain; - margin: 0 8px 0 0; - } -` - -export const StyledMenu = styled(MenuMod)` - hr { - margin: 15px 0; - } - - ${MenuItem}, - ${InternalMenuItem}, - ${MenuItemResponsive} { - color: ${({ theme }) => theme.header.menuFlyout.color}; - background: ${({ theme }) => theme.header.menuFlyout.background}; - font-size: 16px; - width: 100%; - - ${({ theme }) => theme.mediaWidth.upToSmall` - padding: 16px; - `}; - - &:hover { - color: ${({ theme }) => theme.header.menuFlyout.colorHover}; - background: ${({ theme }) => theme.header.menuFlyout.colorHoverBg}; - } - } - - ${InternalMenuItem} > a > svg { - width: 18px; - height: 18px; - stroke: transparent; - - > path { - fill: ${({ theme }) => theme.header.menuFlyout.color}; - } - } - - span[aria-label='Play CowGame'] > img { - width: 25px; - height: 20px; - object-fit: contain; - padding: 0 6px 0 0; - } - - ${BalanceButtonWrapper} { - margin: 0 0 12px; - display: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - display: flex; - margin: 0 12px 12px; - width: 100%; - height: 56px; - justify-content: center; - font-size: 19px; - - > span { - height: 30px; - width: 30px; - border-radius: 30px; - margin: 0 5px 0 0; - } - `} - } - - ${StyledMenuButton} { - height: 38px; - border-radius: 12px; - - ${({ theme }) => theme.mediaWidth.upToSmall` - &::before, - &::after { - content: ''; - position: absolute; - left: -1px; - top: -1px; - background: ${({ theme }) => - `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`}; - background-size: 800%; - width: calc(100% + 2px); - height: calc(100% + 2px); - z-index: -1; - animation: glow 50s linear infinite; - transition: background-position 0.3s ease-in-out; - border-radius: 12px; - } - - &::after { - filter: blur(8px); - } - - &:hover::before, - &:hover::after { - animation: glow 12s linear infinite; - } - } - - `}; -` - -const Policy = styled(InternalMenuItem).attrs((attrs) => ({ - ...attrs, -}))` - font-size: 0.8em; - text-decoration: underline; -` - -const MenuFlyout = styled(MenuFlyoutUni)` - min-width: 240px; - box-shadow: 0 0 100vh 100vw rgb(0 0 0 / 25%); - top: calc(100% + 16px); - order: 1; - - ${({ theme }) => theme.mediaWidth.upToSmall` - top: 0; - left: 0; - position: fixed; - height: 100%; - width: 100%; - border-radius: 0; - box-shadow: none; - overflow-y: auto; - flex-flow: row wrap; - padding: 12px 0 100px; - align-items: flex-start; - align-content: flex-start; - `}; - - > a:not(${ResponsiveInternalMenuItem}) { - display: flex; - } - - > a { - transition: background 0.2s ease-in-out; - align-items: center; - text-decoration: none; - - ${({ theme }) => theme.mediaWidth.upToSmall` - flex: 0 1 auto; - padding: 16px; - font-size: 18px; - `}; - - > span { - display: flex; - align-items: center; - } - } - - > a:hover { - background: ${({ theme }) => theme.disabled}; - border-radius: 6px; - } - - > a > span > svg { - width: 18px; - height: 18px; - object-fit: contain; - margin: 0 8px 0 0; - } -` -export const StyledSVG = styled(SVG)` - fill: ${({ theme }) => theme.text1}; -` - -export const Separator = styled(SeparatorBase)` - background-color: ${({ theme }) => theme.disabled}; - margin: 0.3rem auto; - width: 90%; - - ${({ theme }) => theme.mediaWidth.upToMedium` - width: 100%; - margin: 16px auto; - `}; -` - -export const CloseMenu = styled.button` - display: grid; - align-items: center; - background: ${({ theme }) => theme.header.menuFlyout.closeButtonBg}; - border: 0; - color: ${({ theme }) => theme.black}; - height: 36px; - position: sticky; - top: 0; - cursor: pointer; - border-radius: 6px; - justify-content: center; - padding: 0; - margin: 8px 0 0; - - ${({ theme }) => theme.mediaWidth.upToSmall` - height: 56px; - border-radius: 0; - margin: 0; - width: 100%; - position: fixed; - bottom: 0; - top: initial; - `}; - - &::after { - content: '✕'; - display: block; - font-size: 20px; - margin: 0; - - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 0 14px 0 0; - font-size: 24px; - `}; - } -` - -interface MenuProps { - darkMode: boolean - toggleDarkMode: () => void -} - -export function Menu({ darkMode, toggleDarkMode }: MenuProps) { - const { account, chainId } = useActiveWeb3React() - const hasOrders = useHasOrders(account) - const showOrdersLink = account && hasOrders - const close = useToggleModal(ApplicationModal.MENU) - const history = useHistory() - const handleBalanceButtonClick = () => { - close() - history.push('/profile') - } - - return ( - - - - - - Swap - - - Profile - - - - About - - - - - FAQ - - - - - Docs - - - - - Stats - - - - - - {showOrdersLink && ( - - - - )} - - - - - - - - - - - - - - - - Play Cow MEV Slicer - {' '} - MEV Slicer - - - - - Play Cow Runner Game - {' '} - Cow Runner - - toggleDarkMode()}> - {darkMode ? ( - <> - Dark Theme - - ) : ( - <> - - Light Theme - - )} - - - - Terms and conditions - - {/* - Privacy policy - Cookie policy - */} - - - - - ) -} - -export default Menu diff --git a/src/custom/components/MenuDropdown/index.tsx b/src/custom/components/MenuDropdown/index.tsx new file mode 100644 index 0000000000..a055511b5c --- /dev/null +++ b/src/custom/components/MenuDropdown/index.tsx @@ -0,0 +1,34 @@ +import { useState, useRef } from 'react' +import { MenuFlyout, Content } from './styled' +import IMAGE_CARRET_DOWN from 'assets/cow-swap/carret-down.svg' +import SVG from 'react-inlinesvg' +import { useMediaQuery, LargeAndUp } from 'hooks/useMediaQuery' +import { useOnClickOutside } from 'hooks/useOnClickOutside' + +interface MenuProps { + title: string + children: React.ReactNode +} + +export function Menu({ title, children }: MenuProps) { + const isLargeAndUp = useMediaQuery(LargeAndUp) + const node = useRef() + const [showMenu, setShowMenu] = useState(false) + + const handleOnClick = () => { + setShowMenu((showMenu) => !showMenu) + } + + useOnClickOutside(node, () => isLargeAndUp && setShowMenu(false)) // only trigger on large screens + + return ( + + + {showMenu && {children}} + + ) +} + +export default Menu diff --git a/src/custom/components/MenuDropdown/styled.ts b/src/custom/components/MenuDropdown/styled.ts new file mode 100644 index 0000000000..951e34f995 --- /dev/null +++ b/src/custom/components/MenuDropdown/styled.ts @@ -0,0 +1,133 @@ +import styled from 'styled-components/macro' + +export const MenuFlyout = styled.ol` + display: flex; + padding: 0; + margin: 0; + position: relative; + + > button { + &.expanded { + border: none; + } + + &:hover { + &::after { + content: ''; + display: block; + position: absolute; + height: 18px; + width: 100%; + bottom: -18px; + left: 0; + background: transparent; + + ${({ theme }) => theme.mediaWidth.upToLarge` + content: none; + `}; + } + } + + > svg { + margin: 0 0 0 3px; + width: 16px; + height: 6px; + object-fit: contain; + } + + > svg.expanded { + transition: transform 0.3s ease-in-out; + transform: rotate(180deg); + } + } +` + +export const Content = styled.div` + display: flex; + position: absolute; + top: 100%; + left: 0; + border-radius: 16px; + background: ${({ theme }) => theme.bg4}; + box-shadow: 0 12px 18px ${({ theme }) => theme.bg5}; + padding: 32px; + gap: 62px; + margin: 12px 0 0; + + ${({ theme }) => theme.mediaWidth.upToLarge` + box-shadow: none; + background: transparent; + padding: 0; + position: relative; + top: initial; + left: initial; + border-radius: 0; + display: flex; + flex-flow: column wrap; + `}; + + > div { + display: flex; + flex-flow: column wrap; + } +` + +export const MenuTitle = styled.b` + font-size: 12px; + text-transform: uppercase; + font-weight: 600; + opacity: 0.75; + letter-spacing: 2px; + display: flex; + margin: 0 0 6px; +` + +export const MenuSection = styled.div` + display: flex; + flex-flow: column wrap; + align-items: flex-start; + align-content: flex-start; + justify-content: flex-start; + justify-items: flex-start; + margin: 0; + gap: 16px; + + a, + button { + display: flex; + background: transparent; + appearance: none; + outline: 0; + border: 0; + cursor: pointer; + font-size: 15px; + white-space: nowrap; + font-weight: 500; + margin: 0; + padding: 0; + color: ${({ theme }) => theme.text1}; + gap: 12px; + + &:hover { + text-decoration: underline; + font-weight: 500; + } + + &.ACTIVE { + font-weight: bold; + } + } + + a > svg, + a > img { + width: 18px; + height: auto; + max-height: 21px; + object-fit: contain; + color: ${({ theme }) => theme.text1}; + } + + a > svg > path { + fill: ${({ theme }) => theme.text1}; + } +` diff --git a/src/custom/components/Modal/index.ts b/src/custom/components/Modal/index.ts index f5faae42b2..5cb9d6f6a8 100644 --- a/src/custom/components/Modal/index.ts +++ b/src/custom/components/Modal/index.ts @@ -13,10 +13,10 @@ export const GpModal = styled(Modal)<{ }>` > [data-reach-dialog-content] { background-color: ${({ backgroundColor, theme }) => (backgroundColor ? backgroundColor : theme.bg1)}; - max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '470px')}; - border: ${({ border }) => (border ? border : 'inherit')}; + max-width: ${({ maxWidth = 470 }) => `${maxWidth}px`}; + border: ${({ border = 'inherit' }) => `${border}`}; z-index: 100; - padding: ${({ padding }) => (padding ? padding : 'none')}; + padding: ${({ padding = 'none' }) => `${padding}`}; margin: auto; ${({ theme }) => theme.mediaWidth.upToSmall` diff --git a/src/custom/components/OrdersPanel/index.tsx b/src/custom/components/OrdersPanel/index.tsx index 7a8cf1a66a..f6daa24f28 100644 --- a/src/custom/components/OrdersPanel/index.tsx +++ b/src/custom/components/OrdersPanel/index.tsx @@ -23,7 +23,7 @@ const SideBar = styled.div` margin: auto; bottom: 0; left: 0; - z-index: 99; + z-index: 102; padding: 0; cursor: default; overflow-y: auto; // fallback for 'overlay' @@ -147,10 +147,10 @@ const isConfirmed = (data: TransactionAndOrder) => data.status === OrderStatus.FULFILLED || data.status === OrderStatus.EXPIRED || data.status === OrderStatus.CANCELLED export interface OrdersPanelProps { - closeOrdersPanel: () => void + handleCloseOrdersPanel: () => void } -export default function OrdersPanel({ closeOrdersPanel }: OrdersPanelProps) { +export default function OrdersPanel({ handleCloseOrdersPanel }: OrdersPanelProps) { const walletInfo = useWalletInfo() const toggleWalletModal = useWalletModalToggle() @@ -177,12 +177,12 @@ export default function OrdersPanel({ closeOrdersPanel }: OrdersPanelProps) { return ( <> - +
Account - +
diff --git a/src/custom/components/TransactionConfirmationModal/index.tsx b/src/custom/components/TransactionConfirmationModal/index.tsx index 2ef8b47e13..3242d3162e 100644 --- a/src/custom/components/TransactionConfirmationModal/index.tsx +++ b/src/custom/components/TransactionConfirmationModal/index.tsx @@ -21,6 +21,7 @@ import { ColumnCenter } from 'components/Column' import { getStatusIcon } from 'components/AccountDetails' import { shortenAddress } from 'utils' import { getChainCurrencySymbols } from 'utils/gnosis_chain/hack' +import { Routes } from 'constants/routes' const Wrapper = styled.div` width: 100%; @@ -550,7 +551,7 @@ export function TransactionSubmittedContent({ )} - + Play the Cow Runner Game! diff --git a/src/custom/components/WalletModal/index.tsx b/src/custom/components/WalletModal/index.tsx index af3cbc021f..3e5be9a00f 100644 --- a/src/custom/components/WalletModal/index.tsx +++ b/src/custom/components/WalletModal/index.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components/macro' import WalletModalMod, { WalletModalProps } from './WalletModalMod' import { ExternalLink } from 'theme' import { Trans } from '@lingui/macro' +import { Routes } from 'constants/routes' // export * from '@src/components/WalletModal' @@ -15,7 +16,7 @@ function CustomTerms() { By connecting a wallet, you agree to GnosisDAO's{' '} - Terms & Conditions and acknowledge that you have + Terms & Conditions and acknowledge that you have read, understood, and agree to them.{' '} diff --git a/src/custom/components/Web3Status/Web3StatusMod.tsx b/src/custom/components/Web3Status/Web3StatusMod.tsx index f7209b9d17..28c63ac5ac 100644 --- a/src/custom/components/Web3Status/Web3StatusMod.tsx +++ b/src/custom/components/Web3Status/Web3StatusMod.tsx @@ -148,12 +148,10 @@ function Sock() { export function Web3StatusInner({ pendingCount, StatusIconComponent, - openOrdersPanel, // mod thereWasAProvider, //mod }: { pendingCount?: number StatusIconComponent: (props: { connector: AbstractConnector }) => JSX.Element | null - openOrdersPanel: () => void // mod thereWasAProvider: boolean //mod }) { const { account, connector, error } = useWeb3React() @@ -179,7 +177,6 @@ export function Web3StatusInner({ {hasPendingTransactions ? ( diff --git a/src/custom/components/Web3Status/index.tsx b/src/custom/components/Web3Status/index.tsx index 80e0e6f978..4dfed13a82 100644 --- a/src/custom/components/Web3Status/index.tsx +++ b/src/custom/components/Web3Status/index.tsx @@ -11,35 +11,39 @@ import { STORAGE_KEY_LAST_PROVIDER } from 'constants/index' export const Wrapper = styled.div` color: ${({ theme }) => theme.wallet?.color}; + height: 40px; width: 100%; display: flex; + padding: 0; + margin: 0; justify-content: center; - button { - height: 38px; - max-width: 180px; - ${({ theme }) => theme.mediaWidth.upToVerySmall` - max-width: 100%; - `}; - > p { - font-size: 15px; + ${({ theme }) => theme.mediaWidth.upToMedium` + width: auto; + height: 100%; + margin: 0 0 0 auto; + `}; - ${({ theme }) => theme.mediaWidth.upToExtraSmall` - font-size: 13px; - `}; - } + button { + height: auto; + border-radius: 21px; + padding: 6px 12px; + width: max-content; } ${Web3StatusConnected} { + border-radius: 21px; color: ${({ theme }) => theme.wallet?.color}; background: ${({ theme }) => theme.wallet?.background}; - height: 38px; - border: 1px solid transparent; + height: 100%; + width: 100%; + border: 0; box-shadow: none; + padding: 6px 8px; transform: none; &:hover { - border: 1px solid ${({ theme }) => theme.primary1}; + border: 0; } > div > svg > path { @@ -48,10 +52,6 @@ export const Wrapper = styled.div` } ${Text} { - ${({ theme }) => theme.mediaWidth.upToExtraSmall` - font-size: 13px; - margin: 0 0.5rem 0 0.25rem; - `} } ` @@ -66,11 +66,7 @@ function StatusIcon({ connector }: { connector: AbstractConnector }): JSX.Elemen return getStatusIcon(connector, walletInfo) } -interface Web3StatusProps { - openOrdersPanel: () => void -} - -export default function Web3Status({ openOrdersPanel }: Web3StatusProps) { +export default function Web3Status() { const walletInfo = useWalletInfo() const latestProvider = localStorage.getItem(STORAGE_KEY_LAST_PROVIDER) // Returns all RECENT (last day) transaction and orders in 2 arrays: pending and confirmed @@ -97,7 +93,6 @@ export default function Web3Status({ openOrdersPanel }: Web3StatusProps) { diff --git a/src/custom/constants/index.ts b/src/custom/constants/index.ts index ea165fc98b..e5ffbc0c0b 100644 --- a/src/custom/constants/index.ts +++ b/src/custom/constants/index.ts @@ -110,7 +110,7 @@ export const RAW_CODE_LINK = 'https://raw.githubusercontent.com/' + GITHUB_REPOS export const DOCS_LINK = 'https://docs.cow.fi' export const CONTRACTS_CODE_LINK = 'https://github.com/cowprotocol/contracts' export const DISCORD_LINK = 'https://discord.com/invite/cowprotocol' -export const DUNE_DASHBOARD_LINK = 'https://duneanalytics.com/gnosis.protocol/Gnosis-Protocol-V2' +export const DUNE_DASHBOARD_LINK = 'https://dune.com/gnosis.protocol/Gnosis-Protocol-V2' export const TWITTER_LINK = 'https://twitter.com/mevprotection' export const GPAUDIT_LINK = 'https://github.com/cowprotocol/contracts/blob/main/audits/GnosisProtocolV2May2021.pdf' export const FLASHBOYS_LINK = 'https://arxiv.org/abs/1904.05234' diff --git a/src/custom/constants/mainMenu.ts b/src/custom/constants/mainMenu.ts new file mode 100644 index 0000000000..ed4288dce7 --- /dev/null +++ b/src/custom/constants/mainMenu.ts @@ -0,0 +1,80 @@ +import { Routes } from 'constants/routes' +import { DUNE_DASHBOARD_LINK, CONTRACTS_CODE_LINK, DOCS_LINK, DISCORD_LINK, TWITTER_LINK } from 'constants/index' + +// Assets +import IMAGE_DOCS from 'assets/cow-swap/doc.svg' +import IMAGE_INFO from 'assets/cow-swap/info.svg' +import IMAGE_CODE from 'assets/cow-swap/code.svg' +import IMAGE_DISCORD from 'assets/cow-swap/discord.svg' +import IMAGE_TWITTER from 'assets/cow-swap/twitter.svg' +import IMAGE_PIE from 'assets/cow-swap/pie.svg' +import IMAGE_SLICER from 'assets/cow-swap/ninja-cow.png' +import IMAGE_GAME from 'assets/cow-swap/game.gif' + +export interface MAIN_MENU_TYPE { + title: string + url?: string + externalURL?: boolean + items?: { + sectionTitle?: string + links: { + title?: string + url?: string // If URL is an internal route + externalURL?: boolean // If URL is external + icon?: string // If icon uses a regular tag + iconSVG?: string // If icon is a inline component + action?: string // Special purpose flag for non-regular links + }[] + }[] +} + +export const FAQ_MENU = [ + { title: 'Overview', url: Routes.FAQ }, + { title: 'Protocol', url: Routes.FAQ_PROTOCOL }, + { title: 'Token', url: Routes.FAQ_TOKEN }, + { title: 'Trading', url: Routes.FAQ_TRADING }, + { title: 'Affiliate', url: Routes.FAQ_AFFILIATE }, +] + +export const MAIN_MENU = [ + { title: 'Swap', url: Routes.SWAP }, + { title: 'Account', url: Routes.ACCOUNT }, + { + title: 'FAQ', + items: [ + { + links: FAQ_MENU, + }, + ], + }, + { + title: 'More', + items: [ + { + sectionTitle: 'Overview', + links: [ + { title: 'Documentation', url: DOCS_LINK, externalURL: true, iconSVG: IMAGE_DOCS }, + { title: 'About', url: Routes.ABOUT, iconSVG: IMAGE_INFO }, + { title: 'Statistics', url: DUNE_DASHBOARD_LINK, externalURL: true, iconSVG: IMAGE_PIE }, + { title: 'Contract', url: CONTRACTS_CODE_LINK, externalURL: true, iconSVG: IMAGE_CODE }, + ], + }, + { + sectionTitle: 'Community', + links: [ + { title: 'Discord', url: DISCORD_LINK, externalURL: true, iconSVG: IMAGE_DISCORD }, + { title: 'Twitter', url: TWITTER_LINK, externalURL: true, iconSVG: IMAGE_TWITTER }, + ], + }, + { + sectionTitle: 'Other', + links: [ + { action: 'setColorMode' }, + { title: 'CoW Runner', url: Routes.PLAY_COWRUNNER, icon: IMAGE_GAME }, + { title: 'MEV Slicer', url: Routes.PLAY_MEVSLICER, icon: IMAGE_SLICER }, + { title: 'Terms and Conditions', url: Routes.TERMS_CONDITIONS, iconSVG: IMAGE_DOCS }, + ], + }, + ], + }, +] diff --git a/src/custom/constants/routes.ts b/src/custom/constants/routes.ts new file mode 100644 index 0000000000..1c59cd8ceb --- /dev/null +++ b/src/custom/constants/routes.ts @@ -0,0 +1,24 @@ +// ENUM with routes +export enum Routes { + HOME = '/', + SWAP = '/swap', + SWAP_OUTPUT_CURRENCY = '/swap/:outputCurrency', + SEND = '/send', + ACCOUNT = '/account', + ABOUT = '/about', + PRIVACY_POLICY = '/privacy-policy', + COOKIE_POLICY = '/cookie-policy', + TERMS_CONDITIONS = '/terms-and-conditions', + FAQ = '/faq', + FAQ_PROTOCOL = '/faq/protocol', + FAQ_TOKEN = '/faq/token', + FAQ_TRADING = '/faq/trading', + FAQ_AFFILIATE = '/faq/affiliate', + PLAY_COWRUNNER = '/play/cow-runner', + PLAY_MEVSLICER = '/play/mev-slicer', + ANYSWAP_AFFECTED = '/anyswap-affected-users', + CHAT = '/chat', + DOCS = '/docs', + STATS = '/stats', + TWITTER = '/twitter', +} diff --git a/src/custom/constants/tokens/index.ts b/src/custom/constants/tokens/index.ts index aeb888b3d3..6efd4eb983 100644 --- a/src/custom/constants/tokens/index.ts +++ b/src/custom/constants/tokens/index.ts @@ -151,7 +151,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 = { [SupportedChainId.MAINNET]: '0x64646f112FfD6F1B7533359CFaAF7998F23C8c40', diff --git a/src/custom/hooks/useMediaQuery.ts b/src/custom/hooks/useMediaQuery.ts new file mode 100644 index 0000000000..1b2ab710eb --- /dev/null +++ b/src/custom/hooks/useMediaQuery.ts @@ -0,0 +1,25 @@ +import { useState, useEffect } from 'react' +import { MEDIA_WIDTHS } from 'theme' + +export const useMediaQuery = (query: string) => { + const [matches, setMatches] = useState(false) + + useEffect(() => { + const media = window.matchMedia(query) + if (media.matches !== matches) { + setMatches(media.matches) + } + const listener = () => setMatches(media.matches) + window.addEventListener('resize', listener) + return () => window.removeEventListener('resize', listener) + }, [matches, query]) + + return matches +} + +export const upToSmall = `(max-width: ${MEDIA_WIDTHS.upToSmall}px)` +export const isMediumOnly = `(min-width: ${MEDIA_WIDTHS.upToSmall + 1}px) and (max-width: ${MEDIA_WIDTHS.upToMedium}px)` +export const upToMedium = `(max-width: ${MEDIA_WIDTHS.upToMedium}px)` +export const isLargeOnly = `(min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${MEDIA_WIDTHS.upToLarge}px)` +export const upToLarge = `(max-width: ${MEDIA_WIDTHS.upToLarge}px)` +export const LargeAndUp = `(min-width: ${MEDIA_WIDTHS.upToLarge + 1}px)` diff --git a/src/custom/pages/About/index.tsx b/src/custom/pages/About/index.tsx index ceacdd92ae..35f06c4b32 100644 --- a/src/custom/pages/About/index.tsx +++ b/src/custom/pages/About/index.tsx @@ -8,6 +8,7 @@ import { MEV_TOTAL, FLASHBOTS_LINK } from 'constants/index' import diagramIMG from 'assets/cow-swap/cowswap-diagram.png' import gaslessIMG from 'assets/cow-swap/gasless.png' import mevIMG from 'assets/cow-swap/mev.png' +import { Routes } from 'constants/routes' const ExternalLink = styled(ExternalLinkTheme)`` @@ -103,7 +104,7 @@ export default function About() {

Do you want to know more?

- Head over to the FAQ + Head over to the FAQ

diff --git a/src/custom/pages/Profile/AddressSelector.tsx b/src/custom/pages/Account/AddressSelector.tsx similarity index 100% rename from src/custom/pages/Profile/AddressSelector.tsx rename to src/custom/pages/Account/AddressSelector.tsx diff --git a/src/custom/pages/Profile/LockedGnoVesting/claimData/gnosisChain.json b/src/custom/pages/Account/LockedGnoVesting/claimData/gnosisChain.json similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/claimData/gnosisChain.json rename to src/custom/pages/Account/LockedGnoVesting/claimData/gnosisChain.json diff --git a/src/custom/pages/Profile/LockedGnoVesting/claimData/index.test.ts b/src/custom/pages/Account/LockedGnoVesting/claimData/index.test.ts similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/claimData/index.test.ts rename to src/custom/pages/Account/LockedGnoVesting/claimData/index.test.ts diff --git a/src/custom/pages/Profile/LockedGnoVesting/claimData/index.ts b/src/custom/pages/Account/LockedGnoVesting/claimData/index.ts similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/claimData/index.ts rename to src/custom/pages/Account/LockedGnoVesting/claimData/index.ts diff --git a/src/custom/pages/Profile/LockedGnoVesting/claimData/mainnet.json b/src/custom/pages/Account/LockedGnoVesting/claimData/mainnet.json similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/claimData/mainnet.json rename to src/custom/pages/Account/LockedGnoVesting/claimData/mainnet.json diff --git a/src/custom/pages/Profile/LockedGnoVesting/claimData/rinkeby.json b/src/custom/pages/Account/LockedGnoVesting/claimData/rinkeby.json similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/claimData/rinkeby.json rename to src/custom/pages/Account/LockedGnoVesting/claimData/rinkeby.json diff --git a/src/custom/pages/Profile/LockedGnoVesting/hooks.ts b/src/custom/pages/Account/LockedGnoVesting/hooks.ts similarity index 100% rename from src/custom/pages/Profile/LockedGnoVesting/hooks.ts rename to src/custom/pages/Account/LockedGnoVesting/hooks.ts diff --git a/src/custom/pages/Profile/LockedGnoVesting/index.tsx b/src/custom/pages/Account/LockedGnoVesting/index.tsx similarity index 99% rename from src/custom/pages/Profile/LockedGnoVesting/index.tsx rename to src/custom/pages/Account/LockedGnoVesting/index.tsx index 96468ce866..a291a2d9f7 100644 --- a/src/custom/pages/Profile/LockedGnoVesting/index.tsx +++ b/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' diff --git a/src/custom/pages/Profile/ens.ts b/src/custom/pages/Account/ens.ts similarity index 100% rename from src/custom/pages/Profile/ens.ts rename to src/custom/pages/Account/ens.ts diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Account/index.tsx similarity index 98% rename from src/custom/pages/Profile/index.tsx rename to src/custom/pages/Account/index.tsx index 230c390cdd..6f17e4990d 100644 --- a/src/custom/pages/Profile/index.tsx +++ b/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 'pages/Account/LockedGnoVesting/hooks' import { getProviderErrorMessage } from 'utils/misc' const COW_DECIMALS = COW[ChainId.MAINNET].decimals @@ -251,7 +251,7 @@ export default function Profile() { {chainId && chainId === ChainId.MAINNET && } - Profile + Account {isCardsLoading ? ( @@ -500,7 +500,7 @@ export default function Profile() { - {!account && console.log('TODO')} />} + {!account && } diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Account/styled.tsx similarity index 99% rename from src/custom/pages/Profile/styled.tsx rename to src/custom/pages/Account/styled.tsx index c41537ecf5..5b516718e0 100644 --- a/src/custom/pages/Profile/styled.tsx +++ b/src/custom/pages/Account/styled.tsx @@ -25,7 +25,7 @@ export const Wrapper = styled(Page)` padding-top: 16px; display: flex; justify-content: flex-end; - flex-direction: column; + flex-flow: column wrap; margin: 0; background: ${({ theme }) => transparentize(0.3, theme.bg1)}; box-shadow: none; @@ -81,8 +81,6 @@ export const GridWrap = styled.div theme.mediaWidth.upToSmall` grid-template-columns: 1fr; - grid-column-gap: 16px; - grid-row-gap: 16px; grid-column-gap: 0; > :first-child, > :nth-child(2) { diff --git a/src/custom/pages/App/AppMod.tsx b/src/custom/pages/App/AppMod.tsx index d447f44465..16cbbb8b37 100644 --- a/src/custom/pages/App/AppMod.tsx +++ b/src/custom/pages/App/AppMod.tsx @@ -121,7 +121,7 @@ export default function App(props?: { children?: ReactNode }) {
- + diff --git a/src/custom/pages/App/index.tsx b/src/custom/pages/App/index.tsx index a222227841..79437ba7d9 100644 --- a/src/custom/pages/App/index.tsx +++ b/src/custom/pages/App/index.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components/macro' import { RedirectPathToSwapOnly, RedirectToSwap } from 'pages/Swap/redirects' import { Suspense, lazy } from 'react' import { Redirect, Route, Switch } from 'react-router-dom' +import { Routes } from 'constants/routes' import AnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers' import * as Sentry from '@sentry/react' @@ -11,6 +12,7 @@ import { version } from '@src/../package.json' import { environmentName } from 'utils/environments' import RedirectAnySwapAffectedUsers from 'pages/error/AnySwapAffectedUsers/RedirectAnySwapAffectedUsers' import { SENTRY_IGNORED_GP_QUOTE_ERRORS } from 'api/gnosisProtocol/errors/QuoteError' +import { DUNE_DASHBOARD_LINK, DOCS_LINK, DISCORD_LINK, TWITTER_LINK } from 'constants/index' const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN const SENTRY_TRACES_SAMPLE_RATE = process.env.REACT_APP_SENTRY_TRACES_SAMPLE_RATE @@ -20,7 +22,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')) @@ -48,7 +50,7 @@ if (SENTRY_DSN) { export const Wrapper = styled(AppMod)`` -export const BodyWrapper = styled.div` +export const BodyWrapper = styled.div<{ location: { pathname: string } }>` display: flex; flex-direction: row; width: 100%; @@ -58,14 +60,14 @@ export const BodyWrapper = styled.div` flex: auto; z-index: 1; - ${({ theme }) => theme.mediaWidth.upToMedium` - padding: 0 10px 0; - `} - ${({ theme }) => theme.mediaWidth.upToExtraLarge` padding-top: 5vh; align-items: flex-start; `} + + ${({ theme, location }) => theme.mediaWidth.upToMedium` + padding: ${location.pathname === Routes.SWAP ? '0 0 16px' : '0 16px 16px'}; + `} ` export const LoadingWrapper = styled.div` @@ -94,39 +96,30 @@ export default function App() { - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx index 105d986581..fdee5501ae 100644 --- a/src/custom/pages/Claim/ClaimingStatus.tsx +++ b/src/custom/pages/Claim/ClaimingStatus.tsx @@ -30,6 +30,7 @@ import { shortenAddress } from 'utils' import CopyHelper from 'components/Copy' import { ButtonSecondary } from 'components/Button' import { ClaimCommonTypes } from './types' +import { Routes } from 'constants/routes' const COW_TWEET_TEMPLATE = 'I just joined the 🐮 CoWmunity @MEVprotection and claimed my first vCOW tokens! Join me at https://cowswap.exchange/' @@ -133,7 +134,7 @@ export default function ClaimingStatus({ handleChangeAccount }: ClaimNavProps) { {isSelfClaiming && ( - + View vCOW balance diff --git a/src/custom/pages/Faq/AffiliateFaq.tsx b/src/custom/pages/Faq/AffiliateFaq.tsx index 78d7e5fc8c..1360dbe4e9 100644 --- a/src/custom/pages/Faq/AffiliateFaq.tsx +++ b/src/custom/pages/Faq/AffiliateFaq.tsx @@ -1,11 +1,13 @@ import Page, { Content } from 'components/Page' import { LinkScrollable } from 'components/Link' +import { Link } from 'react-router-dom' import { ExternalLinkFaq, Wrapper } from './styled' import { Footer } from '.' import { useToC } from './hooks' import ToC from './ToC' import { FaqMenu } from './Menu' +import { Routes } from 'constants/routes' export default function AffiliateFaq() { const { toc, faqRef } = useToC() @@ -18,11 +20,11 @@ export default function AffiliateFaq() {

Affiliate program

-

What is the Profile page?

+

What is the Account page?

- It is a page where you can see your number of trades and volume that you have done with the wallet you have - connected with. + The account page is where you can see your number of trades and volume, + generated with the wallet you&re connected with.

@@ -97,8 +99,8 @@ export default function AffiliateFaq() { counted.

-

- I shared my referral with a friend, who then also traded. Why do I not see any referral trades in my profile +

+ I shared my referral with a friend, who then also traded. Why do I not see any referral trades in my account page?

@@ -139,10 +141,13 @@ export default function AffiliateFaq() {

- Why do I see more trades and referrals in my profile page than I actually see in the activity list? + Why do I see more trades and referrals in my account page than I actually see in the activity list?

-

The number of trades on the profile page is calculated based on on-chain data.

+

+ The number of trades on the account page is calculated based on on-chain + data. +

We have two publicly facing interfaces where both use the same contracts, which are:

  • diff --git a/src/custom/pages/Faq/Menu.tsx b/src/custom/pages/Faq/Menu.tsx index 121c88987d..4459867f51 100644 --- a/src/custom/pages/Faq/Menu.tsx +++ b/src/custom/pages/Faq/Menu.tsx @@ -1,19 +1,12 @@ import { NavLink } from 'react-router-dom' import { Menu } from './styled' - -const LINKS = [ - { title: 'General', url: '/faq' }, - { title: 'Protocol', url: '/faq/protocol' }, - { title: 'Token', url: '/faq/token' }, - { title: 'Trading', url: '/faq/trading' }, - { title: 'Affiliate', url: '/faq/affiliate' }, -] +import { FAQ_MENU } from 'constants/mainMenu' export function FaqMenu() { return (
      - {LINKS.map(({ title, url }, i) => ( + {FAQ_MENU.map(({ title, url }, i) => (
    • {title} diff --git a/src/custom/pages/Faq/TokenFaq.tsx b/src/custom/pages/Faq/TokenFaq.tsx index f680e19cac..69e8c86667 100644 --- a/src/custom/pages/Faq/TokenFaq.tsx +++ b/src/custom/pages/Faq/TokenFaq.tsx @@ -1,10 +1,12 @@ import Page, { Content } from 'components/Page' import { ExternalLinkFaq, Wrapper } from './styled' +import { Link } from 'react-router-dom' import { Footer } from '.' import { useToC } from './hooks' import ToC from './ToC' import { FaqMenu } from './Menu' +import { Routes } from 'constants/routes' export default function TokenFaq() { const { toc, faqRef } = useToC() @@ -51,9 +53,10 @@ export default function TokenFaq() {

      {' '} - Directly in the CowSwap UI. Simply click on the profile section at the top left of the page, or in the menu - if you are on mobile, and you will be redirected to a page where you can see your total combined balance for - COW and vCOW and convert them instantly. + Directly in the CowSwap UI. Simply click on the account menu item at the + top left of the page (desktop) or in the mobile menu. You then will be redirected to the{' '} + account page where you can see your total COW and/or vCOW balance. You will + then be able to convert your vCOW to COW (if applicable).

      What is the purpose of COW Token?

      diff --git a/src/custom/pages/Faq/index.tsx b/src/custom/pages/Faq/index.tsx index 08bdb5032b..f8b26b9297 100644 --- a/src/custom/pages/Faq/index.tsx +++ b/src/custom/pages/Faq/index.tsx @@ -10,6 +10,7 @@ import { FLASHBOTS_LINK, } from 'constants/index' import Page, { Content } from 'components/Page' +import { Routes } from 'constants/routes' import { ExternalLinkFaq, Wrapper, ButtonNav, FooterWrapper } from './styled' import { FaqMenu } from './Menu' import { StyledInternalLink } from 'theme' @@ -37,7 +38,7 @@ export function Footer() { {' '}

      - We really hope you like CowSwap. If you do, Milk it! + We really hope you like CowSwap. If you do, Milk it! 🥛 @@ -179,7 +180,7 @@ export default function Faq() { protocols or dapps, your use is at your own risk.{' '} Please review our{' '} - + Terms and Conditions . diff --git a/src/custom/pages/Faq/styled.tsx b/src/custom/pages/Faq/styled.tsx index 80ac4ba327..d0f3db6690 100644 --- a/src/custom/pages/Faq/styled.tsx +++ b/src/custom/pages/Faq/styled.tsx @@ -131,6 +131,7 @@ export const Menu = styled.div` ${({ theme }) => theme.mediaWidth.upToSmall` padding: 0; position: relative; + margin: 0; `} > ul { diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx index 25700b6eaa..93a66bfe0d 100644 --- a/src/custom/pages/Swap/SwapMod.tsx +++ b/src/custom/pages/Swap/SwapMod.tsx @@ -19,7 +19,7 @@ import ReactGA from 'react-ga4' // import { RouteComponentProps } from 'react-router-dom' import { Text } from 'rebass' // import { TradeState } from 'state/routing/types' -import styled, { ThemeContext } from 'styled-components/macro' +import { ThemeContext } from 'styled-components/macro' import AddressInputPanel from 'components/AddressInputPanel' import { ButtonConfirmed /*, ButtonError, ButtonLight, ButtonPrimary*/ } from 'components/Button' @@ -85,11 +85,12 @@ import { GpEther } from 'constants/tokens' import { SupportedChainId } from 'constants/chains' import CowSubsidyModal from 'components/CowSubsidyModal' import { getProviderErrorMessage, isRejectRequestProviderError } from 'utils/misc' +import { AlertWrapper } from './styleds' // mod -const AlertWrapper = styled.div` - max-width: 460px; - width: 100%; -` +// const AlertWrapper = styled.div` +// max-width: 460px; +// width: 100%; +// ` function reportAnalytics(action: string, label?: string, value?: number) { ReactGA.event({ diff --git a/src/custom/pages/Swap/styleds.tsx b/src/custom/pages/Swap/styleds.tsx index 427d78f998..54a0374f8e 100644 --- a/src/custom/pages/Swap/styleds.tsx +++ b/src/custom/pages/Swap/styleds.tsx @@ -17,4 +17,19 @@ export const StyledAppBody = styled(AppBody)` border: ${({ theme }) => theme.appBody.border}; box-shadow: ${({ theme }) => theme.appBody.boxShadow}; background: ${({ theme }) => theme.bg1}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + border: ${({ theme }) => theme.appBody.borderMobile}; + box-shadow: ${({ theme }) => theme.appBody.boxShadowMobile}; + `}; +` + +export const AlertWrapper = styled.div` + max-width: 460px; + width: 100%; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 26px auto 0; + padding: 0 16px; + `} ` diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx index fb0be1cda3..055b290a37 100644 --- a/src/custom/theme/baseTheme.tsx +++ b/src/custom/theme/baseTheme.tsx @@ -150,9 +150,11 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) { } `, appBody: { - boxShadow: `4px 4px 0px ${colorsTheme.black}`, + boxShadow: `4px 4px 0 ${colorsTheme.black}`, + boxShadowMobile: `0 4px 0 ${colorsTheme.black}`, borderRadius: '16px', border: `3px solid ${colorsTheme.black}`, + borderMobile: 'none', padding: '12px 6px', maxWidth: { normal: '460px', @@ -279,8 +281,8 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) { text: colorsTheme.black, }, wallet: { - color: darkMode ? colorsTheme.text2 : colorsTheme.text1, - background: darkMode ? colorsTheme.white : colorsTheme.bg2, + color: darkMode ? colorsTheme.text1 : colorsTheme.text1, + background: darkMode ? colorsTheme.bg3 : colorsTheme.bg1, }, } } @@ -387,6 +389,18 @@ export const ThemedGlobalStyle = createGlobalStyle` color: ${({ theme }) => theme.text2}; } + // Appzi Container override + ${({ theme }) => theme.mediaWidth.upToMedium` + body[class^='appzi-f-w-open-'] div[id^='appzi-wfo-'] { + transform: none!important; + left: 16px!important; + bottom: 72px!important; + top: initial!important; + right: initial!important; + position: fixed!important; + } + `} + // START - Modal overrides ${HeaderText} { color: ${({ theme }) => theme.text1}; diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts index 8ac88aab38..cf33e2fbd8 100644 --- a/src/custom/theme/styled.d.ts +++ b/src/custom/theme/styled.d.ts @@ -77,8 +77,10 @@ declare module 'styled-components' { } appBody: { boxShadow: string + boxShadowMobile: string borderRadius: string border: string + borderMobile: string padding: string maxWidth: { normal: string diff --git a/src/custom/utils/toggleBodyClass.ts b/src/custom/utils/toggleBodyClass.ts new file mode 100644 index 0000000000..f0971c9a6a --- /dev/null +++ b/src/custom/utils/toggleBodyClass.ts @@ -0,0 +1,15 @@ +export const toggleBodyClass = (className: string) => { + if (!document.body.classList.contains(className)) { + document.body.classList.add(className) + } else { + document.body.classList.remove(className) + } +} + +export const addBodyClass = (className: string) => { + !document.body.classList.contains(className) && document.body.classList.add(className) +} + +export const removeBodyClass = (className: string) => { + document.body.classList.contains(className) && document.body.classList.remove(className) +}