fix: Wallet updates (#4498)

* Wallet Polishing
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/components/NavBar/Navbar.tsx

@@ -70,7 +70,7 @@ const Navbar = () => {
   const { pathname } = useLocation()
   const nftFlag = useNftFlag()
 
-  if (windowWidth && windowWidth < breakpoints.xl) {
+  if (windowWidth && windowWidth <= breakpoints.xl) {
     return <MobileNavbar />
   }
 

src/components/WalletDropdown/DefaultMenu.tsx

@@ -35,18 +35,23 @@ const ToggleMenuItem = styled.button`
   cursor: pointer;
   display: flex;
   flex: 1;
+  border-radius: 12px;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   font-weight: 400;
   width: 100%;
-  padding: 12px 16px;
+  padding: 12px 8px;
   color: ${({ theme }) => theme.textSecondary};
   :hover {
     color: ${({ theme }) => theme.textPrimary};
     background-color: ${({ theme }) => theme.backgroundModule};
-    transition: 250ms all ease;
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms all ${timing.in}`};
   }
 `
 
@@ -73,6 +78,7 @@ const IconWrap = styled.span`
 const DefaultMenuWrap = styled.div`
   width: 100%;
   height: 100%;
+  padding: 0 8px;
 `
 
 const DefaultText = styled.span`

src/components/WalletDropdown/IconButton.tsx

@@ -24,7 +24,11 @@ const IconStyles = css`
   color: ${({ theme }) => theme.textPrimary};
   :hover {
     background-color: ${({ theme }) => theme.hoverState};
-    transition: 250ms background-color ease;
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms background-color ${timing.in}`};
 
     ${IconHoverText} {
       opacity: 1;

src/components/WalletDropdown/LanguageMenu.tsx

@@ -18,26 +18,25 @@ const InternalMenuItem = styled(Link)`
   }
 `
 
-const InternalLinkMenuItem = styled(InternalMenuItem)<{ isActive: boolean }>`
+const InternalLinkMenuItem = styled(InternalMenuItem)`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 12px 16px;
   justify-content: space-between;
   text-decoration: none;
-  background-color: ${({ isActive, theme }) => isActive && theme.accentActionSoft};
   color: ${({ theme }) => theme.textPrimary};
   :hover {
     cursor: pointer;
-    background-color: ${({ isActive, theme }) => !isActive && theme.backgroundModule};
-    transition: 250ms background-color ease;
+    background-color: ${({ theme }) => theme.backgroundModule};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms background-color ${timing.in}`};
   }
 `
 
-const LanguageWrap = styled.div`
-  margin-top: 16px;
-`
-
 function LanguageMenuItem({ locale, isActive }: { locale: SupportedLocale; isActive: boolean }) {
   const { to, onClick } = useLocationLinkProps(locale)
   const theme = useTheme()
@@ -45,11 +44,11 @@ function LanguageMenuItem({ locale, isActive }: { locale: SupportedLocale; isAct
   if (!to) return null
 
   return (
-    <InternalLinkMenuItem isActive={isActive} onClick={onClick} to={to}>
+    <InternalLinkMenuItem onClick={onClick} to={to}>
       <Text fontSize={16} fontWeight={400} lineHeight="24px">
         {LOCALE_LABEL[locale]}
       </Text>
-      {isActive && <Check color={theme.accentAction} opacity={1} size={20} />}
+      {isActive && <Check color={theme.accentActive} opacity={1} size={20} />}
     </InternalLinkMenuItem>
   )
 }
@@ -59,11 +58,9 @@ const LanguageMenu = ({ onClose }: { onClose: () => void }) => {
 
   return (
     <SlideOutMenu title={<Trans>Language</Trans>} onClose={onClose}>
-      <LanguageWrap>
       {SUPPORTED_LOCALES.map((locale) => (
         <LanguageMenuItem locale={locale} isActive={activeLocale === locale} key={locale} />
       ))}
-      </LanguageWrap>
     </SlideOutMenu>
   )
 }

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -5,7 +5,24 @@ const Menu = styled.div`
   width: 100%;
   height: 100%;
   font-size: 16px;
-  overflow-y: scroll;
+  overflow: auto;
+
+  // Firefox scrollbar styling
+  scrollbar-width: thin;
+  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
+
+  // safari and chrome scrollbar styling
+  ::-webkit-scrollbar {
+    background: transparent;
+    width: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    margin-top: 40px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.backgroundOutline};
+    border-radius: 8px;
+  }
 `
 
 const Header = styled.span`
@@ -26,7 +43,11 @@ const ClearAll = styled.div`
 
   :hover {
     opacity: 0.6;
-    transition: 250ms opacity ease;
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms opacity ${timing.in}`};
   }
 `
 
@@ -35,7 +56,11 @@ const StyledChevron = styled(ChevronLeft)`
 
   &:hover {
     color: ${({ theme }) => theme.textPrimary};
-    transition: 250ms color ease;
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms color ${timing.in}`};
   }
 `
 

src/components/WalletDropdown/index.tsx

@@ -17,6 +17,8 @@ const WalletWrapper = styled.div`
   top: 60px;
   right: 70px;
   background-color: ${({ theme }) => theme.backgroundSurface};
+  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  box-shadow: ${({ theme }) => theme.deepShadow};
   padding: 16px 0;
 `
 

src/components/Web3Status/index.tsx

@@ -9,7 +9,7 @@ import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
 import { useMemo, useRef } from 'react'
-import { AlertTriangle } from 'react-feather'
+import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
 import styled, { css } from 'styled-components/macro'
@@ -54,10 +54,26 @@ const Web3StatusError = styled(Web3StatusGeneric)`
   }
 `
 
+const Web3StatusConnectNavbar = styled.button<{ faded?: boolean }>`
+  dispay: flex;
+  align-items: center;
+  ${({ theme }) => theme.flexRowNoWrap}
+  background-color: ${({ theme }) => theme.accentActionSoft};
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  padding: 10px 12px;
+
+  :hover,
+  :active,
+  :focus {
+    border: none;
+  }
+`
+
 const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
   background-color: ${({ theme }) => theme.deprecated_primary4};
   border: none;
-
   color: ${({ theme }) => theme.deprecated_primaryText1};
   font-weight: 500;
 
@@ -130,6 +146,43 @@ function Sock() {
   )
 }
 
+const VerticalDivider = styled.div`
+  height: 20px;
+  width: 1px;
+  background-color: ${({ theme }) => theme.accentAction};
+`
+
+const StyledConnect = styled.div`
+  color: ${({ theme }) => theme.accentAction};
+  font-weight: 600;
+  font-size: 16px;
+  margin-right: 8px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms color ${timing.in}`};
+  }
+`
+
+const StyledChevron = styled.span`
+  color: ${({ theme }) => theme.accentAction};
+  height: 24px;
+  margin-left: 4px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms color ${timing.in}`};
+  }
+`
+
 function Web3StatusInner() {
   const { account, connector, chainId, ENSName } = useWeb3React()
   const connectionType = getConnection(connector).type
@@ -141,6 +194,7 @@ function Web3StatusInner() {
   const navbarFlag = useNavBarFlag()
   const toggleWalletDropdown = useToggleWalletDropdown()
   const toggleWalletModal = useToggleWalletModal()
+  const walletIsOpen = useIsOpen()
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
 
@@ -195,11 +249,23 @@ function Web3StatusInner() {
         properties={{ received_swap_quote: validSwapQuote }}
         element={ElementName.CONNECT_WALLET_BUTTON}
       >
+        {navbarFlag === NavBarVariant.Enabled ? (
+          <Web3StatusConnectNavbar faded={!account}>
+            <StyledConnect onClick={toggleWalletModal}>
+              <Trans>Connect</Trans>
+            </StyledConnect>
+            <VerticalDivider />
+            <StyledChevron onClick={toggleWalletDropdown}>
+              {walletIsOpen ? <ChevronUp /> : <ChevronDown />}
+            </StyledChevron>
+          </Web3StatusConnectNavbar>
+        ) : (
           <Web3StatusConnect onClick={toggleWallet} faded={!account}>
             <Text>
               <Trans>Connect Wallet</Trans>
             </Text>
           </Web3StatusConnect>
+        )}
       </TraceEvent>
     )
   }