feat: updated banner (#6355)

* feat: updated banner

* fix: linted

* feat: add download link to overflow menu

* feat: hover animation

* fix: update landing screen hide logic

* feat: added descriptor comment for stopPropogation

* fix: translations & responsiveness of button text

* fix: icon sizing / padding + word casing

* fix: Learn more casing

src/components/AccountDrawer/DownloadButton.tsx

@@ -38,10 +38,17 @@ const MICROSITE_LINK = 'https://wallet.uniswap.org/'
 const openAppStore = () => {
   window.open(APP_STORE_LINK, /* target = */ 'uniswap_wallet_appstore')
 }
-const openWalletMicrosite = () => {
+export const openWalletMicrosite = () => {
   sendAnalyticsEvent(InterfaceEventName.UNISWAP_WALLET_MICROSITE_OPENED)
   window.open(MICROSITE_LINK, /* target = */ 'uniswap_wallet_microsite')
 }
+
+export function openDownloadApp(element: InterfaceElementName) {
+  sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, { element })
+  if (isIOS) openAppStore()
+  else openWalletMicrosite()
+}
+
 // Launches App Store if on an iOS device, else navigates to Uniswap Wallet microsite
 export function DownloadButton({
   onClick,
@@ -55,9 +62,7 @@ export function DownloadButton({
   const onButtonClick = useCallback(() => {
     // handles any actions required by the parent, i.e. cancelling wallet connection attempt or dismissing an ad
     onClick?.()
-    sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, { element })
-    if (isIOS) openAppStore()
-    else openWalletMicrosite()
+    openDownloadApp(element)
   }, [element, onClick])
 
   return (
@@ -66,7 +71,3 @@ export function DownloadButton({
     </BaseButton>
   )
 }
-
-export function LearnMoreButton() {
-  return <BaseButton onClick={openWalletMicrosite}>Learn More</BaseButton>
-}

src/components/Banner/UniswapWalletBanner.tsx

 import { Trans } from '@lingui/macro'
 import { InterfaceElementName } from '@uniswap/analytics-events'
-import { useAccountDrawer } from 'components/AccountDrawer'
-import { DownloadButton, LearnMoreButton } from 'components/AccountDrawer/DownloadButton'
+import { openDownloadApp, openWalletMicrosite } from 'components/AccountDrawer/DownloadButton'
+import { BaseButton } from 'components/Button'
 import { AutoColumn } from 'components/Column'
-import Row, { RowBetween } from 'components/Row'
+import { OpacityHoverState } from 'components/Common'
+import Row from 'components/Row'
 import { useMgtmEnabled } from 'featureFlags/flags/mgtm'
+import { useScreenSize } from 'hooks/useScreenSize'
 import { X } from 'react-feather'
+import { useLocation } from 'react-router-dom'
 import { useHideUniswapWalletBanner } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 import { isIOS } from 'utils/userAgent'
 
-import bannerImageDark from '../../assets/images/uniswapWalletBannerDark.png'
-import bannerImageLight from '../../assets/images/uniswapWalletBannerLight.png'
+import { ReactComponent as AppleLogo } from '../../assets/svg/apple_logo.svg'
+import walletBannerPhoneImageSrc from '../../assets/svg/wallet_banner_phone_image.svg'
 
 const PopupContainer = styled.div<{ show: boolean }>`
-  ${({ show }) => !show && 'display: none'};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
-  box-shadow: ${({ theme }) =>
-    theme.darkMode
-      ? '0px -16px 24px rgba(0, 0, 0, 0.4), 0px -8px 12px rgba(0, 0, 0, 0.4), 0px -4px 8px rgba(0, 0, 0, 0.32)'
-      : '0px -12px 20px rgba(51, 53, 72, 0.04), 0px -6px 12px rgba(51, 53, 72, 0.02), 0px -4px 8px rgba(51, 53, 72, 0.04)'};
+  ${({ show }) => !show && 'display: none'};
 
-  background-image: ${({ theme }) => (theme.darkMode ? `url(${bannerImageDark})` : `url(${bannerImageLight})`)};
+  background: url(${walletBannerPhoneImageSrc});
   background-repeat: no-repeat;
-  background-size: cover;
+  background-position: bottom -1px right 15px;
+  background-size: 166px;
 
-  cursor: pointer;
+  :hover {
+    background-size: 170px;
+  }
+  transition: background-size ${({ theme }) => theme.transition.duration.medium}
+    ${({ theme }) => theme.transition.timing.inOut};
+
+  background-color: ${({ theme }) => theme.promotional};
   color: ${({ theme }) => theme.textPrimary};
   position: fixed;
   z-index: ${Z_INDEX.sticky};
-  transition: ${({
-    theme: {
-      transition: { duration, timing },
-    },
-  }) => `${duration.slow} opacity ${timing.in}`};
-  width: 100%;
-  bottom: 52px;
-  height: 20%;
-`
 
-const InnerContainer = styled.div`
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  justify-content: space-between;
-  height: 100%;
-  padding: 24px 16px;
+  padding: 24px 16px 16px;
+
+  border-radius: 20px;
+  bottom: 20px;
+  right: 20px;
+  width: 390px;
+  height: 164px;
+
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+
+  box-shadow: ${({ theme }) => theme.deepShadow};
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    bottom: 62px;
+  }
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: unset;
+    right: 10px;
+    left: 10px;
+  }
+
+  user-select: none;
 `
 
 const ButtonRow = styled(Row)`
   gap: 16px;
 `
-
 const StyledXButton = styled(X)`
-  color: ${({ theme }) => theme.textSecondary};
-  &:hover {
-    opacity: ${({ theme }) => theme.opacity.hover};
-  }
-  &:active {
-    opacity: ${({ theme }) => theme.opacity.click};
-  }
+  cursor: pointer;
+  position: absolute;
+  top: 21px;
+  right: 17px;
+
+  color: ${({ theme }) => theme.white};
+  ${OpacityHoverState};
+`
+
+const BannerButton = styled(BaseButton)`
+  height: 40px;
+  border-radius: 16px;
+  padding: 10px;
+  ${OpacityHoverState};
 `
 
 export default function UniswapWalletBanner() {
   const [hideUniswapWalletBanner, toggleHideUniswapWalletBanner] = useHideUniswapWalletBanner()
-  const [walletDrawerOpen] = useAccountDrawer()
   const mgtmEnabled = useMgtmEnabled()
+  const location = useLocation()
+  const isLandingScreen = location.search === '?intro=true' || location.pathname === '/'
 
-  const theme = useTheme()
+  const shouldDisplay = Boolean(mgtmEnabled && !hideUniswapWalletBanner && !isLandingScreen)
 
-  const shouldDisplay = Boolean(mgtmEnabled && !walletDrawerOpen && !hideUniswapWalletBanner && isIOS)
+  const screenSize = useScreenSize()
 
   return (
     <PopupContainer show={shouldDisplay}>
-      <InnerContainer>
-        <AutoColumn gap="8px">
-          <RowBetween>
-            <ThemedText.SubHeader>
-              <Trans>Get the power of Uniswap in your pocket</Trans>
-            </ThemedText.SubHeader>
-            <StyledXButton
-              data-testid="uniswap-wallet-banner"
-              color={theme.textSecondary}
-              size={20}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                toggleHideUniswapWalletBanner()
-              }}
-            />
-          </RowBetween>
-          <ThemedText.BodySmall>
-            <Trans>Download in the App Store today.</Trans>{' '}
-          </ThemedText.BodySmall>
-        </AutoColumn>
-
-        <ButtonRow>
-          <LearnMoreButton />
-          <DownloadButton
-            onClick={() => toggleHideUniswapWalletBanner()}
-            element={InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON}
-          />
-        </ButtonRow>
-      </InnerContainer>
+      <StyledXButton
+        data-testid="uniswap-wallet-banner"
+        size={20}
+        onClick={(e) => {
+          // prevent click from bubbling to UI on the page underneath, i.e. clicking a token row
+          e.preventDefault()
+          e.stopPropagation()
+          toggleHideUniswapWalletBanner()
+        }}
+      />
+
+      <AutoColumn gap="8px">
+        <ThemedText.HeadlineMedium fontSize="24px" lineHeight="28px" color="white" maxWidth="60%">
+          <Trans>Uniswap in your pocket</Trans>
+        </ThemedText.HeadlineMedium>
+      </AutoColumn>
+
+      <ButtonRow>
+        {isIOS ? (
+          <>
+            <BannerButton
+              backgroundColor="white"
+              onClick={() => openDownloadApp(InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON)}
+            >
+              <AppleLogo width={14} height={14} />
+              <ThemedText.LabelSmall color="black" marginLeft="5px">
+                {!screenSize['xs'] ? <Trans>Download</Trans> : <Trans>Download app</Trans>}
+              </ThemedText.LabelSmall>
+            </BannerButton>
+
+            <BannerButton backgroundColor="black" onClick={openWalletMicrosite}>
+              <ThemedText.LabelSmall color="white">
+                <Trans>Learn more</Trans>
+              </ThemedText.LabelSmall>
+            </BannerButton>
+          </>
+        ) : (
+          <BannerButton backgroundColor="white" width="125px" onClick={openWalletMicrosite}>
+            <ThemedText.LabelSmall color="black">
+              <Trans>Learn more</Trans>
+            </ThemedText.LabelSmall>
+          </BannerButton>
+        )}
+      </ButtonRow>
     </PopupContainer>
   )
 }

src/components/NavBar/MenuDropdown.tsx

 import { t, Trans } from '@lingui/macro'
+import { InterfaceElementName } from '@uniswap/analytics-events'
+import { openDownloadApp } from 'components/AccountDrawer/DownloadButton'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
+import { useMgtmEnabled } from 'featureFlags/flags/mgtm'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -21,6 +24,7 @@ import { useToggleModal } from 'state/application/hooks'
 import styled, { useTheme } from 'styled-components/macro'
 import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
+import { ReactComponent as AppleLogo } from '../../assets/svg/apple_logo.svg'
 import { ApplicationModal } from '../../state/application/reducer'
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -126,6 +130,8 @@ export const MenuDropdown = () => {
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
 
+  const mgtmEnabled = useMgtmEnabled()
+
   return (
     <>
       <Box position="relative" ref={ref}>
@@ -140,16 +146,29 @@ export const MenuDropdown = () => {
                 <Box display={{ sm: 'none', lg: 'flex', xxl: 'none' }}>
                   <PrimaryMenuRow to="/pool" close={toggleOpen}>
                     <Icon>
-                      <PoolIcon width={24} height={24} color={theme.textSecondary} />
+                      <PoolIcon width={24} height={24} fill={theme.textPrimary} />
                     </Icon>
                     <PrimaryMenuRow.Text>
                       <Trans>Pool</Trans>
                     </PrimaryMenuRow.Text>
                   </PrimaryMenuRow>
                 </Box>
+                <Box
+                  display={mgtmEnabled ? 'flex' : 'none'}
+                  onClick={() => openDownloadApp(InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON)}
+                >
+                  <PrimaryMenuRow close={toggleOpen}>
+                    <Icon>
+                      <AppleLogo width="24px" height="24px" fill={theme.textPrimary} />
+                    </Icon>
+                    <PrimaryMenuRow.Text>
+                      <Trans>Download Uniswap Wallet</Trans>
+                    </PrimaryMenuRow.Text>
+                  </PrimaryMenuRow>
+                </Box>
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
-                    <GovernanceIcon width={24} height={24} color={theme.textSecondary} />
+                    <GovernanceIcon width={24} height={24} color={theme.textPrimary} />
                   </Icon>
                   <PrimaryMenuRow.Text>
                     <Trans>Vote in governance</Trans>
@@ -157,7 +176,7 @@ export const MenuDropdown = () => {
                 </PrimaryMenuRow>
                 <PrimaryMenuRow href="https://info.uniswap.org/#/">
                   <Icon>
-                    <BarChartIcon width={24} height={24} color={theme.textSecondary} />
+                    <BarChartIcon width={24} height={24} color={theme.textPrimary} />
                   </Icon>
                   <PrimaryMenuRow.Text>
                     <Trans>View more analytics</Trans>

src/theme/colors.ts

@@ -83,6 +83,7 @@ export const colors = {
   blue900: '#040E34',
   blueVibrant: '#587BFF',
   // TODO: add magenta 50-900
+  magenta300: '#FD82FF',
   magentaVibrant: '#FC72FF',
   purple300: '#8440F2',
   purple900: '#1C0337',
@@ -119,6 +120,7 @@ const commonTheme = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
   chain_56_background: colors.networkBsc,
+  promotional: colors.magenta300,
 
   brandedGradient: 'linear-gradient(139.57deg, #FF79C9 4.35%, #FFB8E2 96.44%);',
   promotionalGradient: 'radial-gradient(101.8% 4091.31% at 0% 0%, #4673FA 0%, #9646FA 100%);',