fix: landing page styling of widget (#5917)

src/pages/Landing/index.tsx

@@ -6,6 +6,7 @@ import Card, { CardType } from 'components/About/Card'
 import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants'
 import ProtocolBanner from 'components/About/ProtocolBanner'
 import { BaseButton } from 'components/Button'
+import { useSwapWidgetEnabled } from 'featureFlags/flags/swapWidget'
 import Swap from 'pages/Swap'
 import { parse } from 'qs'
 import { useEffect, useRef, useState } from 'react'
@@ -14,7 +15,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { Link as NativeLink } from 'react-router-dom'
 import { useAppSelector } from 'state/hooks'
 import { useIsDarkMode } from 'state/user/hooks'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 
@@ -255,25 +256,42 @@ const LandingSwapContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  z-index: 1;
 `
 
-const LandingSwap = styled(Swap)`
+const SwapCss = css`
   * {
     pointer-events: none;
   }
 
   &:hover {
-    border: 1px solid ${({ theme }) => theme.accentAction};
     transform: translateY(-4px);
+    transition: ${({ theme }) => `transform ${theme.transition.duration.medium} ${theme.transition.timing.ease}`};
   }
 `
 
-const Link = styled(NativeLink)`
+const LinkCss = css`
   text-decoration: none;
   max-width: 480px;
   width: 100%;
 `
 
+const LandingSwap = styled(Swap)`
+  ${SwapCss}
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.accentAction};
+  }
+`
+
+const Link = styled(NativeLink)`
+  ${LinkCss}
+`
+
+const WidgetLandingLink = styled(NativeLink)`
+  ${LinkCss}
+  ${SwapCss}
+`
+
 export default function Landing() {
   const isDarkMode = useIsDarkMode()
 
@@ -287,6 +305,8 @@ export default function Landing() {
     ignoreQueryPrefix: true,
   })
 
+  const swapWidgetEnabled = useSwapWidgetEnabled()
+
   // This can be simplified significantly once the flag is removed! For now being explicit is clearer.
   useEffect(() => {
     if (queryParams.intro || !selectedWallet) {
@@ -306,9 +326,15 @@ export default function Landing() {
               name={SharedEventName.ELEMENT_CLICKED}
               element={InterfaceElementName.LANDING_PAGE_SWAP_ELEMENT}
             >
-              <Link to="/swap">
-                <LandingSwap />
-              </Link>
+              {swapWidgetEnabled ? (
+                <WidgetLandingLink to="/swap">
+                  <Swap />
+                </WidgetLandingLink>
+              ) : (
+                <Link to="/swap">
+                  <LandingSwap />
+                </Link>
+              )}
             </TraceEvent>
           </LandingSwapContainer>
           <Gradient isDarkMode={isDarkMode} />