fix: NavBar styling

mozilla · Dec 20, 2024 · 1439816 · 1439816
1 parent 0f4404a
commit 1439816
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 106 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss b/src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss
@@ -5,35 +5,57 @@
   flex-direction: column;
   height: 100%;
 }
+
+.waitlistSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-lg;
+  padding: $layout-md $spacing-md;
+
+  .waitlistTitle {
+    text-align: center;
+    font: $text-title-2xs;
+    font-weight: 600;
+    line-height: 1.4;
+    font-family: var(--font-inter);
+    color: $color-purple-70;
+  }
+
+  a {
+    align-self: center;
+  }
+}
+
 .navbar {
   font: $text-body-xl;
   padding: $layout-xs;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   background-color: $color-grey-05;
-  .navbarLinksContainer {
+  ul {
     display: flex;
     flex-direction: column;
-    .navbarLinks {
+    a {
       text-decoration: none;
       color: $color-grey-50;
     }
   }
   @media screen and (min-width: $screen-sm) {
     justify-content: flex-end;
-    .navbarLinksContainer {
+    ul {
       flex-direction: row;
       justify-content: flex-end;
-      .navbarLinks {
+      a {
         margin-left: $spacing-lg;
       }
     }
   }
   @media screen and (min-width: $screen-md) {
     padding: $layout-xs $layout-xl;
-    .navbarLinksContainer {
-      .navbarLinks {
+    ul {
+      a {
         margin-left: $spacing-xl;
       }
     }
@@ -396,24 +418,3 @@
     align-self: center;
   }
 }
-
-.waitlistSection {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: $spacing-lg;
-  padding: $layout-md $spacing-md;
-
-  .waitlistTitle {
-    text-align: center;
-    font: $text-title-2xs;
-    font-weight: 600;
-    line-height: 1.4;
-    font-family: var(--font-inter);
-    color: $color-purple-70;
-  }
-
-  a {
-    align-self: center;
-  }
-}
diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingView.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingView.tsx
@@ -44,7 +44,11 @@ export const View = (props: Props) => {
     <>
       <AccountDeletionNotification />
       <main className={styles.wrapper}>
-        {props.eligibleForPremium && <TopNavBar styles={styles} />}
+        {props.eligibleForPremium && (
+          <div className={styles.navbar}>
+            <TopNavBar />
+          </div>
+        )}
         <header className={styles.hero}>
           <div className={styles.heroContent}>
             <h1>{props.l10n.getString("landing-all-hero-title")}</h1>

diff --git a/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss b/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss
@@ -45,6 +45,22 @@
   }
 
   &.navDesktop {
+    ul {
+      display: flex;
+
+      a {
+        color: $color-black;
+        text-decoration: none;
+        font-weight: 600;
+        padding: $spacing-sm $spacing-md;
+
+        &:hover {
+          color: $color-purple-70;
+          text-decoration: underline;
+        }
+      }
+    }
+
     @media screen and (max-width: $screen-xl) {
       display: none;
     }
@@ -54,21 +70,3 @@
 .content {
   flex: 1 0 auto;
 }
-
-.navbar {
-  display: flex;
-  flex-direction: row;
-  font-weight: 600;
-  justify-content: flex-start;
-
-  .navbarLinksContainer {
-    display: flex;
-    gap: $spacing-md;
-  }
-
-  .navbarLinks {
-    color: $color-black;
-    padding: $spacing-sm;
-    text-decoration: none;
-  }
-}
diff --git a/src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx b/src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx
@@ -82,7 +82,7 @@ export const PublicShell = (props: Props) => {
               />
             </Link>
           </h1>
-          {hasLandingPageRedesign && <TopNavBar styles={styles} />}
+          {hasLandingPageRedesign && <TopNavBar />}
           <SignInButton variant="secondary" />
         </nav>
         <div className={styles.content}>{props.children}</div>

diff --git a/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx b/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
@@ -7,61 +7,51 @@
 import { TelemetryLink } from "../../../components/client/TelemetryLink";
 import { useL10n } from "../../../hooks/l10n";
 
-export const TopNavBar = (props: {
-  styles: {
-    readonly [key: string]: string;
-  };
-}) => {
+export const TopNavBar = () => {
   const l10n = useL10n();
   return (
-    <div className={props.styles.navbar}>
-      <ul className={`${props.styles.navbarLinksContainer} noList`}>
-        <li>
-          <TelemetryLink
-            className={props.styles.navbarLinks}
-            href="/how-it-works"
-            eventData={{
-              link_id: "navbar_how_it_works",
-            }}
-          >
-            {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
-          </TelemetryLink>
-        </li>
-        <li>
-          <TelemetryLink
-            className={props.styles.navbarLinks}
-            href="#pricing"
-            eventData={{
-              link_id: "navbar_pricing",
-            }}
-          >
-            {l10n.getString("landing-premium-hero-navbar-link-pricing")}
-          </TelemetryLink>
-        </li>
-        <li>
-          <TelemetryLink
-            data-testid="navbar_faqs"
-            className={props.styles.navbarLinks}
-            href="#faq"
-            eventData={{
-              link_id: "navbar_faqs",
-            }}
-          >
-            {l10n.getString("landing-premium-hero-navbar-link-faqs")}
-          </TelemetryLink>
-        </li>
-        <li>
-          <TelemetryLink
-            className={props.styles.navbarLinks}
-            href="/breaches"
-            eventData={{
-              link_id: "navbar_recent_breaches",
-            }}
-          >
-            {l10n.getString("landing-premium-hero-navbar-link-recent-breaches")}
-          </TelemetryLink>
-        </li>
-      </ul>
-    </div>
+    <ul className="noList">
+      <li>
+        <TelemetryLink
+          href="/how-it-works"
+          eventData={{
+            link_id: "navbar_how_it_works",
+          }}
+        >
+          {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
+        </TelemetryLink>
+      </li>
+      <li>
+        <TelemetryLink
+          href="#pricing"
+          eventData={{
+            link_id: "navbar_pricing",
+          }}
+        >
+          {l10n.getString("landing-premium-hero-navbar-link-pricing")}
+        </TelemetryLink>
+      </li>
+      <li>
+        <TelemetryLink
+          data-testid="navbar_faqs"
+          href="#faq"
+          eventData={{
+            link_id: "navbar_faqs",
+          }}
+        >
+          {l10n.getString("landing-premium-hero-navbar-link-faqs")}
+        </TelemetryLink>
+      </li>
+      <li>
+        <TelemetryLink
+          href="/breaches"
+          eventData={{
+            link_id: "navbar_recent_breaches",
+          }}
+        >
+          {l10n.getString("landing-premium-hero-navbar-link-recent-breaches")}
+        </TelemetryLink>
+      </li>
+    </ul>
   );
 };
diff --git a/src/app/(proper_react)/(redesign)/MobileShell.module.scss b/src/app/(proper_react)/(redesign)/MobileShell.module.scss
@@ -79,10 +79,6 @@
     display: none;
   }
 
-  .navbar {
-    width: 100%;
-  }
-
   @media screen and (max-width: $screen-xl) {
     .hasOpenMenu & .mainMenuLayer {
       display: block;

diff --git a/src/app/(proper_react)/(redesign)/MobileShell.tsx b/src/app/(proper_react)/(redesign)/MobileShell.tsx
@@ -197,7 +197,7 @@ export const MobileShell = (props: Props) => {
                 </div>
               </>
             ) : (
-              <TopNavBar styles={styles} />
+              <TopNavBar />
             )}
           </div>
         </nav>
-Original file line number
+Diff line change
@@ Expand Up / @@ -197,7 +197,7 @@ export const MobileShell = (props: Props) => { @@
                     </div>
                   </>
                 ) : (
-                  <TopNavBar styles={styles} />
+                  <TopNavBar />
                 )}
               </div>
             </nav>
@@ Expand Down @@