update AppLayout

packages/app/src/css/main.css

@@ -213,5 +213,22 @@
   input {
     background: none;
   }
-}
 
+  @property --gradient-from {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: transparent;
+  }
+
+  @property --gradient-via {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: transparent;
+  }
+
+  @property --gradient-to {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: true;
+  }
+}

packages/app/src/features/savings/components/PageLayout.tsx

@@ -6,7 +6,7 @@ interface PageLayoutProps {
 
 export function PageLayout({ children }: PageLayoutProps) {
   return (
-    <div className="flex w-full max-w-7xl flex-1 flex-col gap-6 px-3 pt-6 pb-16 lg:mx-auto md:mx-auto md:gap-8 md:pt-10">
+    <div className="flex w-full max-w-7xl flex-1 flex-col gap-6 px-3 pt-4 pb-16 lg:mx-auto md:mx-auto md:gap-8 md:pt-4">
       {children}
     </div>
   )

packages/app/src/ui/atoms/sky-migration-top-banner/SkyMigrationTopBanner.tsx

@@ -1,18 +1,25 @@
 import { assets } from '@/ui/assets'
+import { cn } from '@/ui/utils/style'
 import { XIcon } from 'lucide-react'
 import { Button } from '../button/Button'
 import { Link } from '../link/Link'
 import { Sparkles } from '../sparkles/Sparkles'
 
 interface SkyMigrationTopBannerProps {
   onClose: () => void
+  className?: string
 }
 
 export const SKY_MIGRATION_TOP_BANNER_ID = 'sky-migration-top-banner'
 
-export function SkyMigrationTopBanner({ onClose }: SkyMigrationTopBannerProps) {
+export function SkyMigrationTopBanner({ onClose, className }: SkyMigrationTopBannerProps) {
   return (
-    <div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 bg-gradient-to-b from-[#9042C9] to-[#A047CC] p-1.5 text-center text-basics-white/85 text-sm sm:flex-row sm:text-base">
+    <div
+      className={cn(
+        'relative z-10 flex w-full flex-col items-center justify-center gap-2 bg-gradient-to-b from-[#9042C9] to-[#A047CC] p-1.5 text-center text-basics-white/85 text-sm sm:flex-row sm:text-base',
+        className,
+      )}
+    >
       <span className="flex items-center gap-2">
         <img src={assets.banners.mkrToSkyTransform} />
         <span>

packages/app/src/ui/layouts/app-layout/AppLayout.tsx

@@ -1,51 +1,51 @@
-import { cx } from 'class-variance-authority'
-import { useState } from 'react'
-
 import { usePageChainId } from '@/domain/hooks/usePageChainId'
 import { useBannerVisibility } from '@/domain/state/bannersVisibility'
 import { useOpenDialog } from '@/domain/state/dialogs'
 import { selectNetworkDialogConfig } from '@/features/dialogs/select-network/SelectNetworkDialog'
-import { Navbar } from '@/features/navbar/Navbar'
+import { TopbarContainer } from '@/features/topbar/TopbarContainer'
 import { cn } from '@/ui/utils/style'
 import {
   SKY_MIGRATION_TOP_BANNER_ID,
   SkyMigrationTopBanner,
 } from '../../atoms/sky-migration-top-banner/SkyMigrationTopBanner'
+import { LayoutBackground } from './components/LayoutBackground'
 import { PageNotSupportedWarning } from './components/PageNotSupportedWarning'
 
 interface AppLayoutProps {
   children: React.ReactNode
 }
 
 export function AppLayout({ children }: AppLayoutProps) {
-  const [mobileMenuCollapsed, setMobileMenuCollapsed] = useState(true)
   const { pageSupported, pageName } = usePageChainId()
   const { handleCloseBanner, showBanner } = useBannerVisibility(SKY_MIGRATION_TOP_BANNER_ID)
   const openDialog = useOpenDialog()
 
   return (
-    <div className={cn('flex min-h-screen flex-col')}>
+    <div
+      className={cn(
+        'grid min-h-screen w-full grid-cols-[1fr_calc(100%-48px)_1fr] grid-rows-[auto_auto_1fr_auto] items-start gap-x-[24px]',
+        'bg-secondary lg:grid-cols-[1fr_min(calc(100%-128px),1608px)_1fr] lg:gap-x-[64px]',
+      )}
+    >
+      <LayoutBackground />
+
       {import.meta.env.VITE_FEATURE_TOP_BANNER === '1' && showBanner && (
-        <SkyMigrationTopBanner onClose={handleCloseBanner} />
+        <SkyMigrationTopBanner onClose={handleCloseBanner} className="col-span-full " />
       )}
-      <Navbar
-        mobileMenuCollapsed={mobileMenuCollapsed}
-        setMobileMenuCollapsed={setMobileMenuCollapsed}
-        className="z-20"
-      />
-      <main className={cx('isolate flex w-full grow flex-col', !mobileMenuCollapsed && 'hidden lg:flex')}>
+      <div className="sticky top-0 z-20 col-start-2 col-end-2 mb-6 bg-secondary/30 pt-2 backdrop-blur-xs">
+        <TopbarContainer />
+      </div>
+
+      <main className="isolate z-20 col-span-full grid grid-cols-subgrid [&>*]:col-start-2 [&>*]:col-end-2">
         {children}
-        {!pageSupported && (
-          <>
-            <div className="fixed inset-0 z-10 bg-gray-100/30 backdrop-blur-[1.5px]" aria-hidden="true" />
-            <PageNotSupportedWarning
-              pageName={pageName}
-              openNetworkSelectDialog={() => openDialog(selectNetworkDialogConfig, {})}
-              className="z-20"
-            />
-          </>
-        )}
       </main>
+
+      {!pageSupported && (
+        <PageNotSupportedWarning
+          pageName={pageName}
+          openNetworkSelectDialog={() => openDialog(selectNetworkDialogConfig, {})}
+        />
+      )}
     </div>
   )
 }

packages/app/src/ui/layouts/app-layout/components/LayoutBackground.tsx

@@ -0,0 +1,55 @@
+import { Path, pathGroups, paths } from '@/config/paths'
+import { cn } from '@/ui/utils/style'
+import { CSSProperties } from 'react'
+import { matchPath, useLocation } from 'react-router-dom'
+
+const pageGradients = {
+  savings: {
+    from: '#11B93E',
+    via: '#40DA69',
+    to: '#FFFFFF',
+  },
+  farms: {
+    from: '#FA43BD',
+    via: '#FFB5B5',
+    to: '#FFFFFF',
+  },
+  borrow: {
+    from: '#FF895D',
+    via: '#FFE6A4',
+    to: '#FFFFFF',
+  },
+}
+
+export function LayoutBackground() {
+  const location = useLocation()
+
+  const currentPage = Object.entries(paths).find(([_, path]) => matchPath(path, location.pathname))?.[0] as Path
+
+  const activePathGroup = Object.entries(pathGroups).find(([_, paths]) =>
+    paths.includes(currentPage),
+  )?.[0] as keyof typeof pathGroups
+
+  return (
+    <div
+      className={cn(
+        'fixed top-0 right-0 z-10 aspect-[582/1010] bg-[url("/backgrounds/background-lines.svg")] bg-contain bg-no-repeat',
+        'w-[200vw] max-w-[1010px] lg:w-full md:w-[125vw] sm:w-[150vw]',
+      )}
+    >
+      <div
+        className={cn(
+          'aspect-square w-[70vw] translate-x-[643px] translate-y-[66px] blur-[250px] md:w-[367px] sm:blur-[384px]',
+          'bg-gradient-to-r from-[--gradient-from] via-[--gradient-via] to-[--gradient-to] duration-300 ease-out [transition-property:_--gradient-from,_--gradient-via,_--gradient-to]',
+        )}
+        style={
+          {
+            '--gradient-from': pageGradients[activePathGroup].from,
+            '--gradient-via': pageGradients[activePathGroup].via,
+            '--gradient-to': pageGradients[activePathGroup].to,
+          } as CSSProperties
+        }
+      />
+    </div>
+  )
+}

packages/app/src/ui/layouts/app-layout/components/PageNotSupportedWarning.tsx

@@ -1,45 +1,45 @@
-import { Button } from '@/ui/atoms/button/Button'
+import { Button } from '@/ui/atoms/new/button/Button'
 import { cn } from '@/ui/utils/style'
 import { testIds } from '@/ui/utils/testIds'
 import { AlertTriangle } from 'lucide-react'
 
 export interface PageNotSupportedWarningProps {
   pageName: string
   openNetworkSelectDialog: () => void
-  className?: string
 }
 
-export function PageNotSupportedWarning({
-  pageName,
-  openNetworkSelectDialog,
-  className,
-}: PageNotSupportedWarningProps) {
+export function PageNotSupportedWarning({ pageName, openNetworkSelectDialog }: PageNotSupportedWarningProps) {
   return (
-    <div
-      className={cn(
-        'sticky bottom-0 flex min-h-28 w-full flex-col items-center justify-center gap-2.5 lg:flex-row lg:gap-40',
-        'bg-white p-4 shadow-[0_0_128px_rgba(0,0,0,0.1)]',
-        className,
-      )}
-    >
-      <div className="flex gap-4">
-        <AlertTriangle className="h-8 w-8 text-[#FC4F37]" />
-        <div className="flex flex-col gap-0.5">
-          <div className="font-semibold text-primary text-sm lg:text-base">
-            {pageName} {pageName.endsWith('s') ? 'are' : 'is'} not supported on the network you are connected to.
-          </div>
-          <div className="text-prompt-foreground text-xs lg:text-sm">
-            Switch to other supported networks to unlock this page.
+    <div className="fixed inset-0 z-30">
+      <div className="fixed inset-0 bg-reskin-alpha-overlay backdrop-blur-[2px]" aria-hidden="true" />
+
+      <div
+        className={cn(
+          'absolute bottom-0 z-20 flex min-h-28 w-full flex-col items-center justify-center gap-4 lg:flex-row lg:gap-40',
+          'bg-primary p-4 shadow-[0_0_128px_rgba(0,0,0,0.1)]',
+        )}
+      >
+        <div className="flex gap-4">
+          <AlertTriangle className="h-8 w-8 text-system-error-primary" />
+          <div className="flex flex-col gap-0.5">
+            <div className="typography-label-5 lg:typography-label-4 text-primary">
+              {pageName} {pageName.endsWith('s') ? 'are' : 'is'} not supported on the network you are connected to.
+            </div>
+            <div className="typography-body-5 text-secondary">
+              Switch to other supported networks to unlock this page.
+            </div>
           </div>
         </div>
+        <Button
+          size="l"
+          variant="secondary"
+          className="w-full px-20 lg:w-fit"
+          onClick={openNetworkSelectDialog}
+          data-testid={testIds.component.SwitchNotSupportedNetworkButton}
+        >
+          Switch network
+        </Button>
       </div>
-      <Button
-        className="w-full px-20 lg:w-fit"
-        onClick={openNetworkSelectDialog}
-        data-testid={testIds.component.SwitchNotSupportedNetworkButton}
-      >
-        Switch network
-      </Button>
     </div>
   )
 }

packages/app/tailwind.config.ts

@@ -307,6 +307,7 @@ export default {
           },
           alpha: {
             dialog: 'color-mix(in srgb, rgb(var(--base-black)) 40%, transparent)',
+            overlay: 'color-mix(in srgb, rgb(var(--neutral-100)) 30%, transparent)',
           },
         },
         basics: {