From d66575758749cc38666da7581da53705e8244a87 Mon Sep 17 00:00:00 2001
From: Florian Zia <zia.florian@gmail.com>
Date: Fri, 20 Dec 2024 15:08:25 +0100
Subject: [PATCH] chore: Remove mobile menu carets

---
 .../(redesign)/(public)/TopNavBar.tsx         | 24 ++----------
 .../(redesign)/MobileShell.module.scss        |  8 ++--
 .../(proper_react)/(redesign)/MobileShell.tsx | 37 +++++--------------
 src/app/components/server/Icons.tsx           | 22 -----------
 4 files changed, 17 insertions(+), 74 deletions(-)

diff --git a/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx b/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
index ac664e64c08..e44143439c0 100644
--- a/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
+++ b/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
@@ -5,14 +5,12 @@
 "use client";
 
 import { TelemetryLink } from "../../../components/client/TelemetryLink";
-import { CaretRight } from "../../../components/server/Icons";
 import { useL10n } from "../../../hooks/l10n";
 
 export const TopNavBar = (props: {
   styles: {
     readonly [key: string]: string;
   };
-  showCaret?: boolean;
 }) => {
   const l10n = useL10n();
   return (
@@ -26,10 +24,7 @@ export const TopNavBar = (props: {
               link_id: "navbar_how_it_works",
             }}
           >
-            <>
-              {props.showCaret && <CaretRight alt="" />}
-              {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
-            </>
+            {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
           </TelemetryLink>
         </li>
         <li>
@@ -40,10 +35,7 @@ export const TopNavBar = (props: {
               link_id: "navbar_pricing",
             }}
           >
-            <>
-              {props.showCaret && <CaretRight alt="" />}
-              {l10n.getString("landing-premium-hero-navbar-link-pricing")}
-            </>
+            {l10n.getString("landing-premium-hero-navbar-link-pricing")}
           </TelemetryLink>
         </li>
         <li>
@@ -55,10 +47,7 @@ export const TopNavBar = (props: {
               link_id: "navbar_faqs",
             }}
           >
-            <>
-              {props.showCaret && <CaretRight alt="" />}
-              {l10n.getString("landing-premium-hero-navbar-link-faqs")}
-            </>
+            {l10n.getString("landing-premium-hero-navbar-link-faqs")}
           </TelemetryLink>
         </li>
         <li>
@@ -69,12 +58,7 @@ export const TopNavBar = (props: {
               link_id: "navbar_recent_breaches",
             }}
           >
-            <>
-              {props.showCaret && <CaretRight alt="" />}
-              {l10n.getString(
-                "landing-premium-hero-navbar-link-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
index 84116234a1d..fa2c3c44551 100644
--- a/src/app/(proper_react)/(redesign)/MobileShell.module.scss
+++ b/src/app/(proper_react)/(redesign)/MobileShell.module.scss
@@ -90,7 +90,7 @@
       top: 0;
       height: 0;
       // Overlap .content
-      z-index: 1;
+      z-index: 2;
 
       .mainMenu {
         align-items: center;
@@ -108,10 +108,9 @@
           a {
             align-items: center;
             display: flex;
-            padding: $spacing-md $spacing-xl;
+            padding: $spacing-sm $spacing-lg;
             gap: $spacing-sm;
             color: $color-black;
-            font-weight: 700;
             border-top: 1px solid $color-grey-10;
             text-decoration: none;
 
@@ -142,7 +141,8 @@
             border-bottom: none;
 
             a {
-              padding: $spacing-md $spacing-2xl;
+              font-weight: 400;
+              padding: $spacing-sm $spacing-2xl;
               border-top: none;
             }
           }
diff --git a/src/app/(proper_react)/(redesign)/MobileShell.tsx b/src/app/(proper_react)/(redesign)/MobileShell.tsx
index d23b891dfd8..b55b35ff528 100644
--- a/src/app/(proper_react)/(redesign)/MobileShell.tsx
+++ b/src/app/(proper_react)/(redesign)/MobileShell.tsx
@@ -11,11 +11,7 @@ import { Session } from "next-auth";
 import styles from "./MobileShell.module.scss";
 import monitorLogo from "../images/monitor-logo.webp";
 import { UpsellBadge } from "../../components/client/toolbar/UpsellBadge";
-import {
-  CaretRight,
-  CloseBigIcon,
-  ListIcon,
-} from "../../components/server/Icons";
+import { CloseBigIcon, ListIcon } from "../../components/server/Icons";
 import { UserMenu } from "../../components/client/toolbar/UserMenu";
 import { useL10n } from "../../hooks/l10n";
 import { PageLink } from "./PageLink";
@@ -132,10 +128,7 @@ export const MobileShell = (props: Props) => {
                       activeClassName={styles.isActive}
                       hasTelemetry={{ link_id: "navigation_dashboard" }}
                     >
-                      <>
-                        <CaretRight alt="" />
-                        {l10n.getString("main-nav-link-dashboard-label")}
-                      </>
+                      {l10n.getString("main-nav-link-dashboard-label")}
                     </PageLink>
                   </li>
                   {props.countryCode === "us" && (
@@ -146,10 +139,7 @@ export const MobileShell = (props: Props) => {
                         target="_blank"
                         hasTelemetry={{ link_id: "navigation_how_it_works" }}
                       >
-                        <>
-                          <CaretRight alt="" />
-                          {l10n.getString("main-nav-link-how-it-works-label")}
-                        </>
+                        {l10n.getString("main-nav-link-how-it-works-label")}
                       </PageLink>
                     </li>
                   )}
@@ -160,10 +150,7 @@ export const MobileShell = (props: Props) => {
                       target="_blank"
                       hasTelemetry={{ link_id: "navigation_faq" }}
                     >
-                      <>
-                        <CaretRight alt="" />
-                        {l10n.getString("main-nav-link-faq-label")}
-                      </>
+                      {l10n.getString("main-nav-link-faq-label")}
                     </PageLink>
                   </li>
                   <li key="settings">
@@ -172,10 +159,7 @@ export const MobileShell = (props: Props) => {
                       activeClassName={styles.isActive}
                       hasTelemetry={{ link_id: "navigation_settings" }}
                     >
-                      <>
-                        <CaretRight alt="" />
-                        {l10n.getString("main-nav-link-settings-label")}
-                      </>
+                      {l10n.getString("main-nav-link-settings-label")}
                     </PageLink>
                     {props.enabledFeatureFlags.includes(
                       "SettingsPageRedesign",
@@ -191,12 +175,9 @@ export const MobileShell = (props: Props) => {
                                   link_id: `navigation_settings_${submenuKey}`,
                                 }}
                               >
-                                <>
-                                  <CaretRight alt="" />
-                                  {l10n.getString(
-                                    `settings-tab-label-${submenuKey}`,
-                                  )}
-                                </>
+                                {l10n.getString(
+                                  `settings-tab-label-${submenuKey}`,
+                                )}
                               </PageLink>
                             </li>
                           );
@@ -216,7 +197,7 @@ export const MobileShell = (props: Props) => {
                 </div>
               </>
             ) : (
-              <TopNavBar styles={styles} showCaret />
+              <TopNavBar styles={styles} />
             )}
           </div>
         </nav>
diff --git a/src/app/components/server/Icons.tsx b/src/app/components/server/Icons.tsx
index 9c6ae73f821..1ba3a0954de 100644
--- a/src/app/components/server/Icons.tsx
+++ b/src/app/components/server/Icons.tsx
@@ -688,25 +688,3 @@ export const BackArrow = (props: SVGProps<SVGSVGElement> & { alt: string }) => {
     </svg>
   );
 };
-
-// Keywords: caret, right
-export const CaretRight = (
-  props: SVGProps<SVGSVGElement> & { alt: string },
-) => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      role="img"
-      aria-label={props.alt}
-      aria-hidden={props.alt === ""}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      className={`${props.className ?? ""} ${styles.colorifyFill}`}
-    >
-      {props.alt && <title>{props.alt}</title>}
-      <path d="M4.80004 15.8944C4.61029 15.8942 4.42485 15.8378 4.26713 15.7323C4.10942 15.6268 3.9865 15.477 3.91391 15.3016C3.84132 15.1263 3.82231 14.9334 3.85928 14.7473C3.89625 14.5612 3.98755 14.3902 4.12164 14.256L10.3872 7.99999L4.13124 1.74399C3.96166 1.562 3.86935 1.3213 3.87373 1.0726C3.87812 0.823891 3.97887 0.586598 4.15476 0.41071C4.33065 0.234821 4.56794 0.13407 4.81665 0.129681C5.06535 0.125293 5.30605 0.217611 5.48804 0.387185L12.4224 7.32158C12.6022 7.50159 12.7032 7.74558 12.7032 7.99999C12.7032 8.25439 12.6022 8.49839 12.4224 8.67839L5.48804 15.6128C5.39784 15.7031 5.29053 15.7745 5.1724 15.8229C5.05427 15.8712 4.92768 15.8955 4.80004 15.8944Z" />
-    </svg>
-  );
-};