Skip to content

Commit

Permalink
chore: Remove mobile menu carets
Browse files Browse the repository at this point in the history
  • Loading branch information
@flozia
flozia committed Dec 20, 2024
1 parent a0503a8 commit e1516c6
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 72 deletions.
24 changes: 4 additions & 20 deletions src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/app/(proper_react)/(redesign)/MobileShell.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@
a {
align-items: center;
display: flex;
padding: $spacing-md $spacing-xl;
padding: $spacing-md $spacing-lg;
gap: $spacing-sm;
color: $color-black;
font-weight: 700;
font-weight: 600;
border-top: 1px solid $color-grey-10;
text-decoration: none;

Expand Down
37 changes: 9 additions & 28 deletions src/app/(proper_react)/(redesign)/MobileShell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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" && (
Expand All @@ -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>
)}
Expand All @@ -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">
Expand All @@ -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",
Expand All @@ -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>
);
Expand All @@ -216,7 +197,7 @@ export const MobileShell = (props: Props) => {
</div>
</>
) : (
<TopNavBar styles={styles} showCaret />
<TopNavBar styles={styles} />
)}
</div>
</nav>
Expand Down
22 changes: 0 additions & 22 deletions src/app/components/server/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

0 comments on commit e1516c6

Please sign in to comment.