Skip to content

Commit 1de4f07

Browse files
javiert-oktajaviert-okta
authored
Merge pull request #892 from jsonwebtoken/update-libraries-page
Update libraries page
2 parents 9671527 + ceb6355 commit 1de4f07

File tree

10 files changed

+136
-122
lines changed

10 files changed

+136
-122
lines changed

‎src/features/libraries/components/check-mark.component.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
import React from "react";
2+
import styles from "./check-mark.module.scss";
23

34
type CheckMarkComponentProps = {};
45

56
export const CheckMarkComponent: React.FC<CheckMarkComponentProps> = () => {
67
return (
78
<svg
9+
className={styles.check}
810
xmlns="http://www.w3.org/2000/svg"
911
width="24"
1012
height="24"
1113
viewBox="0 0 24 24"
12-
fill="none"
14+
fill="currentColor"
1315
>
14-
<path
15-
d="M7.9216 11.7687L10.75 14.5971L16.4069 8.94022L17.8211 10.3544L11.8107 16.3648C11.2249 16.9506 10.2752 16.9506 9.68937 16.3648L6.50739 13.1829L7.9216 11.7687Z"
16-
fill="#4CB7A3"
17-
/>
16+
<path d="M7.9216 11.7687L10.75 14.5971L16.4069 8.94022L17.8211 10.3544L11.8107 16.3648C11.2249 16.9506 10.2752 16.9506 9.68937 16.3648L6.50739 13.1829L7.9216 11.7687Z" />
1817
<path
1918
fillRule="evenodd"
2019
clipRule="evenodd"
2120
d="M12 1.56152C5.92487 1.56152 1 6.48639 1 12.5615C1 18.6367 5.92487 23.5615 12 23.5615C18.0751 23.5615 23 18.6367 23 12.5615C23 6.48639 18.0751 1.56152 12 1.56152ZM3 12.5615C3 7.59096 7.02944 3.56152 12 3.56152C16.9706 3.56152 21 7.59096 21 12.5615C21 17.5321 16.9706 21.5615 12 21.5615C7.02944 21.5615 3 17.5321 3 12.5615Z"
22-
fill="#4CB7A3"
2321
/>
2422
</svg>
2523
);

‎src/features/libraries/components/check-mark.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "@/libs/theme/styles/variables" as *;
2+
3+
.check {
4+
color: var(--color_bg_state_success);
5+
}

‎src/features/libraries/components/library-card/library-card..module.scss‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,27 @@
44
grid-column: span 1;
55
display: flex;
66
flex-direction: column;
7-
8-
border-radius: 1rem;
9-
border: 1px solid var(--color_border_bold);
7+
background-color: var(--color_bg_layer);
8+
border-radius: 1.5rem;
9+
border: 1px solid var(--color_border_default);
1010
overflow: hidden;
11+
transition: all .3s ease-out;
1112
}
1213

1314
.header {
1415
display: flex;
1516
align-items: center;
16-
gap: 1rem;
17-
padding: 1rem 1.5rem;
18-
color: var(--color_fg_bold);
19-
20-
font-size: 1rem;
17+
gap: .5rem;
18+
padding: 1rem;
2119
font-style: normal;
22-
line-height: 1.25rem;
2320

24-
border-bottom: 1px solid var(--color_border_bold);
25-
background: var(--color_bg_layer_alternate);
21+
span {
22+
color: var(--color_fg_bold);
23+
font-size: .875rem;
24+
font-family: var(--font-primary);
25+
line-height: 1.35;
26+
font-weight: 700;
27+
}
2628
}
2729

2830
.logo {
@@ -34,20 +36,16 @@
3436

3537
.content {
3638
display: grid;
37-
grid-template-columns: repeat(2, 1fr);
38-
padding: 1.5rem;
39-
border-bottom: 1px solid var(--color_border_bold);
40-
background: var(--color_bg_layer_alternate);
39+
grid-template-columns: repeat(2,1fr);
40+
padding: 1.5rem 1.5rem 2.5rem;
4141
}
4242

4343
.minVersion {
44-
grid-column: 1 / -1;
45-
background-color: var(--color_bg_state_caution_subtle);
44+
grid-column: 1/-1;
4645
color: var(--color_fg_on_state_caution_subtle);
47-
padding: 0.5rem 1.5rem;
48-
text-transform: uppercase;
49-
font-size: 0.75rem;
50-
letter-spacing: 0.2px;
46+
padding: 1rem;
47+
font-size: .875rem;
48+
letter-spacing: .2px;
5149
display: flex;
5250
justify-content: space-between;
5351
}
@@ -63,47 +61,52 @@
6361
display: flex;
6462
flex-direction: column;
6563
list-style-type: none;
66-
gap: 0.75rem;
64+
gap: 0.5rem;
65+
66+
& svg {
67+
width: 1.25rem;
68+
height: 1.25rem;
69+
}
6770

6871
& li {
69-
height: 1.5rem;
72+
height: 1.25rem;
7073

7174
code {
72-
padding: 1px 0.125rem;
73-
border-radius: 0.125rem;
74-
color: var(--color_code_dark_blue);
75-
background-color: var(--color_bg_layer_bold);
76-
font-size: 0.875rem;
75+
padding: .125rem .25rem;
76+
border-radius: .5rem;
77+
color: var(--color_fg_bold);
78+
background-color: var(--color_bg_layer_alternate);
79+
box-shadow: 0 0 0 .5px rgba(0,0,0,.12),0 2px 2px -1px rgba(0,0,0,.04),0 4px 4px -2px rgba(0,0,0,.04);
80+
font-size: .75rem;
7781
font-style: normal;
7882
font-weight: 500;
79-
line-height: 1.25rem; /* 142.857% */
83+
line-height: 1.5;
8084
}
8185
}
8286
}
8387

84-
.listItem {
88+
.listItem, .metadata {
8589
display: flex;
8690
align-items: center;
87-
gap: 0.5rem;
8891
color: var(--color_fg_default);
92+
font-size: .875rem;
93+
font-weight: 500;
94+
}
95+
96+
.listItem {
97+
gap: 0.5rem;
8998
}
9099

91100
.metadata {
92-
display: flex;
93-
align-items: center;
94101
justify-content: space-between;
95-
padding: 1.25rem 1.5rem;
96-
97-
border-bottom: 1px solid var(--color_border_bold);
102+
padding: .5rem;
103+
width: calc(100% - 1rem);
104+
margin: 0 auto;
105+
border-radius: .5rem;
98106
background: var(--color_bg_layer_alternate);
99-
100-
color: var(--color_fg_default);
101-
font-size: 0.75rem;
102107
font-style: normal;
103-
font-weight: 500;
104108
line-height: 140%;
105-
letter-spacing: 0.18px;
106-
white-space: nowrap;
109+
letter-spacing: .18px;
107110

108111
svg {
109112
path {
@@ -125,7 +128,7 @@
125128

126129
.repo {
127130
display: flex;
128-
gap: 1rem;
131+
gap: 0.5rem;
129132
}
130133

131134
.repo__stars {
@@ -139,23 +142,24 @@
139142
display: flex;
140143
align-items: center;
141144
line-height: 0;
142-
gap: 0.25rem;
145+
padding: .25rem .5rem;
146+
border-radius: 9999px;
147+
transition: all .2s ease-out;
143148
}
144149

145150
.command {
146-
flex: 1;
147151
display: flex;
148152
flex-direction: column;
149-
padding: 1.5rem;
150-
151-
background: var(--color_bg_code-editor);
152-
color: var(--color_code_inverse);
153-
text-wrap: wrap;
154-
overflow: hidden;
155-
word-break: break-word;
156-
157-
font-size: 0.75rem;
158-
font-style: normal;
159-
font-weight: 500;
160-
line-height: 1.25rem;
153+
padding: 1rem 1.5rem;
154+
border-bottom: 1px solid var(--color_border_bold);
155+
p {
156+
color: var(--color_fg_bold);
157+
text-wrap: wrap;
158+
overflow: hidden;
159+
word-break: break-word;
160+
font-size: .75rem;
161+
font-style: normal;
162+
font-weight: 300;
163+
line-height: 1.5;
164+
}
161165
}

‎src/features/libraries/components/library-card/library-card.component.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,48 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
117117
<span className={getLocalizedSecondaryFont(languageCode)}>
118118
{library.gitHubRepoPath || library.altRepoPath || name}
119119
</span>
120+
</div>
121+
<div className={styles.metadata}>
122+
{authorUrl ? (
123+
<Link
124+
href={authorUrl}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className={styles.author}
128+
>
129+
<div className={styles.author__name}>
130+
<UserIconComponent />
131+
<span>{authorName}</span>
132+
</div>
133+
</Link>
134+
) : (
135+
<div className={styles.author}>
136+
<div className={styles.author__name}>
137+
<UserIconComponent />
138+
<span>{authorName}</span>
139+
</div>
140+
</div>
141+
)}
142+
<div className={styles.repo}>
143+
{support && (
144+
<div className={styles.repo__stars}>
145+
<StarIconComponent />
146+
<span>{stars}</span>
147+
</div>
148+
)}
149+
<a
150+
className={styles.repo__url}
151+
href={repoUrl}
152+
target="_blank"
153+
rel="noreferrer noopener"
154+
>
155+
<GithubIconComponent />
156+
<span>{dictionary.viewRepo.label}</span>
157+
</a>
158+
</div>
159+
</div>
160+
<div className={clsx(styles.command, MonoFont.className)}>
161+
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
120162
</div>
121163
<div className={styles.content}>
122164
<ul className={styles.config}>
@@ -187,47 +229,8 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
187229
<AlgItemComponent label="EdDSA" isSupported={support.eddsa} />
188230
</ul>
189231
</div>
190-
<div className={styles.metadata}>
191-
{authorUrl ? (
192-
<Link
193-
href={authorUrl}
194-
target="_blank"
195-
rel="noopener noreferrer"
196-
className={styles.author}
197-
>
198-
<div className={styles.author__name}>
199-
<UserIconComponent />
200-
<span>{authorName}</span>
201-
</div>
202-
</Link>
203-
) : (
204-
<div className={styles.author}>
205-
<div className={styles.author__name}>
206-
<UserIconComponent />
207-
<span>{authorName}</span>
208-
</div>
209-
</div>
210-
)}
211-
<div className={styles.repo}>
212-
{support && (
213-
<div className={styles.repo__stars}>
214-
<StarIconComponent />
215-
<span>{stars}</span>
216-
</div>
217-
)}
218-
<a
219-
className={styles.repo__url}
220-
href={repoUrl}
221-
target="_blank"
222-
rel="noreferrer noopener"
223-
>
224-
<GithubIconComponent />
225-
<span>{dictionary.viewRepo.label}</span>
226-
</a>
227-
</div>
228-
</div>
229232
{minimumVersion && (
230-
<div className={clsx(styles.minVersion, MonoFont.className)}>
233+
<div className={styles.minVersion}>
231234
<span>{`${dictionary.minimumVersion.label} ${minimumVersion}`}</span>
232235
<Link
233236
target="_blank"
@@ -239,9 +242,6 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
239242
</Link>
240243
</div>
241244
)}
242-
<div className={clsx(styles.command, MonoFont.className)}>
243-
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
244-
</div>
245245
</div>
246246
);
247247
};

‎src/features/libraries/components/library-hero/library-hero.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
6464
const options = useMemo(() => {
6565
return [
6666
{
67-
label: "ProgrammingLanguage",
67+
label: "Language",
6868
options: [
6969
{
7070
value: dictionary.filterPicker.defaultValue.value,

‎src/features/libraries/components/library-hero/library-hero.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,15 @@
4444

4545
.heroTitle {
4646
color: var(--color_fg_bold);
47-
4847
font-size: 2rem;
4948
font-style: normal;
50-
font-weight: 400;
51-
line-height: 2.5rem;
49+
font-weight: 500;
50+
line-height: 1.15;
5251
letter-spacing: -0.8px;
5352

5453
@media #{$breakpoint-dimension-xs} {
5554
font-size: 2.5rem;
56-
line-height: 3rem;
55+
line-height: 1.15;
5756
}
5857
}
5958

@@ -65,9 +64,10 @@
6564

6665
.label {
6766
color: var(--color_fg_bold);
68-
font-size: 1rem;
67+
font-size: .875rem;
68+
font-weight: 700;
6969
line-height: 1.5rem;
70-
letter-spacing: 0.1px;
70+
letter-spacing: .1px;
7171
}
7272

7373
.select__wrapper {

‎src/features/libraries/components/question-mark.component.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ export const QuestionMarkComponent: React.FC<CheckMarkComponentProps> = () => {
99
width="24"
1010
height="24"
1111
viewBox="0 0 24 24"
12-
fill="none"
12+
fill="currentColor"
1313
>
1414
<path
1515
fillRule="evenodd"
1616
clipRule="evenodd"
1717
d="M12.0005 3.5625C7.02993 3.5625 3.00049 7.59194 3.00049 12.5625C3.00049 17.5331 7.02993 21.5625 12.0005 21.5625C16.9711 21.5625 21.0005 17.5331 21.0005 12.5625C21.0005 7.59194 16.9711 3.5625 12.0005 3.5625ZM1.00049 12.5625C1.00049 6.48737 5.92536 1.5625 12.0005 1.5625C18.0756 1.5625 23.0005 6.48737 23.0005 12.5625C23.0005 18.6376 18.0756 23.5625 12.0005 23.5625C5.92536 23.5625 1.00049 18.6376 1.00049 12.5625ZM12.0225 8.56201C11.203 8.56201 10.5283 9.23667 10.5283 10.0562H8.52832C8.52832 8.1321 10.0984 6.56201 12.0225 6.56201C13.9466 6.56201 15.5167 8.1321 15.5167 10.0562C15.5167 11.4618 14.7804 12.5181 13.641 13.1692L13.6169 13.1829L13.5921 13.1953C13.3638 13.3095 13.1083 13.5175 12.916 13.7739C12.7208 14.0342 12.6484 14.2648 12.6484 14.421C12.6484 14.9733 12.2006 15.421 11.6484 15.421C11.0961 15.421 10.6484 14.9733 10.6484 14.421C10.6484 13.7042 10.9501 13.0618 11.316 12.5739C11.6781 12.0911 12.1595 11.6819 12.6689 11.421C13.261 11.0763 13.5167 10.6393 13.5167 10.0562C13.5167 9.23667 12.842 8.56201 12.0225 8.56201ZM12.9504 17.812C12.9504 18.5024 12.3908 19.062 11.7004 19.062C11.0101 19.062 10.4504 18.5024 10.4504 17.812C10.4504 17.1216 11.0101 16.562 11.7004 16.562C12.3908 16.562 12.9504 17.1216 12.9504 17.812Z"
18-
fill="#808080"
1918
/>
2019
</svg>
2120
);

0 commit comments

Comments
 (0)