update AppLayout

packages/app/.env.development

@@ -5,7 +5,7 @@ VITE_FEATURE_DEV_SANDBOX=1
 VITE_FEATURE_DISABLE_DAI_LEND=0
 VITE_FEATURE_TOS_REQUIRED=0
 VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
-VITE_FEATURE_TOP_BANNER=1
+VITE_FEATURE_TOP_BANNER=0
 VITE_FEATURE_RPC_INJECTION_VIA_URL=1
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0
 

packages/app/.env.example

@@ -14,7 +14,7 @@ VITE_FEATURE_DEV_SANDBOX=1 # enable dev sandbox using tenderly - doesn't create
 VITE_FEATURE_DISABLE_DAI_LEND=1 # disable button allowing to deposit directly to DAI market
 VITE_FEATURE_TOS_REQUIRED=1 # require user to accept terms of service when connecting wallet for the first time
 VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1 # show welcome dialog when user enters new savings page
-VITE_FEATURE_TOP_BANNER=1 # enable top banner with information about beta version
+VITE_FEATURE_TOP_BANNER=0 # enable top banner with information about beta version
 VITE_FEATURE_RPC_INJECTION_VIA_URL=0 # enable injecting RPC url and chain id via URL parameter
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0 # clear sandbox on page reload if it's older than X hours
 

packages/app/.env.production

@@ -5,7 +5,7 @@ VITE_FEATURE_DEV_SANDBOX=0
 VITE_FEATURE_DISABLE_DAI_LEND=1
 VITE_FEATURE_TOS_REQUIRED=1
 VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
-VITE_FEATURE_TOP_BANNER=1
+VITE_FEATURE_TOP_BANNER=0
 VITE_FEATURE_RPC_INJECTION_VIA_URL=0
 VITE_FEATURE_CLEAR_STALE_SANDBOX=1
 

packages/app/.env.staging

@@ -5,7 +5,7 @@ VITE_FEATURE_DEV_SANDBOX=1
 VITE_FEATURE_DISABLE_DAI_LEND=1
 VITE_FEATURE_TOS_REQUIRED=1
 VITE_FEATURE_SAVINGS_WELCOME_DIALOG=1
-VITE_FEATURE_TOP_BANNER=1
+VITE_FEATURE_TOP_BANNER=0
 VITE_FEATURE_RPC_INJECTION_VIA_URL=1
 VITE_FEATURE_CLEAR_STALE_SANDBOX=0
 

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/easy-borrow/components/skeleton/EasyBorrowSkeleton.tsx

@@ -7,7 +7,7 @@ export function EasyBorrowSkeleton() {
   const tablet = useBreakpoint('md')
   const desktop = useBreakpoint('xl')
   return (
-    <PageLayout>
+    <PageLayout compact>
       <div className="flex flex-col items-center md:mt-12">
         <Skeleton className="h-12 w-52 md:w-80" />
         <Skeleton className="mt-6 h-6 w-64 md:w-96" />

packages/app/src/features/easy-borrow/views/EasyBorrowView.tsx

@@ -35,7 +35,7 @@ export interface EasyBorrowViewProps {
 
 export function EasyBorrowView(props: EasyBorrowViewProps) {
   return (
-    <PageLayout>
+    <PageLayout compact>
       <BorrowRateBanner assetsToBorrowMeta={props.borrowDetails} />
       <div className="mt-8 flex justify-center">
         <EasyBorrowPanel {...props} />

packages/app/src/features/easy-borrow/views/SuccessView.tsx

@@ -24,7 +24,7 @@ export function SuccessView({ deposited, borrowed, runConfetti, borrowDetails }:
   const desktop = useBreakpoint('md')
 
   return (
-    <PageLayout className={cn('pt-8', desktop && 'pt-28')}>
+    <PageLayout compact className={cn('pt-8', desktop && 'pt-28')}>
       <Confetti run={runConfetti} recycle={false} numberOfPieces={1000} data-testid="react-confetti" />
       <div className="flex flex-col items-center justify-center">
         <img src={assets.success} alt="success-img" />

packages/app/src/features/farm-details/components/skeleton/FarmDetailsSkeleton.tsx

@@ -3,7 +3,7 @@ import { PageLayout } from '@/ui/layouts/PageLayout'
 
 export function FarmDetailsSkeleton() {
   return (
-    <PageLayout className="max-w-5xl gap-8">
+    <PageLayout compact className="gap-8">
       <div className="flex flex-row items-center gap-8">
         <Skeleton className="h-6 w-36" />
         <Skeleton className="h-6 w-36" />

packages/app/src/features/farm-details/views/FarmDetailsView.tsx

@@ -4,6 +4,7 @@ import { NormalizedUnitNumber } from '@/domain/types/NumericValues'
 import { Token } from '@/domain/types/Token'
 import { getTokenImage } from '@/ui/assets'
 import { ChartTabsPanel, createChartTab } from '@/ui/charts/components/ChartTabsPanel'
+import { PageLayout } from '@/ui/layouts/PageLayout'
 import { ConnectOrSandboxCTAPanel } from '@/ui/organisms/connect-or-sandbox-cta-panel/ConnectOrSandboxCTAPanel'
 import { BackNav } from '../components/back-nav/BackNav'
 import { RewardsChart } from '../components/chart/rewards/RewardsChart'
@@ -59,7 +60,7 @@ export function FarmDetailsView({
   pointsSyncStatus,
 }: FarmDetailsViewProps) {
   return (
-    <div className="w-full max-w-5xl pt-12 pb-8 lg:mx-auto sm:mx-3">
+    <PageLayout compact className="gap-0">
       <BackNav chainId={chainId} />
       <Header token={farm.rewardToken} farmName={farm.name} chainId={chainId} chainMismatch={chainMismatch} />
       <div className="flex flex-col gap-8">
@@ -123,6 +124,6 @@ export function FarmDetailsView({
           />
         )}
       </div>
-    </div>
+    </PageLayout>
   )
 }

packages/app/src/features/farms/components/skeleton/FarmsSkeleton.tsx

@@ -3,7 +3,7 @@ import { PageLayout } from '@/ui/layouts/PageLayout'
 
 export function FarmsSkeleton() {
   return (
-    <PageLayout className="max-w-5xl gap-8">
+    <PageLayout compact className="gap-8">
       <div className="flex flex-row items-center gap-4">
         <Skeleton className="h-12 w-56" />
       </div>

packages/app/src/features/farms/views/FarmsView.tsx

@@ -12,7 +12,7 @@ export interface FarmsViewProps {
 
 export function FarmsView({ activeFarms, inactiveFarms, chainId }: FarmsViewProps) {
   return (
-    <PageLayout className="max-w-5xl gap-8 px-3 lg:px-0">
+    <PageLayout compact className="gap-8">
       <PageHeader chainId={chainId} />
       <div className="flex flex-col gap-8">
         {activeFarms.length > 0 && (

packages/app/src/features/market-details/components/skeleton/MarketDetailsSkeleton.tsx

@@ -3,7 +3,7 @@ import { PageLayout } from '@/ui/layouts/PageLayout'
 
 export function MarketDetailsSkeleton() {
   return (
-    <PageLayout className="max-w-5xl gap-8">
+    <PageLayout compact className="gap-8">
       <div className="flex flex-row items-center gap-8">
         <Skeleton className="h-8 w-36" />
         <Skeleton className="h-8 w-36" />

packages/app/src/features/market-details/views/components/CompactView.tsx

@@ -1,5 +1,6 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/ui/atoms/tabs/Tabs'
 
+import { PageLayout } from '@/ui/layouts/PageLayout'
 import { MarketOverview as MarketOverviewPanel } from '../../components/market-overview/MarketOverview'
 import { MyWalletPanel } from '../../components/my-wallet/MyWalletPanel'
 import { OraclePanel } from '../../components/oracle-panel/OraclePanel'
@@ -26,7 +27,7 @@ export function CompactView({
   oracleInfo,
 }: MarketDetailsViewProps) {
   return (
-    <div className="w-full pt-5 pb-8">
+    <PageLayout className="gap-0">
       <BackNav chainId={chainId} chainName={chainName} />
       <Header
         token={token}
@@ -37,11 +38,11 @@ export function CompactView({
         chainId={chainId}
       />
       <Tabs defaultValue="overview">
-        <TabsList className="sticky top-0 z-10 bg-body pt-2">
+        <TabsList className="bg-body pt-2">
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="actions">Actions</TabsTrigger>
         </TabsList>
-        <TabsContent value="overview" className="flex flex-col gap-4 px-3">
+        <TabsContent value="overview" className="flex flex-col gap-4">
           {(marketOverview.borrow.status === 'no' ? !marketOverview.summary.borrowed.isZero() : true) && (
             <MarketOverviewPanel token={token} {...marketOverview.summary} />
           )}
@@ -61,6 +62,6 @@ export function CompactView({
           />
         </TabsContent>
       </Tabs>
-    </div>
+    </PageLayout>
   )
 }

packages/app/src/features/market-details/views/components/FullView.tsx

@@ -1,3 +1,4 @@
+import { PageLayout } from '@/ui/layouts/PageLayout'
 import { MarketOverview as MarketOverviewPanel } from '../../components/market-overview/MarketOverview'
 import { MyWalletPanel } from '../../components/my-wallet/MyWalletPanel'
 import { OraclePanel } from '../../components/oracle-panel/OraclePanel'
@@ -24,7 +25,7 @@ export function FullView({
   oracleInfo,
 }: MarketDetailsViewProps) {
   return (
-    <div className="w-full max-w-5xl pt-12 pb-8 lg:mx-auto sm:mx-3">
+    <PageLayout compact className="gap-0">
       <BackNav chainId={chainId} chainName={chainName} />
       <Header
         token={token}
@@ -55,6 +56,6 @@ export function FullView({
           />
         </div>
       </div>
-    </div>
+    </PageLayout>
   )
 }

packages/app/src/features/markets/components/skeleton/MarketsSkeleton.tsx

@@ -3,7 +3,7 @@ import { PageLayout } from '@/ui/layouts/PageLayout'
 
 export function MarketsSkeleton() {
   return (
-    <PageLayout className="max-w-6xl gap-8">
+    <PageLayout className="gap-8">
       <div className="flex flex-row items-center gap-4">
         <Skeleton className="h-12 w-56" />
       </div>

packages/app/src/features/markets/views/MarketsView.tsx

@@ -28,7 +28,7 @@ export function MarketsView({
   const chainImage = getChainConfigEntry(chainId).meta.logo
 
   return (
-    <PageLayout className="max-w-6xl gap-8 px-3 lg:px-0">
+    <PageLayout className="gap-8">
       <div className="flex flex-row items-center gap-4">
         <Typography variant="h2">Markets</Typography>
         <div className="flex translate-y-0.5 flex-row items-center gap-1">

packages/app/src/features/my-portfolio/components/skeleton/MyPortfolioSkeleton.tsx

@@ -3,7 +3,7 @@ import { PageLayout } from '@/ui/layouts/PageLayout'
 
 export function MyPortfolioSkeleton() {
   return (
-    <PageLayout className="max-w-6xl">
+    <PageLayout>
       <div className="flex h-full flex-col gap-6">
         <div className="flex flex-row gap-6">
           <Skeleton className="h-56 w-1/3" />

packages/app/src/features/my-portfolio/views/GuestView.tsx

@@ -9,7 +9,7 @@ export interface GuestViewProps {
 
 export function GuestView({ openConnectModal, openSandboxModal }: GuestViewProps) {
   return (
-    <PageLayout className="max-w-6xl">
+    <PageLayout compact>
       <ConnectOrSandboxCTAPanel
         header="Connect your wallet to use Spark"
         iconPaths={WALLET_ICONS_PATHS}

packages/app/src/features/my-portfolio/views/PositionView.tsx

@@ -33,7 +33,7 @@ export function PositionView({
   liquidationDetails,
 }: PositionViewProps) {
   return (
-    <PageLayout className="max-w-6xl px-3 lg:px-0">
+    <PageLayout>
       <div className="flex flex-col flex-wrap gap-4 md:flex-row">
         <HealthFactorPanel
           hf={positionSummary.healthFactor}

packages/app/src/features/navbar/Navbar.PageObject.ts

@@ -6,19 +6,19 @@ import { testIds } from '@/ui/utils/testIds'
 export class NavbarPageObject extends BasePageObject {
   // #region locators
   locateAirdropBadge(): Locator {
-    return this.page.getByTestId(testIds.navbar.airdropBadge)
+    return this.page.getByTestId(testIds.topbar.airdrop.badge)
   }
 
   locateRewardsBadge(): Locator {
-    return this.page.getByTestId(testIds.navbar.rewards.badge)
+    return this.page.getByTestId(testIds.topbar.rewards.badge)
   }
 
-  locateRewardsDetails(): Locator {
-    return this.page.getByTestId(testIds.navbar.rewards.details.tooltip)
+  locateRewardsDropdown(): Locator {
+    return this.page.getByTestId(testIds.topbar.rewards.details.dropdown)
   }
 
   locateAirdropPreciseAmount(): Locator {
-    return this.page.getByRole('tooltip').getByText('SPK').first()
+    return this.page.getByTestId(testIds.topbar.airdrop.dropdown).getByText('SPK').first()
   }
 
   locateSavingsLink(): Locator {
@@ -27,18 +27,23 @@ export class NavbarPageObject extends BasePageObject {
   // #endregion
 
   // #region actions
-  async hoverOverAirdropBadge(): Promise<void> {
-    await this.locateAirdropBadge().hover()
+  async openAirdropDropdown(): Promise<void> {
+    await this.locateAirdropBadge().click()
   }
 
-  async clickClaimRewards(tooltip: Locator): Promise<void> {
-    await tooltip.getByRole('button', { name: 'Claim rewards' }).first().click()
+  async openRewardsDropdown(): Promise<void> {
+    await this.locateRewardsBadge().click()
+  }
+
+  async clickClaimRewards(): Promise<void> {
+    const dropdown = this.locateRewardsDropdown()
+
+    await dropdown.getByRole('menuitem', { name: /Claim rewards/ }).click()
   }
 
   async openClaimRewardsDialog(): Promise<void> {
-    const rewardsDetails = this.locateRewardsDetails()
-    await this.locateRewardsBadge().hover()
-    await this.clickClaimRewards(rewardsDetails)
+    await this.openRewardsDropdown()
+    await this.clickClaimRewards()
   }
   // #endregion
 
@@ -60,19 +65,21 @@ export class NavbarPageObject extends BasePageObject {
   }
 
   async expectClaimableRewardsValue(value: string): Promise<void> {
-    await expect(this.page.getByTestId(testIds.navbar.rewards.claimableRewards)).toHaveText(value)
+    await expect(this.page.getByTestId(testIds.topbar.rewards.claimableRewards)).toHaveText(value)
   }
 
   async expectRewardsBadgeNotVisible(): Promise<void> {
     await expect(this.locateRewardsBadge()).not.toBeVisible()
   }
 
-  async expectRewards(rows: Reward[], tooltip: Locator): Promise<void> {
+  async expectRewards(rows: Reward[]): Promise<void> {
+    const dropdown = this.locateRewardsDropdown()
+
     for (const [index, row] of rows.entries()) {
-      const rowLocator = tooltip.getByTestId(testIds.navbar.rewards.details.row(index)).first()
-      await expect(rowLocator.getByTestId(testIds.navbar.rewards.details.token)).toHaveText(row.tokenSymbol)
-      await expect(rowLocator.getByTestId(testIds.navbar.rewards.details.amount)).toHaveText(row.amount)
-      await expect(rowLocator.getByTestId(testIds.navbar.rewards.details.amountUSD)).toHaveText(row.amountUSD)
+      const rowLocator = dropdown.getByTestId(testIds.topbar.rewards.details.row(index)).first()
+      await expect(rowLocator.getByTestId(testIds.topbar.rewards.details.token)).toHaveText(row.tokenSymbol)
+      await expect(rowLocator.getByTestId(testIds.topbar.rewards.details.amount)).toHaveText(row.amount)
+      await expect(rowLocator.getByTestId(testIds.topbar.rewards.details.amountUSD)).toHaveText(row.amountUSD)
     }
   }
   // #endregion