Skip to content

Update libraries page #892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: ui-redesign
Choose a base branch
from
Open

Update libraries page #892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5816664
update check mark icon style
javiert-okta Oct 3, 2025
18df7af
update x-mark icon style
javiert-okta Oct 3, 2025
4220dbf
update question mark icon style
javiert-okta Oct 3, 2025
8ea0854
update library card styling
javiert-okta Oct 3, 2025
00fe123
update picker label
javiert-okta Oct 3, 2025
ceb6355
add danger color variables
javiert-okta Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/features/libraries/components/check-mark.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import React from "react";
import styles from "./check-mark.module.scss";

type CheckMarkComponentProps = {};

export const CheckMarkComponent: React.FC<CheckMarkComponentProps> = () => {
return (
<svg
className={styles.check}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
fill="currentColor"
>
<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"
fill="#4CB7A3"
/>
<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" />
<path
fillRule="evenodd"
clipRule="evenodd"
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"
fill="#4CB7A3"
/>
</svg>
);
Expand Down
5 changes: 5 additions & 0 deletions src/features/libraries/components/check-mark.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@use "@/libs/theme/styles/variables" as *;

.check {
color: var(--color_bg_state_success);
}
118 changes: 61 additions & 57 deletions src/features/libraries/components/library-card/library-card..module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,27 @@
grid-column: span 1;
display: flex;
flex-direction: column;

border-radius: 1rem;
border: 1px solid var(--color_border_bold);
background-color: var(--color_bg_layer);
border-radius: 1.5rem;
border: 1px solid var(--color_border_default);
overflow: hidden;
transition: all .3s ease-out;
}

.header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
color: var(--color_fg_bold);

font-size: 1rem;
gap: .5rem;
padding: 1rem;
font-style: normal;
line-height: 1.25rem;

border-bottom: 1px solid var(--color_border_bold);
background: var(--color_bg_layer_alternate);
span {
color: var(--color_fg_bold);
font-size: .875rem;
font-family: var(--font-primary);
line-height: 1.35;
font-weight: 700;
}
}

.logo {
Expand All @@ -34,20 +36,16 @@

.content {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 1.5rem;
border-bottom: 1px solid var(--color_border_bold);
background: var(--color_bg_layer_alternate);
grid-template-columns: repeat(2,1fr);
padding: 1.5rem 1.5rem 2.5rem;
}

.minVersion {
grid-column: 1 / -1;
background-color: var(--color_bg_state_caution_subtle);
grid-column: 1/-1;
color: var(--color_fg_on_state_caution_subtle);
padding: 0.5rem 1.5rem;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.2px;
padding: 1rem;
font-size: .875rem;
letter-spacing: .2px;
display: flex;
justify-content: space-between;
}
Expand All @@ -63,47 +61,52 @@
display: flex;
flex-direction: column;
list-style-type: none;
gap: 0.75rem;
gap: 0.5rem;

& svg {
width: 1.25rem;
height: 1.25rem;
}

& li {
height: 1.5rem;
height: 1.25rem;

code {
padding: 1px 0.125rem;
border-radius: 0.125rem;
color: var(--color_code_dark_blue);
background-color: var(--color_bg_layer_bold);
font-size: 0.875rem;
padding: .125rem .25rem;
border-radius: .5rem;
color: var(--color_fg_bold);
background-color: var(--color_bg_layer_alternate);
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);
font-size: .75rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem; /* 142.857% */
line-height: 1.5;
}
}
}

.listItem {
.listItem, .metadata {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color_fg_default);
font-size: .875rem;
font-weight: 500;
}

.listItem {
gap: 0.5rem;
}

.metadata {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;

border-bottom: 1px solid var(--color_border_bold);
padding: .5rem;
width: calc(100% - 1rem);
margin: 0 auto;
border-radius: .5rem;
background: var(--color_bg_layer_alternate);

color: var(--color_fg_default);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 140%;
letter-spacing: 0.18px;
white-space: nowrap;
letter-spacing: .18px;

svg {
path {
Expand All @@ -125,7 +128,7 @@

.repo {
display: flex;
gap: 1rem;
gap: 0.5rem;
}

.repo__stars {
Expand All @@ -139,23 +142,24 @@
display: flex;
align-items: center;
line-height: 0;
gap: 0.25rem;
padding: .25rem .5rem;
border-radius: 9999px;
transition: all .2s ease-out;
}

.command {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.5rem;

background: var(--color_bg_code-editor);
color: var(--color_code_inverse);
text-wrap: wrap;
overflow: hidden;
word-break: break-word;

font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color_border_bold);
p {
color: var(--color_fg_bold);
text-wrap: wrap;
overflow: hidden;
word-break: break-word;
font-size: .75rem;
font-style: normal;
font-weight: 300;
line-height: 1.5;
}
}
86 changes: 43 additions & 43 deletions src/features/libraries/components/library-card/library-card.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,48 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
<span className={getLocalizedSecondaryFont(languageCode)}>
{library.gitHubRepoPath || library.altRepoPath || name}
</span>
</div>
<div className={styles.metadata}>
{authorUrl ? (
<Link
href={authorUrl}
target="_blank"
rel="noopener noreferrer"
className={styles.author}
>
<div className={styles.author__name}>
<UserIconComponent />
<span>{authorName}</span>
</div>
</Link>
) : (
<div className={styles.author}>
<div className={styles.author__name}>
<UserIconComponent />
<span>{authorName}</span>
</div>
</div>
)}
<div className={styles.repo}>
{support && (
<div className={styles.repo__stars}>
<StarIconComponent />
<span>{stars}</span>
</div>
)}
<a
className={styles.repo__url}
href={repoUrl}
target="_blank"
rel="noreferrer noopener"
>
<GithubIconComponent />
<span>{dictionary.viewRepo.label}</span>
</a>
</div>
</div>
<div className={clsx(styles.command, MonoFont.className)}>
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
</div>
<div className={styles.content}>
<ul className={styles.config}>
Expand Down Expand Up @@ -187,47 +229,8 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
<AlgItemComponent label="EdDSA" isSupported={support.eddsa} />
</ul>
</div>
<div className={styles.metadata}>
{authorUrl ? (
<Link
href={authorUrl}
target="_blank"
rel="noopener noreferrer"
className={styles.author}
>
<div className={styles.author__name}>
<UserIconComponent />
<span>{authorName}</span>
</div>
</Link>
) : (
<div className={styles.author}>
<div className={styles.author__name}>
<UserIconComponent />
<span>{authorName}</span>
</div>
</div>
)}
<div className={styles.repo}>
{support && (
<div className={styles.repo__stars}>
<StarIconComponent />
<span>{stars}</span>
</div>
)}
<a
className={styles.repo__url}
href={repoUrl}
target="_blank"
rel="noreferrer noopener"
>
<GithubIconComponent />
<span>{dictionary.viewRepo.label}</span>
</a>
</div>
</div>
{minimumVersion && (
<div className={clsx(styles.minVersion, MonoFont.className)}>
<div className={styles.minVersion}>
<span>{`${dictionary.minimumVersion.label} ${minimumVersion}`}</span>
<Link
target="_blank"
Expand All @@ -239,9 +242,6 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
</Link>
</div>
)}
<div className={clsx(styles.command, MonoFont.className)}>
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
</div>
</div>
);
};
2 changes: 1 addition & 1 deletion src/features/libraries/components/library-hero/library-hero.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const LibraryHeroComponent: React.FC<LibraryHeroComponentProps> = ({
const options = useMemo(() => {
return [
{
label: "ProgrammingLanguage",
label: "Language",
options: [
{
value: dictionary.filterPicker.defaultValue.value,
Expand Down
12 changes: 6 additions & 6 deletions src/features/libraries/components/library-hero/library-hero.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,15 @@

.heroTitle {
color: var(--color_fg_bold);

font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 2.5rem;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.8px;

@media #{$breakpoint-dimension-xs} {
font-size: 2.5rem;
line-height: 3rem;
line-height: 1.15;
}
}

Expand All @@ -65,9 +64,10 @@

.label {
color: var(--color_fg_bold);
font-size: 1rem;
font-size: .875rem;
font-weight: 700;
line-height: 1.5rem;
letter-spacing: 0.1px;
letter-spacing: .1px;
}

.select__wrapper {
Expand Down
3 changes: 1 addition & 2 deletions src/features/libraries/components/question-mark.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@ export const QuestionMarkComponent: React.FC<CheckMarkComponentProps> = () => {
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
fill="currentColor"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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"
fill="#808080"
/>
</svg>
);
Expand Down
Loading