From 5816664d78f32d57faa7550bea2788c513848d16 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:06:38 -0500 Subject: [PATCH 1/6] update check mark icon style --- .../libraries/components/check-mark.component.tsx | 10 ++++------ .../libraries/components/check-mark.module.scss | 5 +++++ 2 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 src/features/libraries/components/check-mark.module.scss diff --git a/src/features/libraries/components/check-mark.component.tsx b/src/features/libraries/components/check-mark.component.tsx index 9c2b96cd..3a35d09e 100644 --- a/src/features/libraries/components/check-mark.component.tsx +++ b/src/features/libraries/components/check-mark.component.tsx @@ -1,25 +1,23 @@ import React from "react"; +import styles from "./check-mark.module.scss"; type CheckMarkComponentProps = {}; export const CheckMarkComponent: React.FC = () => { return ( - + ); diff --git a/src/features/libraries/components/check-mark.module.scss b/src/features/libraries/components/check-mark.module.scss new file mode 100644 index 00000000..b60d1611 --- /dev/null +++ b/src/features/libraries/components/check-mark.module.scss @@ -0,0 +1,5 @@ +@use "@/libs/theme/styles/variables" as *; + +.check { + color: var(--color_bg_state_success); +} \ No newline at end of file From 18df7af5a4efaefaa9b1b3ae6a336943cecbfd1c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:06:58 -0500 Subject: [PATCH 2/6] update x-mark icon style --- src/features/libraries/components/x-mark.component.tsx | 6 +++--- src/features/libraries/components/x-mark.module.scss | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 src/features/libraries/components/x-mark.module.scss diff --git a/src/features/libraries/components/x-mark.component.tsx b/src/features/libraries/components/x-mark.component.tsx index dfddcc80..c72312df 100644 --- a/src/features/libraries/components/x-mark.component.tsx +++ b/src/features/libraries/components/x-mark.component.tsx @@ -1,25 +1,25 @@ import React from "react"; +import styles from "./x-mark.module.scss" type CheckMarkComponentProps = {}; export const XMarkComponent: React.FC = () => { return ( ); diff --git a/src/features/libraries/components/x-mark.module.scss b/src/features/libraries/components/x-mark.module.scss new file mode 100644 index 00000000..4ea752ab --- /dev/null +++ b/src/features/libraries/components/x-mark.module.scss @@ -0,0 +1,5 @@ +@use "@/libs/theme/styles/variables" as *; + +.mark { + color: var(--color_bg_state_danger); +} \ No newline at end of file From 4220dbfc88e1f24ab7f09342df75ce265b6d3923 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:07:18 -0500 Subject: [PATCH 3/6] update question mark icon style --- src/features/libraries/components/question-mark.component.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/libraries/components/question-mark.component.tsx b/src/features/libraries/components/question-mark.component.tsx index 9e27648e..2c238025 100644 --- a/src/features/libraries/components/question-mark.component.tsx +++ b/src/features/libraries/components/question-mark.component.tsx @@ -9,13 +9,12 @@ export const QuestionMarkComponent: React.FC = () => { width="24" height="24" viewBox="0 0 24 24" - fill="none" + fill="currentColor" > ); From 8ea0854f9edc3b053ff8551722064a7f3a2459e0 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:08:03 -0500 Subject: [PATCH 4/6] update library card styling --- .../library-card/library-card..module.scss | 118 +++++++++--------- .../library-card/library-card.component.tsx | 86 ++++++------- 2 files changed, 104 insertions(+), 100 deletions(-) diff --git a/src/features/libraries/components/library-card/library-card..module.scss b/src/features/libraries/components/library-card/library-card..module.scss index 53e284ab..5eb5ca76 100644 --- a/src/features/libraries/components/library-card/library-card..module.scss +++ b/src/features/libraries/components/library-card/library-card..module.scss @@ -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 { @@ -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; } @@ -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 { @@ -125,7 +128,7 @@ .repo { display: flex; - gap: 1rem; + gap: 0.5rem; } .repo__stars { @@ -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; + } } diff --git a/src/features/libraries/components/library-card/library-card.component.tsx b/src/features/libraries/components/library-card/library-card.component.tsx index 319bb988..80005413 100644 --- a/src/features/libraries/components/library-card/library-card.component.tsx +++ b/src/features/libraries/components/library-card/library-card.component.tsx @@ -117,6 +117,48 @@ export const LibraryCardComponent: React.FC = ({ {library.gitHubRepoPath || library.altRepoPath || name} + +
+ {authorUrl ? ( + +
+ + {authorName} +
+ + ) : ( +
+
+ + {authorName} +
+
+ )} +
+ {support && ( +
+ + {stars} +
+ )} + + + {dictionary.viewRepo.label} + +
+
+
+ {command}
    @@ -187,47 +229,8 @@ export const LibraryCardComponent: React.FC = ({
-
- {authorUrl ? ( - -
- - {authorName} -
- - ) : ( -
-
- - {authorName} -
-
- )} -
- {support && ( -
- - {stars} -
- )} - - - {dictionary.viewRepo.label} - -
-
{minimumVersion && ( -
+
{`${dictionary.minimumVersion.label} ${minimumVersion}`} = ({
)} -
- {command} -
); }; From 00fe12323626ef7bea57b8e78f70be4e5596132c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:08:26 -0500 Subject: [PATCH 5/6] update picker label --- .../library-hero/library-hero.component.tsx | 2 +- .../components/library-hero/library-hero.module.scss | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/features/libraries/components/library-hero/library-hero.component.tsx b/src/features/libraries/components/library-hero/library-hero.component.tsx index 1fda944e..c91d8424 100644 --- a/src/features/libraries/components/library-hero/library-hero.component.tsx +++ b/src/features/libraries/components/library-hero/library-hero.component.tsx @@ -64,7 +64,7 @@ export const LibraryHeroComponent: React.FC = ({ const options = useMemo(() => { return [ { - label: "ProgrammingLanguage", + label: "Language", options: [ { value: dictionary.filterPicker.defaultValue.value, diff --git a/src/features/libraries/components/library-hero/library-hero.module.scss b/src/features/libraries/components/library-hero/library-hero.module.scss index dbff04ba..01153e56 100644 --- a/src/features/libraries/components/library-hero/library-hero.module.scss +++ b/src/features/libraries/components/library-hero/library-hero.module.scss @@ -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; } } @@ -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 { From ceb635527a9ddbbf596230cd35fae73ad0fe7ad8 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 15:08:41 -0500 Subject: [PATCH 6/6] add danger color variables --- src/libs/theme/styles/globals.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 4d243469..813d280f 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -118,14 +118,15 @@ --color_fg_code: #fff; --color_bg_code-editor: #000; - --color_bg_state_success: #10783f; + --color_bg_state_success: #149750; --color_fg_on_state_success: #fff; --color_fg_on_state_success_subtle: #98d2b2; --color_bg_state_success_subtle: #062a16; --color_border_state_success: #67bc8e; --color_fg_strong: #99a7f1; - + + --color_bg_state_danger: #f2ac84; --color_bg_state_danger_subtle: #46110e; --color_fg_on_state_danger_subtle: #f0b7b4; --color_border_state_danger: #e89590; @@ -159,6 +160,7 @@ html[data-theme="system-light"] { --color_fg_on_state_info_subtle: #263588; --color_border_state_info: #3f59e4; + --color_bg_state_danger: #e27133; --color_bg_state_danger_subtle: #fbeeed; --color_fg_on_state_danger_subtle: #761c17; --color_border_state_danger: #c32f26; @@ -171,7 +173,7 @@ html[data-theme="system-light"] { --color_fg_strong: #3f59e4; - --color_bg_state_success: #10783f; + --color_bg_state_success: #8fc88a; --color_fg_on_state_success: #fff; --color_fg_on_state_success_subtle: #149750; --color_bg_state_success_subtle: #e6f4ec; @@ -561,7 +563,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); border: 1px solid var(--color_border_default); padding: 0.25rem; overflow: hidden; - min-width: 6.125rem; + width: max-content !important; + min-width: 100% !important; } .react-select__menu-portal {