Design pass with Shelly (#514)

apps/bridge/src/components/DeprecationContent/BridgeCards.tsx

@@ -45,14 +45,17 @@ const bridges = coinflip([
 
 function BridgeCard({ name, url, logo, color, team }: (typeof bridges)[0]) {
   return (
-    <a href={url} className={`flex flex-col items-center justify-center rounded-lg bg-${color}`}>
+    <a
+      href={url}
+      className={`flex flex-col items-center justify-center rounded-lg bg-${color} group`}
+    >
       <div
-        className="flex h-80 w-full flex-col items-center justify-center"
+        className="flex h-60 w-full flex-col items-center justify-center duration-500 group-hover:brightness-150 md:h-80 lg:h-60"
         style={{ backgroundColor: color }}
       >
         <Image src={logo} alt={name} className="mb-4" />
       </div>
-      <div className="flex w-full flex-row items-start justify-between bg-gray p-12">
+      <div className="flex w-full flex-row items-start justify-between bg-gray p-12 group-hover:bg-hovergray">
         <div className="flex flex-col">
           <h2 className="font-mono text-3xl uppercase">{name}</h2>
           <p className="mt-2 text-xl text-muted">By {team}</p>
@@ -66,7 +69,7 @@ function BridgeCard({ name, url, logo, color, team }: (typeof bridges)[0]) {
 
 export default function BridgeCards() {
   return (
-    <div className="mb-16 grid grid-cols-1 gap-8 lg:grid-cols-2">
+    <div className="mb-16 grid grid-cols-1 gap-12 lg:grid-cols-2">
       {bridges.map((bridge) => (
         <BridgeCard key={bridge.name} {...bridge} />
       ))}

apps/bridge/src/components/DeprecationContent/DeprecationContent.tsx

@@ -10,7 +10,7 @@ const title = chainId === 1 ? 'Superchain Bridges' : 'Testnet Superchain Bridges
 
 function Disclaimer() {
   return (
-    <p className="text-muted">
+    <p className="py-6 text-muted lg:pr-16">
       Coinbase Technologies, Inc., provides links to these independent service providers for your
       convenience but assumes no responsibility for their operations. Any interactions with these
       providers are solely between you and the provider.
@@ -24,9 +24,9 @@ const BridgeCardsDynamic = dynamic(async () => import('./BridgeCards'), { ssr: f
 function Content() {
   return (
     <div className="bg-gray-900 text-white">
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 lg:pr-16">
         <h1 className="mb-8 text-6xl">{title}</h1>
-        <p className="mb-16 text-2xl ">
+        <p className="mb-16 text-2xl lg:max-w-[33em]">
           Go to Superbridge or Brid.gg to bridge your assets to and from Base. For questions, see
           our FAQ.
         </p>
@@ -48,12 +48,12 @@ export default Content;
 
 export function DeprecationContent() {
   return (
-    <div className="flex flex-col lg:flex-row">
+    <div className="flex flex-col items-stretch border-t border-sidebar-border lg:flex-row">
       <div className="flex grow flex-col">
         <Content />
       </div>
       <FaqSidebar />
-      <div className="p-4 text-center lg:hidden">
+      <div className="p-4 lg:hidden">
         <Disclaimer />
       </div>
     </div>

apps/bridge/src/components/Faq/FaqSidebar.tsx

@@ -2,8 +2,10 @@ import { QuestionAccordion } from 'apps/bridge/src/components/Faq/QuestionAccord
 
 export function FaqSidebar() {
   return (
-    <div className="flex h-full w-full flex-col p-4 font-sans lg:w-[420px] lg:border-l lg:border-sidebar-border">
-      <span className="mb-8 text-base font-medium text-stone-400">Frequently asked questions</span>
+    <div className="flex w-full flex-col p-4 pl-6 font-sans lg:w-[420px] lg:border-l lg:border-sidebar-border">
+      <span className="mb-8 mt-6 font-mono text-base font-medium uppercase text-stone-400">
+        Frequently asked questions
+      </span>
       <QuestionAccordion
         question="Can I still use the bridge on bridge.base.org?"
         answer="No, the bridge on bridge.base.org has been deprecated."

apps/bridge/src/components/Faq/QuestionAccordion.tsx

@@ -11,10 +11,10 @@ export function QuestionAccordion({ question, answer }: QuestionAccordionProps)
   const toggleOpen = useCallback(() => setIsOpen((o) => !o), [setIsOpen]);
 
   return (
-    <div className="flex flex-col gap-6 border-b border-gray pb-6">
+    <div className="flex flex-col gap-6 border-b border-gray py-4">
       <button
         type="button"
-        className="flex flex-row justify-between py-2 text-base font-medium text-white"
+        className="flex flex-row justify-between py-2 text-base text-white"
         onClick={toggleOpen}
       >
         <span className="text-left">{question}</span>
@@ -26,7 +26,7 @@ export function QuestionAccordion({ question, answer }: QuestionAccordionProps)
           )}
         </span>
       </button>
-      {isOpen && <span className="text-base text-white">{answer}</span>}
+      {isOpen && <span className="text-base text-muted">{answer}</span>}
     </div>
   );
 }

apps/bridge/src/components/Nav/Nav.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 
 import { Logo } from '../Logo/Logo';
 import DesktopNav from './DesktopNav';
@@ -10,12 +9,10 @@ type NavProps = {
 };
 
 export function Nav({ color }: NavProps) {
-  const { pathname } = useRouter();
-
   return (
     <nav className="z-10 flex h-24 w-full max-w-[1440px] flex-row items-center justify-between gap-16 self-center bg-transparent p-8">
-      <Link href="/" aria-label="Base Homepage">
-        <Logo color={color} path={pathname} width="106px" />
+      <Link href="https://base.org" aria-label="Base Homepage">
+        <Logo color={color} width="106px" />
       </Link>
       <DesktopNav color={color} />
       <MobileMenu color={color} />

apps/bridge/tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
         muted: 'rgba(138, 145, 158, 1)',
         gray: '#1E2025',
         modal: '#464B55',
+        hovergray: '#32353D',
         'notice-blue': '#001033',
       },
       textColor: {