diff --git a/.prettierignore b/.prettierignore index d5237f8bc13..74de3d64622 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,9 @@ dist .cache .test +.vercel +.astro +temp node_modules .github .changeset diff --git a/src/components/CCIP/TutorialBlockchainSelector/SetPoolStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/SetPoolStep.tsx index 3f3fd249828..b1fd494d57f 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/SetPoolStep.tsx +++ b/src/components/CCIP/TutorialBlockchainSelector/SetPoolStep.tsx @@ -34,10 +34,12 @@ export const SetPoolStep = ({ chain }: SetPoolStepProps) => { >
  1. - In the "Deploy & Run Transactions" tab, select the TokenAdminRegistry contract in the Contracts drop-down list. + In the "Deploy & Run Transactions" tab, select the TokenAdminRegistry contract in the{" "} + Contracts drop-down list.
  2. - Next to the At Address button, fill in the following contract address, and then click the At Address button. + Next to the At Address button, fill in the following contract address, and then click the{" "} + At Address button.
    Contract: TokenAdminRegistry diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css index c02b64a8445..8b7df65bf76 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css +++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.module.css @@ -192,7 +192,6 @@ .arrowContainer { --touch-target-size: 44px; --animation-timing: cubic-bezier(0.34, 1.56, 0.64, 1); - --arrow-rotation: 0deg; display: flex; align-items: center; @@ -202,37 +201,64 @@ margin-inline: auto; padding-block: 0; padding-inline: 1rem; - cursor: default; position: relative; - outline: none; - writing-mode: horizontal-tb; - text-orientation: mixed; - - /* Performance optimizations */ - contain: layout style; - view-transition-name: arrow; - transform: translateZ(0); - backface-visibility: hidden; - -webkit-font-smoothing: antialiased; - transition: transform 0.2s var(--animation-timing); -} - -/* RTL and vertical writing mode support */ -[dir="rtl"] .arrowContainer, -[writing-mode="vertical-rl"] .arrowContainer { - transform: rotate(var(--arrow-rotation)); + /* Make it purely decorative */ + pointer-events: none; + user-select: none; } .arrow { color: var(--color-text-secondary); - transition: all 0.3s var(--animation-timing); - will-change: transform, opacity; + opacity: 0.7; + transition: opacity 0.3s var(--animation-timing); } .arrowGroup { transform-origin: center; - transition: transform 0.6s var(--animation-timing); +} + +/* Subtle animation */ +@media (prefers-reduced-motion: no-preference) { + .arrowPath { + opacity: 0.7; + animation: subtlePulse 3s var(--animation-timing) infinite; + } + + .arrowLine { + opacity: 0.5; + animation: subtlePulse 3s var(--animation-timing) infinite; + } + + .arrowPath:first-child { + animation-delay: 0s; + } + + .arrowPath:last-child { + animation-delay: 1.5s; + } + + @keyframes subtlePulse { + 0%, + 100% { + opacity: 0.7; + transform: translateX(0); + } + 50% { + opacity: 0.9; + transform: translateX(1px); + } + } +} + +/* RTL Support */ +[dir="rtl"] .arrowContainer { + transform: scaleX(-1); +} + +/* Vertical writing modes */ +[writing-mode="vertical-rl"] .arrowContainer { + transform: rotate(90deg); } /* Interactive States */ diff --git a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx index 059154dcacf..36b3832f38c 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx +++ b/src/components/CCIP/TutorialBlockchainSelector/TutorialBlockchainSelector.tsx @@ -145,18 +145,9 @@ export const TutorialBlockchainSelector = () => {
    { - if (e.key === "Enter" || e.key === " ") { - e.preventDefault() - // Toggle focus state for visual feedback - e.currentTarget.classList.toggle(styles.focused) - } - }} + role="presentation" + aria-hidden="true" + style={{ pointerEvents: "none" }} > { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" - aria-hidden="true" > diff --git a/src/components/QuickLinks/sections/ProductChainTable.tsx b/src/components/QuickLinks/sections/ProductChainTable.tsx index 06a3b3fd329..5d9bbd3ddbb 100644 --- a/src/components/QuickLinks/sections/ProductChainTable.tsx +++ b/src/components/QuickLinks/sections/ProductChainTable.tsx @@ -31,8 +31,8 @@ const handleLinkClick = (productTitle: string, network: string, url: string) => window.dataLayer.push({ event: "quick_link_clicked", product: productTitle, - network: network, - url: url, + network, + url, }) }