Skip to content

Commit bf2fe57

Browse files
christiansamaniego-oktachristiansamaniego-okta
authored
Navbar update (#879)
* remove ribbon component and apply mobile navbar style * add jwt icon component * add jwt wordmark and rotating animation * style wordmark and subtitle * style dropdown mobile menu * style desktop nav items * create theme-picker component * style theme picker * fix error page props and build errors
1 parent 72cf3f6 commit bf2fe57

29 files changed

+627
-313
lines changed

‎src/app/global-error.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export default function GlobalError({
2222
<ErrorPageComponent
2323
languageCode={languageCode}
2424
themeCode={themeCode}
25-
dictionary={layoutDictionary}
2625
>
2726
<UnexpectedErrorComponent
2827
metadata={layoutDictionary.errors.unexpectedError}

‎src/app/not-found.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default function NotFound() {
1515
<ErrorPageComponent
1616
languageCode={languageCode}
1717
themeCode={themeCode}
18-
dictionary={layoutDictionary}
1918
>
2019
<NotFoundComponent metadata={layoutDictionary.errors.notFound} />
2120
</ErrorPageComponent>

‎src/features/common/assets/auth0-logo.component.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
interface Auth0LogoComponentProps {
2+
title: string;
3+
}
4+
5+
export const Auth0LogoComponent: React.FC<Auth0LogoComponentProps> = ({title}) => {
6+
return (
7+
<svg
8+
width="110"
9+
height="32"
10+
viewBox="0 0 110 32"
11+
fill="none"
12+
xmlns="http://www.w3.org/2000/svg"
13+
>
14+
<title>{title}</title>
15+
<path
16+
d="M35.0768 20.0987C35.0768 16.6589 37.9306 15.3594 41.523 15.3594H45.0138C45.2685 15.3594 45.3961 15.2318 45.3961 14.9771V14.4422C45.3961 12.5822 43.9949 11.6904 41.9308 11.6904C40.3256 11.6904 39.2301 12.2258 38.6437 13.3723C38.44 13.7801 38.2614 13.9327 37.8285 13.9327H36.3253C35.8414 13.9327 35.6118 13.678 35.6118 13.2957C35.6118 13.1171 35.6628 12.8624 35.8665 12.4295C36.8348 10.4168 38.7203 9.11731 42.2366 9.11731C46.1603 9.11731 48.4791 10.8502 48.4791 14.6463V20.9398C48.4791 21.5768 48.7083 21.7299 49.2433 21.7299H49.2688C49.7782 21.7299 50.0329 21.9846 50.0329 22.4941V23.7681C50.0329 24.2775 49.7782 24.5323 49.2688 24.5323H48.377C46.9244 24.5323 46.1858 24.15 45.727 23.1562C45.6504 22.9776 45.5994 22.927 45.4978 22.927C45.3961 22.927 45.3192 22.978 45.1155 23.1562C43.969 24.1755 42.5419 24.7104 40.6309 24.7104C37.7261 24.7104 35.0768 23.3599 35.0768 20.0987ZM45.3961 18.3659V18.1111C45.3961 17.8564 45.2685 17.7289 45.0138 17.7289H41.1918C39.4083 17.7289 38.1598 18.3914 38.1598 19.9711C38.1598 21.5509 39.4338 22.2134 40.9626 22.2134C43.3324 22.2134 45.3961 20.7353 45.3961 18.3659Z"
17+
fill="currentColor"
18+
/>
19+
<path
20+
d="M51.3072 17.8761V10.0538C51.3072 9.54433 51.5619 9.28961 52.0714 9.28961H53.6256C54.1351 9.28961 54.3898 9.54433 54.3898 10.0538V17.5958C54.3898 20.0418 55.2815 21.8508 57.8296 21.8508C60.5307 21.8508 61.8043 19.7105 61.8043 17.239V10.0533C61.8043 9.54391 62.059 9.28919 62.5684 9.28919H64.1227C64.6321 9.28919 64.8868 9.54391 64.8868 10.0533V23.7618C64.8868 24.2712 64.6321 24.526 64.1227 24.526H62.7215C62.2627 24.526 62.008 24.2968 61.9314 23.8379L61.8039 23.1499C61.7783 22.9968 61.7018 22.9207 61.5746 22.9207C61.473 22.9207 61.3965 22.9717 61.2693 23.0993C60.2245 24.042 58.9505 24.7046 57.065 24.7046C53.0647 24.7046 51.3072 21.8253 51.3072 17.8761Z"
21+
fill="currentColor"
22+
/>
23+
<path
24+
d="M67.7423 20.377V4.93616C67.7423 4.42672 67.9971 4.172 68.5065 4.172H70.0608C70.5702 4.172 70.8249 4.42672 70.8249 4.93616V8.91088C70.8249 9.1656 70.9525 9.29317 71.2072 9.29317H75.7173C76.2267 9.29317 76.4815 9.54789 76.4815 10.0573V11.3313C76.4815 11.8408 76.2267 12.0959 75.7173 12.0959H71.2072C70.9525 12.0959 70.8249 12.2235 70.8249 12.4782V20.0968C70.8249 21.2177 71.3344 21.7276 72.4808 21.7276H76.0226C76.5321 21.7276 76.7868 21.9823 76.7868 22.4918V23.7658C76.7868 24.2752 76.5321 24.5299 76.0226 24.5299H72.3281C69.1431 24.5299 67.7423 23.2563 67.7423 20.377Z"
25+
fill="currentColor"
26+
/>
27+
<path
28+
d="M78.9031 23.7658V4.93616C78.9031 4.42672 79.1578 4.172 79.6672 4.172H81.2215C81.7309 4.172 81.9856 4.42672 81.9856 4.93616V10.8729C81.9856 11.026 82.0873 11.1277 82.2148 11.1277C82.2914 11.1277 82.3675 11.1021 82.5971 10.8984C83.7181 9.87915 84.941 9.11499 87.0052 9.11499C90.9799 9.11499 92.7638 11.9177 92.7638 16.0455V23.7662C92.7638 24.2756 92.509 24.5304 91.9996 24.5304H90.4453C89.9359 24.5304 89.6812 24.2756 89.6812 23.7662V16.1986C89.6812 13.8288 88.7639 11.9688 86.2669 11.9688C83.5913 11.9688 81.9865 14.1345 81.9865 17.1924V23.7662C81.9865 24.2756 81.7317 24.5304 81.2223 24.5304H79.6681C79.1586 24.5304 78.9031 24.2752 78.9031 23.7658Z"
29+
fill="currentColor"
30+
/>
31+
<path
32+
d="M94.6995 14.3628C94.6995 7.45772 97.3747 3.99244 102.165 3.99244C106.955 3.99244 109.63 7.45772 109.63 14.3628C109.63 21.2678 106.955 24.7076 102.165 24.7076C97.3751 24.7076 94.6995 21.2423 94.6995 14.3628ZM98.445 16.6816L105.197 9.19057C105.299 9.063 105.35 8.98687 105.35 8.80828C105.35 8.68071 105.325 8.52804 105.146 8.29842C104.458 7.45772 103.491 6.84622 102.165 6.84622C99.3627 6.84622 97.783 9.39426 97.783 14.3883C97.783 15.1014 97.8085 15.7388 97.9105 16.605C97.936 16.7581 98.0121 16.8598 98.1397 16.8598C98.2163 16.8598 98.3179 16.8343 98.445 16.6816ZM106.548 14.3117C106.548 13.5982 106.522 12.9612 106.42 12.095C106.394 11.9419 106.318 11.8402 106.191 11.8402C106.114 11.8402 106.012 11.8658 105.885 12.0188L99.1327 19.5099C99.031 19.6374 98.98 19.7136 98.98 19.8921C98.98 20.0197 99.0055 20.1724 99.1837 20.4016C99.8717 21.2423 100.84 21.8538 102.165 21.8538C104.968 21.8538 106.548 19.3057 106.548 14.3117Z"
33+
fill="currentColor"
34+
/>
35+
<path
36+
d="M1.68935 13.6673C6.93599 12.8036 11.0479 8.69124 11.912 3.4446L12.3324 0.893214C12.4131 0.399668 12.0078 -0.0357391 11.5088 0.0023225C7.51403 0.311416 3.74928 1.63395 1.67011 2.48636C0.660431 2.90086 0 3.8821 0 4.97417V13.039C0 13.5134 0.424115 13.8743 0.892565 13.7974L1.68935 13.6673Z"
37+
fill="currentColor"
38+
/>
39+
<path
40+
d="M14.4422 3.44423C15.3059 8.69088 19.4183 12.8028 24.6649 13.6669L25.4617 13.7974C25.9301 13.8744 26.3543 13.5134 26.3543 13.0391V4.97423C26.3543 3.88173 25.6938 2.90092 24.6842 2.48642C22.605 1.63234 18.8386 0.311472 14.8454 0.00237818C14.3465 -0.0361017 13.9395 0.398052 14.0219 0.893271L14.4422 3.44423Z"
41+
fill="currentColor"
42+
/>
43+
<path
44+
d="M24.665 16.1959C19.4184 17.0596 15.3065 21.1719 14.4423 26.4186L13.9183 31.3983C13.8702 31.8476 14.3696 32.1642 14.7456 31.9128C14.7494 31.9107 14.7514 31.909 14.7552 31.907C18.0457 29.6877 25.5517 23.8785 26.2946 16.6221C26.331 16.2649 26.0143 15.9734 25.6609 16.0307L24.6663 16.1938L24.665 16.1959Z"
45+
fill="currentColor"
46+
/>
47+
<path
48+
d="M11.9135 26.4136C11.0498 21.167 6.93746 17.055 1.69082 16.1909L0.621329 16.0144C0.30638 15.9625 0.024473 16.2235 0.0550059 16.5423C0.759355 23.8392 8.36917 29.6848 11.6885 31.9079C12.0323 32.1362 12.4869 31.8618 12.443 31.4511L11.9135 26.4136Z"
49+
fill="currentColor"
50+
/>
51+
</svg>
52+
);
53+
};

‎src/features/common/assets/auth0-logo.png‎

-10.1 KB
Binary file not shown.

‎src/features/common/assets/jwt-flower.png‎

-9.58 KB
Binary file not shown.

‎src/features/common/assets/jwt-logo.component.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
export const JwtLogoComponent: React.FC = () => {
2+
return (
3+
<svg
4+
width="32"
5+
height="32"
6+
viewBox="0 0 32 32"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
d="M18.3683 8.60806V0H13.5682V8.60806L15.9683 11.9041L18.3683 8.60806Z"
14+
fill="#191919"
15+
style={{ fill: '#191919', fillOpacity: 1 }}
16+
/>
17+
<path
18+
fillRule="evenodd"
19+
clipRule="evenodd"
20+
d="M13.5682 23.3919V32H18.3683V23.3919L15.9683 20.0959L13.5682 23.3919Z"
21+
fill="#191919"
22+
style={{ fill: '#191919', fillOpacity: 1 }}
23+
/>
24+
<path
25+
fillRule="evenodd"
26+
clipRule="evenodd"
27+
d="M18.3684 23.3928L23.4244 30.3689L27.3285 27.5208L22.2404 20.5768L18.3684 19.2968V23.3928Z"
28+
fill="#3EC6EB"
29+
style={{ fill: '#3EC6EB', fillOpacity: 1 }}
30+
/>
31+
<path
32+
fillRule="evenodd"
33+
clipRule="evenodd"
34+
d="M13.5682 8.60823L8.51218 1.63218L4.60815 4.4802L9.69619 11.4243L13.5682 12.7043V8.60823Z"
35+
fill="#3EC6EB"
36+
style={{ fill: '#3EC6EB', fillOpacity: 1 }}
37+
/>
38+
<path
39+
fillRule="evenodd"
40+
clipRule="evenodd"
41+
d="M9.69607 11.4244L1.50401 8.76841L0 13.3444L8.19206 16.0005L12.0961 14.7525L9.69607 11.4244Z"
42+
fill="#FF44DD"
43+
style={{ fill: '#FF44DD', fillOpacity: 1 }}
44+
/>
45+
<path
46+
fillRule="evenodd"
47+
clipRule="evenodd"
48+
d="M19.8402 17.2478L22.2402 20.5758L30.4323 23.2319L31.9363 18.6558L23.7442 15.9998L19.8402 17.2478Z"
49+
fill="#FF44DD"
50+
style={{ fill: '#FF44DD', fillOpacity: 1 }}
51+
/>
52+
<path
53+
fillRule="evenodd"
54+
clipRule="evenodd"
55+
d="M23.7442 16.0005L31.9363 13.3444L30.4323 8.76841L22.2402 11.4244L19.8402 14.7525L23.7442 16.0005Z"
56+
fill="#635DFF"
57+
style={{ fill: '#635DFF', fillOpacity: 1 }}
58+
/>
59+
<path
60+
fillRule="evenodd"
61+
clipRule="evenodd"
62+
d="M8.19206 15.9998L0 18.6558L1.50401 23.2319L9.69607 20.5758L12.0961 17.2478L8.19206 15.9998Z"
63+
fill="#635DFF"
64+
style={{ fill: '#635DFF', fillOpacity: 1 }}
65+
/>
66+
<path
67+
fillRule="evenodd"
68+
clipRule="evenodd"
69+
d="M9.69619 20.5768L4.60815 27.5208L8.51218 30.3689L13.5682 23.3928V19.2968L9.69619 20.5768Z"
70+
fill="#FF4F40"
71+
style={{ fill: '#FF4F40', fillOpacity: 1 }}
72+
/>
73+
<path
74+
fillRule="evenodd"
75+
clipRule="evenodd"
76+
d="M22.2404 11.4243L27.3285 4.4802L23.4244 1.63218L18.3684 8.60823V12.7043L22.2404 11.4243Z"
77+
fill="#FF4F40"
78+
style={{ fill: '#FF4F40', fillOpacity: 1 }}
79+
/>
80+
</svg>
81+
);
82+
};

‎src/features/common/assets/jwt-wordmark.component.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export const JwtWordmarkComponent: React.FC = () => {
2+
return (
3+
<svg
4+
width="51"
5+
height="20"
6+
viewBox="0 0 51 20"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M7 0V12C7 15.3137 4.31371 18 1 18V18"
12+
stroke="black"
13+
style={{ stroke: 'black', strokeOpacity: 1 }}
14+
strokeWidth="4"
15+
/>
16+
<path
17+
d="M13.8932 0V14.5C13.8932 16.433 15.4602 18 17.3932 18V18C19.3262 18 20.8932 16.433 20.8932 14.5V5C20.8932 3.34315 22.2363 2 23.8932 2V2C25.55 2 26.8932 3.34315 26.8932 5V14.5C26.8932 16.433 28.4602 18 30.3932 18V18C32.3262 18 33.8932 16.433 33.8932 14.5V0"
18+
stroke="black"
19+
style={{ stroke: 'black', strokeOpacity: 1 }}
20+
strokeWidth="4"
21+
/>
22+
<path
23+
d="M38.8932 2H44.8932M44.8932 2V20M44.8932 2H50.8932"
24+
stroke="black"
25+
style={{ stroke: 'black', strokeOpacity: 1 }}
26+
strokeWidth="4"
27+
/>
28+
</svg>
29+
);
30+
};

‎src/features/common/components/errors/error-page/error-page.component.tsx‎

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,44 @@
11
import React from "react";
22
import styles from "./error-page.module.scss";
33
import { ShellComponent } from "@/features/common/components/shell/shell.component";
4-
import { RibbonComponent } from "@/features/common/components/bars/ribbon/ribbon.component";
54
import { MobileHeaderComponent } from "@/features/common/components/headers/mobile-header/mobile-header.component";
65
import { HeaderComponent } from "@/features/common/components/headers/header/header.component";
76
import { FooterComponent } from "@/features/common/components/footer/footer.component";
8-
import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
97
import { ThemeCookieValues } from "@/features/common/values/theme.values";
10-
import { getImageDictionary } from "@/features/localization/services/images-dictionary.service";
11-
import { SiteLogoComponent } from "@/features/common/components/site-logo/site-logo.component";
8+
import { getLayoutDictionary } from "@/features/localization/services/language-dictionary.service";
129

1310
interface ErrorPageComponentProps {
1411
languageCode: string;
1512
themeCode: ThemeCookieValues;
16-
dictionary: LayoutDictionaryModel;
1713
children: React.ReactNode;
1814
}
1915

2016
export const ErrorPageComponent: React.FC<ErrorPageComponentProps> = ({
2117
languageCode,
2218
themeCode,
23-
dictionary,
2419
children,
2520
}) => {
26-
const images = getImageDictionary(languageCode);
21+
const layoutDictionary = getLayoutDictionary(languageCode);
2722

2823
return (
2924
<html lang={languageCode} data-theme={themeCode}>
3025
<ShellComponent languageCode={languageCode} themeCode={themeCode}>
3126
<header className={styles.header}>
3227
<MobileHeaderComponent
3328
languageCode={languageCode}
34-
dictionary={dictionary.header}
35-
siteLogo={<SiteLogoComponent languageCode={languageCode} />}
36-
ribbon={
37-
<RibbonComponent
38-
themeCode={themeCode}
39-
languageCode={languageCode}
40-
dictionary={dictionary.ribbon}
41-
/>
42-
}
29+
dictionary={layoutDictionary}
30+
themeCode={themeCode}
4331
/>
4432
<HeaderComponent
4533
languageCode={languageCode}
46-
dictionary={dictionary.header}
47-
siteLogo={<SiteLogoComponent languageCode={languageCode} />}
48-
ribbon={
49-
<RibbonComponent
50-
themeCode={themeCode}
51-
languageCode={languageCode}
52-
dictionary={dictionary.ribbon}
53-
/>
54-
}
34+
dictionary={layoutDictionary}
35+
themeCode={themeCode}
5536
/>
5637
</header>
5738
<main className={styles.main}>{children}</main>
5839
<FooterComponent
5940
languageCode={languageCode}
60-
dictionary={dictionary.footer}
61-
auth0Logo={images.logos.auth0}
62-
siteLogo={<SiteLogoComponent languageCode={languageCode} />}
41+
dictionary={layoutDictionary.footer}
6342
/>
6443
</ShellComponent>
6544
</html>

‎src/features/common/components/footer/footer.component.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,23 @@ import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.conf
1515
import { sitePaths } from "@/features/seo/site-tree";
1616
import { createUrlPath } from "@/libs/utils/path.utils";
1717
import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
18-
import { StaticImageMetadataModel } from "@/features/common/models/static-image-metadata.model";
1918
import { Button } from "react-aria-components";
19+
import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
20+
import { getImageDictionary } from "@/features/localization/services/images-dictionary.service";
2021

2122
interface FooterComponentProps {
2223
languageCode: string;
2324
dictionary: LayoutDictionaryModel["footer"];
24-
auth0Logo: StaticImageMetadataModel;
25-
siteLogo: React.ReactNode;
2625
}
2726

2827
export const FooterComponent: React.FC<FooterComponentProps> = ({
2928
languageCode,
3029
dictionary,
31-
auth0Logo,
32-
siteLogo,
3330
}) => {
3431
const [modalState, setModalState] = useState<ModalStateValues>(
3532
ModalStateValues.CLOSED,
3633
);
34+
const images = getImageDictionary(languageCode);
3735

3836
const languagePathPrefix: string =
3937
languageCode === DEFAULT_LANGUAGE_CODE
@@ -66,9 +64,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
6664
contentClassName={styles.content}
6765
>
6866
<div className={styles.siteLogo}>
69-
<SiteBrandComponent path={languagePathPrefix}>
70-
{siteLogo}
71-
</SiteBrandComponent>
67+
<SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
7268
</div>
7369
<div className={styles.resources}>
7470
<span className={clsx(styles.resources__title, MonoFont.className)}>
@@ -162,17 +158,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
162158
target="_blank"
163159
href="https://auth0.com/"
164160
>
165-
<Image
166-
src={auth0Logo.src}
167-
alt={auth0Logo.alt}
168-
sizes="100vh"
169-
style={{
170-
width: "auto",
171-
height: "100%",
172-
}}
173-
height={auth0Logo.height}
174-
width={auth0Logo.width}
175-
/>
161+
<Auth0LogoComponent title={images.title}/>
176162
</Link>
177163
<span className={styles.bottomSection__copyright}>
178164
{dictionary.copyright}

‎src/features/common/components/footer/footer.module.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -267,8 +267,5 @@
267267
padding-bottom: 1rem;
268268
row-gap: 2rem;
269269

270-
color: $neutrals-light-100-snow;
271-
272-
@media #{$breakpoint-dimension-xs} {
273-
}
270+
color: var(--color_fg_default);
274271
}

0 commit comments

Comments
 (0)