[QF-3553] refactor

Author: afifvdin

src/components/Banner/Banner.module.scss

@@ -22,7 +22,7 @@
 
 .cta {
   padding-inline: var(--spacing-xsmall-px);
-  padding-block: var(--spacing-xxxsmall-px);
+  padding-block: var(--spacing-micro2-px);
   background-color: var(--color-success-faded);
   color: var(--color-text-link-new);
   font-size: var(--font-size-small-px);
@@ -38,7 +38,6 @@
 
 .icon {
   > svg path {
-    color: var(--color-text-link-new);
     fill: var(--color-text-link-new);
   }
 }

src/components/Banner/Banner.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import styles from './Banner.module.scss';
 
 import IconContainer, { IconColor, IconSize } from '@/dls/IconContainer/IconContainer';
@@ -21,22 +23,27 @@ const Banner = ({ text, ctaButtonText }: BannerProps) => {
   const { goal } = useGetStreakWithMetadata();
   const hasGoal = !!goal;
 
-  // Route logged-in users to progress page while loading to prevent jarring UX
-  // if they have an existing goal. Falls back to reading-goal once loading completes
-  // if no goal exists.
+  // Route logged-in users with an existing goal to the progress page,
+  // otherwise route to the reading-goal page.
   const ctaLink =
     isLoggedIn && hasGoal ? getReadingGoalProgressNavigationUrl() : getReadingGoalNavigationUrl();
 
-  const handleButtonClick = () => {
+  const handleButtonClick = useCallback(() => {
     logButtonClick('banner_cta', {
       hasGoal,
       isLoggedIn,
     });
-  };
+  }, [hasGoal, isLoggedIn]);
 
   return (
-    <div className={styles.container} data-testid="banner">
-      <p className={styles.text}>{text}</p>
+    <div
+      className={styles.container}
+      data-testid="banner"
+      role="status"
+      aria-live="polite"
+      aria-label="Banner announcement"
+    >
+      <div className={styles.text}>{text}</div>
       {ctaButtonText && (
         <Link
           href={ctaLink}

src/components/Navbar/Navbar.tsx

@@ -19,7 +19,7 @@ const Navbar = () => {
   const showNavbar = useDebounceNavbarVisibility(isNavbarVisible, isActive);
 
   return (
-    <div className={classNames(isBannerVisible && styles.bannerActive)}>
+    <div className={classNames({ [styles.bannerActive]: isBannerVisible })}>
       <div className={styles.emptySpacePlaceholder} />
       <nav
         className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}

src/components/Navbar/NavbarBody/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import { memo, useMemo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -134,13 +134,10 @@ const NavbarBody: React.FC<Props> = ({ isBannerVisible }) => {
     dispatch(setDisableSearchDrawerTransition(false));
   };
 
-  const bannerProps = useMemo(
-    () => ({
-      text: t('stay-on-track'),
-      ctaButtonText: t('create-my-goal'),
-    }),
-    [t],
-  );
+  const bannerProps = {
+    text: t('stay-on-track'),
+    ctaButtonText: t('create-my-goal'),
+  };
 
   return (
     <>

src/styles/theme.scss

@@ -17,7 +17,7 @@
   --spacing-max: 3rem;
 
   --spacing-micro-px: 2px;
-  --spacing-xxxsmall-px: 3px;
+  --spacing-micro2-px: 3px;
   --spacing-xxsmall-px: 5px;
   --spacing-xsmall-px: 8px;
   --spacing-small-px: 10px;

src/styles/variables.scss

@@ -1,5 +1,5 @@
-@use "src/styles/breakpoints";
-@use "src/styles/theme";
+@use 'src/styles/breakpoints';
+@use 'src/styles/theme';
 
 // dynamic global variables
 
@@ -12,13 +12,3 @@
   --banner-height: 3rem;
   --day-circle-color: transparent;
 }
-
-.banner-active {
-  --banner-height: 3rem;
-  --navbar-container-height: calc(var(--navbar-height) + var(--banner-height));
-
-  @include breakpoints.tablet {
-    --banner-height: var(--navbar-height);
-    --navbar-container-height: var(--navbar-height);
-  }
-}

tests/integration/loggedin/navbar/banner.spec.ts

@@ -14,8 +14,8 @@ test.describe('Banner Test - Logged In User', () => {
     await page.waitForLoadState('networkidle');
 
     await clickCreateMyGoalButton(page);
-    await page.waitForURL(new RegExp(READING_GOAL_URL));
-    expect(page.url()).toContain(READING_GOAL_URL);
+    await page.waitForURL(new RegExp(`${READING_GOAL_URL}$`));
+    expect(new URL(page.url()).pathname).toBe(READING_GOAL_URL);
   });
 
   test('should redirect to /reading-goal/progress when user is logged in with goal', async ({
@@ -26,7 +26,7 @@ test.describe('Banner Test - Logged In User', () => {
     await page.waitForLoadState('networkidle');
 
     await clickCreateMyGoalButton(page);
-    await page.waitForURL(new RegExp(READING_GOAL_PROGRESS_URL));
-    expect(page.url()).toContain(READING_GOAL_PROGRESS_URL);
+    await page.waitForURL(new RegExp(`${READING_GOAL_PROGRESS_URL}$`));
+    expect(new URL(page.url()).pathname).toBe(READING_GOAL_PROGRESS_URL);
   });
 });