Skip to content

Commit f9e09d9

Browse files
javiert-oktajaviert-okta
committed
Merge branch 'ui-redesign' of https://github.com/jsonwebtoken/jsonwebtoken.github.io into fix-e2e-tests
2 parents 4a35998 + 862d475 commit f9e09d9

File tree

19 files changed

+296
-197
lines changed

19 files changed

+296
-197
lines changed

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

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,13 @@
77

88
.content {
99
@include InnerContentGrid;
10-
11-
padding: 3rem 0 3rem 0;
12-
gap: 2rem;
13-
14-
@media #{$breakpoint-dimension-sm} {
15-
padding: 3rem 0 4rem 0;
16-
}
17-
18-
@media #{$breakpoint-dimension-md} {
19-
gap: 3rem;
20-
padding: 4rem 0 4rem 0;
21-
}
2210
}
2311

2412
.article {
2513
display: flex;
2614
flex-direction: column;
27-
2815
grid-column: span 6;
29-
max-width: 48.5rem;
16+
max-width: 56rem;
3017
justify-self: center;
3118

3219
@media #{$breakpoint-dimension-sm} {
@@ -47,7 +34,7 @@
4734
font-size: 2rem;
4835
line-height: 2.5rem;
4936
font-style: normal;
50-
font-weight: 400;
37+
font-weight: 500;
5138
letter-spacing: -0.05rem;
5239
margin-bottom: 1.5rem;
5340
font-family: var(--font-secondary), sans-serif;
@@ -68,13 +55,12 @@
6855

6956
h3 {
7057
color: var(--color_fg_bold);
71-
7258
font-size: 1.5rem;
7359
line-height: 2rem;
7460
font-style: normal;
75-
font-weight: 400;
61+
font-weight: 500;
7662
letter-spacing: -0.05rem;
77-
margin-bottom: 2rem;
63+
margin-bottom: 1.5rem;
7864
font-family: var(--font-secondary), sans-serif;
7965

8066
:global(html[lang="ja"]) & {
@@ -89,11 +75,11 @@
8975
"clig" off,
9076
"liga" off;
9177
font-size: 1rem;
92-
line-height: 1.5em;
78+
line-height: 1.45;
9379
font-style: normal;
9480
font-weight: 400;
9581
letter-spacing: -0.005rem;
96-
margin-bottom: 2rem;
82+
margin-bottom: 1rem;
9783

9884
:global(html[lang="ja"]) & {
9985
@include LocaleLineHeight("ja", 1.5rem);
@@ -107,12 +93,10 @@
10793

10894
ul,
10995
ol {
110-
list-style-position: inside;
11196
margin-top: 0;
11297

11398
ul,
11499
ol {
115-
list-style-position: inside;
116100
margin-left: 1.5rem;
117101
padding-left: 0;
118102
}
@@ -121,11 +105,11 @@
121105
li {
122106
margin-bottom: 0.75rem;
123107
font-size: 1rem;
124-
line-height: 2rem;
108+
line-height: 1.45;
125109
color: var(--color_fg_default);
126110
letter-spacing: -0.01px;
127-
text-indent: -1.5rem;
128-
padding-left: 1.5rem;
111+
margin-left: 1rem;
112+
padding-left: 1rem;
129113

130114
:global(html[lang="ja"]) & {
131115
@include LocaleLineHeight("ja", 2rem);
@@ -136,9 +120,9 @@
136120
&,
137121
&:hover,
138122
&:active {
139-
color: var(--color_fg_link_primary);
140123
text-decoration: underline;
141-
font-weight: 400;
124+
font-weight: 500;
125+
text-underline-offset: 0.25rem;
142126
}
143127
}
144128

@@ -148,42 +132,70 @@
148132
}
149133

150134
pre {
151-
margin-bottom: 2rem;
152-
background-color: var(--color_bg_code-editor);
135+
margin-bottom: 1rem;
136+
background-color: var(--color_bg_layer_alternate);
153137
color: var(--color_fg_default);
154138
font-size: 0.875rem;
155139
line-height: 1.375rem;
156140
font-style: normal;
157141
font-weight: 400;
158142
letter-spacing: 0.15px;
159-
padding: 0.75rem;
143+
padding: 0.25rem;
160144
border: 1px solid var(--color_border_bold);
161-
border-radius: 0.25rem;
145+
border-radius: 1rem;
162146

163147
code {
164-
color: var(--color_code_dark_blue2);
148+
display: block;
149+
width: 100%;
150+
color: var(--color_code_gray);
165151
background-color: var(--color_bg_code-editor);
166152
font-weight: 500;
167-
}
168-
169-
@media #{$breakpoint-dimension-sm} {
170-
border-radius: 0.5rem;
171-
padding: 1rem;
153+
font-size: 0.875rem;
154+
line-height: 1.35;
155+
border-radius: 0.75rem;
156+
padding: 0.75rem;
157+
box-shadow:
158+
0 0 0 0.5px rgba(0, 0, 0, 0.12),
159+
0 2px 2px -1px rgba(0, 0, 0, 0.04),
160+
0 4px 4px -2px rgba(0, 0, 0, 0.04),
161+
0 6px 6px -3px rgba(0, 0, 0, 0.04);
172162
}
173163
}
174164

175165
blockquote {
176-
background-color: var(--color_bg_state_info_subtle);
177-
padding: 1rem 1.5rem;
178-
margin: 2rem 0 2rem 0;
179-
border-radius: 0 0.5rem 0.5rem 0;
180-
border-left: 4px solid var(--color_border_state_info);
166+
background-color: var(--color_bg_layer);
167+
font-size: 0.875rem;
168+
padding: 1rem;
169+
margin: 2rem 0;
170+
border-radius: 1rem;
171+
border: 1px solid var(--color_border_default);
172+
box-shadow:
173+
0 0 0 0.5px rgba(0, 0, 0, 0.12),
174+
0 2px 2px -1px rgba(0, 0, 0, 0.04),
175+
0 4px 4px -2px rgba(0, 0, 0, 0.04),
176+
0 6px 6px -3px rgba(0, 0, 0, 0.04);
181177

182178
& * {
183-
color: var(--color_fg_on_state_info_subtle);
179+
color: var(--color_fg_default);
184180
padding: 0;
185181
margin: 0;
186182
}
183+
184+
p {
185+
display: flex;
186+
flex-direction: row;
187+
font-size: 0.875rem;
188+
align-items: center;
189+
gap: 0.75rem;
190+
}
191+
192+
::before {
193+
content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.5C9.03757 0.5 11.5 2.96243 11.5 6C11.5 9.03757 9.03757 11.5 6 11.5C2.96243 11.5 0.5 9.03757 0.5 6C0.5 2.96243 2.96243 0.5 6 0.5ZM6 5.25C5.72386 5.25 5.5 5.47386 5.5 5.75V8.75H6.5V5.75C6.5 5.47386 6.27614 5.25 6 5.25ZM6 3.125C5.65482 3.125 5.375 3.40482 5.375 3.75C5.375 4.09518 5.65482 4.375 6 4.375C6.34518 4.375 6.625 4.09518 6.625 3.75C6.625 3.40482 6.34518 3.125 6 3.125Z' fill='%235C5650'/%3E%3C/svg%3E%0A");
194+
display: block;
195+
padding: 0.25rem 0.4rem 0.125rem;
196+
border-radius: 9999px;
197+
background-color: var(--color_bg_layer_alternate);
198+
}
187199
}
188200

189201
*:has(+ blockquote) {

‎src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import React from "react";
33
export const GlobeIconComponent: React.FC = () => {
44
return (
55
<svg
6+
width="24"
7+
height="24"
68
viewBox="0 0 24 24"
79
fill="none"
810
xmlns="http://www.w3.org/2000/svg"
9-
aria-hidden="true"
1011
>
1112
<path
1213
fillRule="evenodd"
@@ -15,17 +16,20 @@ export const GlobeIconComponent: React.FC = () => {
1516
strokeWidth="1.5"
1617
strokeLinecap="round"
1718
strokeLinejoin="round"
19+
stroke="currentColor"
1820
></path>
1921
<path
2022
d="M2 12H22"
2123
strokeWidth="1.5"
2224
strokeLinecap="round"
2325
strokeLinejoin="round"
26+
stroke="currentColor"
2427
></path>
2528
<path
2629
fillRule="evenodd"
2730
clipRule="evenodd"
2831
d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
32+
stroke="currentColor"
2933
strokeWidth="1.5"
3034
strokeLinecap="round"
3135
strokeLinejoin="round"

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

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
1515
import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
1616
import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
17-
import { GlobeIconComponent } from "@/features/common/components/bars/ribbon/assets/globe-icon.component";
1817
import { ThemeModel } from "@/features/common/models/theme.model";
1918
import { useAppStore } from "@/features/common/services/app.store";
2019
import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
@@ -37,10 +36,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
3736
}) => {
3837
const theme$ = useAppStore((state) => state.theme$);
3938

40-
const currentLanguage = dictionary.languagePicker.options.filter(
41-
(element) => element.code === languageCode,
42-
)[0];
43-
4439
const sanitizedThemePickerCodeValue = useMemo(() => {
4540
return getSanitizedThemePickerCodeValue(themeCode);
4641
}, [themeCode]);
@@ -85,25 +80,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
8580
[dictionary.themePicker.options],
8681
);
8782

88-
const languageOptions = useMemo(
89-
() =>
90-
dictionary.languagePicker.options.map((option) => {
91-
return {
92-
code: option.code,
93-
full: {
94-
...option,
95-
icon: null,
96-
},
97-
compact: {
98-
...option,
99-
label: option.code.toUpperCase(),
100-
icon: null,
101-
},
102-
};
103-
}),
104-
[dictionary.languagePicker.options],
105-
);
106-
10783
const handleThemeSelection = useCallback(
10884
async (value: ThemePickerCodeValues) => {
10985
const themePreference = await savePreferredThemeInCookie(
@@ -202,21 +178,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
202178
listLabel: dictionary.themePicker.list.ariaLabel,
203179
}}
204180
/>
205-
{dictionary.languagePicker.options.length > 1 && (
206-
<RibbonPickerComponent
207-
icon={<GlobeIconComponent />}
208-
label={currentLanguage.label}
209-
compactLabel={currentLanguage.code.toUpperCase()}
210-
languageCode={languageCode}
211-
selectedOptionCode={languageCode}
212-
handleSelection={handleLanguageSelection}
213-
options={languageOptions}
214-
aria={{
215-
buttonLabel: dictionary.languagePicker.button.ariaLabel,
216-
listLabel: dictionary.languagePicker.list.ariaLabel,
217-
}}
218-
/>
219-
)}
220181
</div>
221182
</BoxComponent>
222183
</>

0 commit comments

Comments
 (0)