Skip to content

Commit 71c01e8

Browse files
javiert-oktajaviert-okta
authored
Merge pull request #923 from jsonwebtoken/launch-fixes
Launch fixes
2 parents 360d4a5 + f96c7e4 commit 71c01e8

9 files changed

Lines changed: 108 additions & 229 deletions

File tree

‎src/features/common/components/bars/ribbon/ribbon.component.tsx‎

Lines changed: 2 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,21 @@
11
"use client";
22

3-
import React, { useCallback, useEffect, useMemo, useState } from "react";
3+
import React from "react";
44
import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
55
import styles from "./ribbon.module.scss";
66
import { BoxComponent } from "@/features/common/components/box/box.component";
7-
import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
87
import Link from "next/link";
9-
import {
10-
getSanitizedThemePickerCodeValue,
11-
isLightThemePreference,
12-
isSystemThemePreference,
13-
} from "@/features/themes/services/theme.utils";
14-
import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
15-
import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
16-
import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
17-
import { ThemeModel } from "@/features/common/models/theme.model";
18-
import { useAppStore } from "@/features/common/services/app.store";
19-
import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
20-
import {
21-
ThemeCookieValues,
22-
ThemePickerCodeValues,
23-
} from "@/features/common/values/theme.values";
24-
import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
258

269
interface RibbonComponentProps {
27-
themeCode: ThemeCookieValues;
28-
languageCode: string;
2910
dictionary: LayoutDictionaryModel["ribbon"];
3011
}
3112

3213
export const RibbonComponent: React.FC<RibbonComponentProps> = ({
33-
themeCode,
34-
languageCode,
3514
dictionary,
3615
}) => {
37-
const theme$ = useAppStore((state) => state.theme$);
38-
39-
const sanitizedThemePickerCodeValue = useMemo(() => {
40-
return getSanitizedThemePickerCodeValue(themeCode);
41-
}, [themeCode]);
42-
43-
const [currentTheme, setCurrentTheme] = useState<ThemeModel>(
44-
dictionary.themePicker.options.filter((element) =>
45-
isSystemThemePreference(themeCode)
46-
? isSystemThemePreference(element.code)
47-
: element.code === sanitizedThemePickerCodeValue,
48-
)[0],
49-
);
50-
51-
const themeOptions = useMemo(
52-
() =>
53-
dictionary.themePicker.options.map((option) => {
54-
return {
55-
code: option.code,
56-
full: {
57-
...option,
58-
label: option.label,
59-
icon: isSystemThemePreference(option.code) ? (
60-
<SystemIconComponent />
61-
) : isLightThemePreference(option.code) ? (
62-
<LightIconComponent />
63-
) : (
64-
<DarkIconComponent />
65-
),
66-
},
67-
compact: {
68-
...option,
69-
label: null,
70-
icon: isSystemThemePreference(option.code) ? (
71-
<SystemIconComponent />
72-
) : isLightThemePreference(option.code) ? (
73-
<LightIconComponent />
74-
) : (
75-
<DarkIconComponent />
76-
),
77-
},
78-
};
79-
}),
80-
[dictionary.themePicker.options],
81-
);
82-
83-
const handleThemeSelection = useCallback(
84-
async (value: ThemePickerCodeValues) => {
85-
const themePreference = await savePreferredThemeInCookie(
86-
value,
87-
languageCode,
88-
);
89-
90-
if (themePreference) {
91-
setCurrentTheme(themePreference);
92-
}
93-
},
94-
[languageCode],
95-
);
96-
97-
const handleLanguageSelection = useCallback(async (value: string) => {
98-
await savePreferredLanguage(value);
99-
}, []);
100-
101-
useEffect(() => {
102-
if (theme$) {
103-
setCurrentTheme(
104-
dictionary.themePicker.options.filter((element) =>
105-
isSystemThemePreference(themeCode)
106-
? isSystemThemePreference(element.code)
107-
: element.code === sanitizedThemePickerCodeValue,
108-
)[0],
109-
);
110-
}
111-
}, [
112-
dictionary.themePicker.options,
113-
sanitizedThemePickerCodeValue,
114-
theme$,
115-
themeCode,
116-
]);
11716

11817
return (
119-
<>
120-
<BoxComponent
121-
contentAs="section"
122-
containerClassName={styles.container}
123-
wrapperClassName={styles.wrapper}
124-
contentClassName={styles.content}
125-
aria-label="Page options"
126-
>
18+
12719
<div className={styles.cta}>
12820
<span className={styles.cta__title}>{dictionary.cta.title}</span>
12921
<Link
@@ -156,30 +48,5 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
15648
</div>
15749
</Link>
15850
</div>
159-
<div className={styles.actions}>
160-
<RibbonPickerComponent<ThemePickerCodeValues>
161-
label={null}
162-
compactLabel={null}
163-
icon={
164-
isSystemThemePreference(currentTheme.code) ? (
165-
<SystemIconComponent />
166-
) : isLightThemePreference(currentTheme.code) ? (
167-
<LightIconComponent />
168-
) : (
169-
<DarkIconComponent />
170-
)
171-
}
172-
languageCode={languageCode}
173-
selectedOptionCode={currentTheme.code}
174-
handleSelection={handleThemeSelection}
175-
options={themeOptions}
176-
aria={{
177-
buttonLabel: dictionary.themePicker.button.ariaLabel,
178-
listLabel: dictionary.themePicker.list.ariaLabel,
179-
}}
180-
/>
181-
</div>
182-
</BoxComponent>
183-
</>
18451
);
18552
};

‎src/features/common/components/bars/ribbon/ribbon.module.scss‎

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,10 @@
11
@use "@/libs/theme/styles/variables" as *;
22
@use "@/libs/theme/styles/mixins" as *;
33

4-
.container {
5-
@include Container;
6-
7-
background: var(--color_bg_app_bar);
8-
border-bottom: 1px solid;
9-
border-image-slice: 1;
10-
border-image-source: linear-gradient(
11-
135deg,
12-
rgb(76, 183, 163) 0%,
13-
rgb(63, 89, 228) 50%,
14-
rgb(64, 22, 160) 100%
15-
);
16-
}
17-
18-
.wrapper {
19-
@include ExtendedGrid;
20-
height: $ribbon-height;
21-
}
22-
23-
.content {
24-
position: relative;
25-
@include InnerContentFlex;
26-
height: 100%;
27-
grid-column: 1 / -1;
28-
align-items: center;
29-
justify-content: space-between;
30-
31-
color: $neutrals-light-100-snow;
32-
}
33-
344
.cta {
355
display: flex;
6+
align-items: center;
7+
justify-content: center;
368
font-size: 0.75rem;
379
line-height: 1.25rem;
3810
color: $Neutral0;
@@ -88,11 +60,3 @@
8860
}
8961
}
9062

91-
.actions {
92-
display: flex;
93-
gap: 0.5rem;
94-
95-
@media #{$breakpoint-dimension-md} {
96-
gap: 1rem;
97-
}
98-
}

‎src/features/common/components/headers/header/header.component.tsx‎

Lines changed: 48 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from "@/features/common/values/theme.values";
2626
import { ThemeModel } from "@/features/common/models/theme.model";
2727
import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
28+
import { RibbonComponent } from "../../bars/ribbon/ribbon.component";
2829

2930
interface HeaderComponentProps {
3031
themeCode: ThemeCookieValues;
@@ -65,7 +66,7 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
6566
),
6667
};
6768
}),
68-
[dictionary.ribbon.themePicker.options]
69+
[dictionary.ribbon.themePicker.options],
6970
);
7071

7172
const sanitizedThemePickerCodeValue = useMemo(() => {
@@ -76,22 +77,22 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
7677
dictionary.ribbon.themePicker.options.filter((element) =>
7778
isSystemThemePreference(themeCode)
7879
? isSystemThemePreference(element.code)
79-
: element.code === sanitizedThemePickerCodeValue
80-
)[0]
80+
: element.code === sanitizedThemePickerCodeValue,
81+
)[0],
8182
);
8283

8384
const handleThemeSelection = useCallback(
8485
async (value: ThemePickerCodeValues) => {
8586
const themePreference = await savePreferredThemeInCookie(
8687
value,
87-
languageCode
88+
languageCode,
8889
);
8990

9091
if (themePreference) {
9192
setCurrentTheme(themePreference);
9293
}
9394
},
94-
[languageCode]
95+
[languageCode],
9596
);
9697

9798
return (
@@ -102,47 +103,52 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
102103
contentClassName={styles.content}
103104
aria-label="Main navigation"
104105
>
105-
<div className={styles.brand}>
106-
<SiteBrandComponent
107-
path={languagePathPrefix}
108-
languageCode={languageCode}
109-
/>
106+
<div className={styles.ribbonContainer}>
107+
<RibbonComponent dictionary={dictionary.ribbon} />
110108
</div>
111-
<div className={styles.navContainer}>
112-
<div className={styles.navTabs}>
113-
<ul className={styles.navList}>
114-
{dictionary.header.links.map((link) => {
115-
const linkPath =
116-
languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
117-
? link.path
118-
: createUrlPath([languagePathPrefix, link.path]);
109+
<div className={styles.outerNavContainer}>
110+
<div className={styles.brand}>
111+
<SiteBrandComponent
112+
path={languagePathPrefix}
113+
languageCode={languageCode}
114+
/>
115+
</div>
116+
<div className={styles.navContainer}>
117+
<div className={styles.navTabs}>
118+
<ul className={styles.navList}>
119+
{dictionary.header.links.map((link) => {
120+
const linkPath =
121+
languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
122+
? link.path
123+
: createUrlPath([languagePathPrefix, link.path]);
119124

120-
return (
121-
<li
122-
className={styles.navList__item}
123-
key={link.label}
124-
data-active={topSegmentPath === link.path}
125-
>
126-
<Link
127-
{...(link.isExternal
128-
? { target: "_blank", rel: "noopener noreferrer" }
129-
: {})}
130-
href={linkPath}
125+
return (
126+
<li
127+
className={styles.navList__item}
128+
key={link.label}
129+
data-active={topSegmentPath === link.path}
131130
>
132-
{link.label}
133-
</Link>
134-
</li>
135-
);
136-
})}
137-
</ul>
131+
<Link
132+
{...(link.isExternal
133+
? { target: "_blank", rel: "noopener noreferrer" }
134+
: {})}
135+
href={linkPath}
136+
>
137+
{link.label}
138+
</Link>
139+
</li>
140+
);
141+
})}
142+
</ul>
143+
</div>
144+
</div>
145+
<div className={styles.actions}>
146+
<ThemePickerComponent
147+
options={themeOptions}
148+
handleSelection={handleThemeSelection}
149+
selectedOptionCode={currentTheme.code}
150+
/>
138151
</div>
139-
</div>
140-
<div className={styles.actions}>
141-
<ThemePickerComponent
142-
options={themeOptions}
143-
handleSelection={handleThemeSelection}
144-
selectedOptionCode={currentTheme.code}
145-
/>
146152
</div>
147153
</BoxComponent>
148154
);

‎src/features/common/components/headers/header/header.module.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
}
3333

3434
.content {
35+
display: flex;
36+
flex-direction: column;
37+
}
38+
39+
.outerNavContainer {
3540
display: flex;
3641
width: 100%;
3742
margin: 0 auto;
@@ -49,6 +54,14 @@
4954
z-index: 100;
5055
}
5156

57+
.ribbonContainer {
58+
margin-top: 0.25rem;
59+
display: flex;
60+
justify-content: center;
61+
padding-bottom: 1rem;
62+
63+
}
64+
5265
.navContainer {
5366
display: flex;
5467
justify-content: center;

0 commit comments

Comments
 (0)