From 3eb2f1621ddee72762b1c07e2c319225a6163003 Mon Sep 17 00:00:00 2001 From: Christian Samaniego <199278128+christiansamaniego-okta@users.noreply.github.com> Date: Fri, 3 Oct 2025 14:30:30 -0500 Subject: [PATCH 1/4] update article component layout and add title and ebook-ad styles --- .../components/article/article.module.scss | 12 ------ .../ebook-ad/ebook-ad.component.tsx | 2 +- .../components/ebook-ad/ebook-ad.module.scss | 22 ++++++---- .../introduction-article.component.tsx | 18 +++++++-- .../introduction-article.module.scss | 24 +++++++---- .../introduction-hero.module.scss | 25 ++++-------- .../introduction-page.component.tsx | 10 +---- .../sidebar-nav/sidebar-nav.component.tsx | 7 ++-- .../sidebar-nav/sidebar-nav.module.scss | 40 +++++++++---------- src/libs/theme/styles/_variables.scss | 4 +- 10 files changed, 82 insertions(+), 82 deletions(-) diff --git a/src/features/common/components/article/article.module.scss b/src/features/common/components/article/article.module.scss index 97f5a8cf..07b3f255 100644 --- a/src/features/common/components/article/article.module.scss +++ b/src/features/common/components/article/article.module.scss @@ -7,18 +7,6 @@ .content { @include InnerContentGrid; - - padding: 3rem 0 3rem 0; - gap: 2rem; - - @media #{$breakpoint-dimension-sm} { - padding: 3rem 0 4rem 0; - } - - @media #{$breakpoint-dimension-md} { - gap: 3rem; - padding: 4rem 0 4rem 0; - } } .article { diff --git a/src/features/introduction/components/ebook-ad/ebook-ad.component.tsx b/src/features/introduction/components/ebook-ad/ebook-ad.component.tsx index 574ad88a..9a9092f1 100644 --- a/src/features/introduction/components/ebook-ad/ebook-ad.component.tsx +++ b/src/features/introduction/components/ebook-ad/ebook-ad.component.tsx @@ -8,7 +8,7 @@ type EbookAdComponentProps = { export const EbookAdComponent: React.FC = ({ copy }) => { return ( - +

{copy}

 ); diff --git a/src/features/introduction/components/ebook-ad/ebook-ad.module.scss b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss index bcb519a5..13e9a3db 100644 --- a/src/features/introduction/components/ebook-ad/ebook-ad.module.scss +++ b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss @@ -1,23 +1,29 @@ @use "@/libs/theme/styles/variables" as *; @use "@/libs/theme/styles/mixins" as *; +.container { + margin-bottom: 1.5rem; +} + .content { @include InnerContentFlex; position: relative; max-width: $article-max-width; - - background: linear-gradient(290deg, #f4d -18.75%, #3f59e4 98.79%); - - border-radius: 0.5rem; padding: 1rem; - margin: 1rem auto 2rem auto; - color: $Neutral0; - font-size: 1rem; - line-height: 1.25rem; + border-radius: 1rem; + border: 1px solid var(--color_border_default); + box-shadow: + 0 0 0 0.5px rgba(0, 0, 0, 0.12), + 0 2px 2px -1px rgba(0, 0, 0, 0.04), + 0 4px 4px -2px rgba(0, 0, 0, 0.04), + 0 6px 6px -3px rgba(0, 0, 0, 0.04); } .copy { font-weight: 400; + line-height: 1.25rem; + font-size: 1rem; + color: var(--color_fg_default); & strong { font-weight: 500; diff --git a/src/features/introduction/components/introduction-article/introduction-article.component.tsx b/src/features/introduction/components/introduction-article/introduction-article.component.tsx index e121b5e0..bfb6c6f4 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.component.tsx +++ b/src/features/introduction/components/introduction-article/introduction-article.component.tsx @@ -5,20 +5,32 @@ import { getIntroductionContent } from "@/features/localization/services/ui-lang import { ArticleComponent } from "@/features/common/components/article/article.component"; import styles from "./introduction-article.module.scss"; import { SidebarNavComponent } from "../sidebar-nav/sidebar-nav.component"; +import { EbookAdComponent } from "../ebook-ad/ebook-ad.component"; +import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service"; +import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model"; +import clsx from "clsx"; +import { getLocalizedSecondaryFont } from "@/libs/theme/fonts"; +import { IntroductionHeroComponent } from "../introduction-hero/introduction-hero.component"; interface IntroductionArticleComponentProps { languageCode: string; + introductionDictionary: IntroductionDictionaryModel; } export const IntroductionArticleComponent: React.FC< IntroductionArticleComponentProps -> = ({ languageCode }) => { +> = ({ languageCode, introductionDictionary }) => { const Introduction = getIntroductionContent({ languageCode }); + const componentDictionary = getComponentDictionary(languageCode); return (
- - {Introduction} + +
+ + + {Introduction} +
); }; diff --git a/src/features/introduction/components/introduction-article/introduction-article.module.scss b/src/features/introduction/components/introduction-article/introduction-article.module.scss index 3c8d256f..2b66fda1 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.module.scss +++ b/src/features/introduction/components/introduction-article/introduction-article.module.scss @@ -1,11 +1,21 @@ @use "@/libs/theme/styles/variables" as *; .container { - min-height: 100vh; - display: flex; - flex-direction: column; - - @media #{$breakpoint-dimension-sm} { - flex-direction: row; - } + display: flex; } + +.title { + color: var(--color_fg_bold); + font-size: 2rem; + line-height: 2.5rem; + font-weight: 400; + letter-spacing: -0.96px; + + @media #{$breakpoint-dimension-xs} { + font-size: 2.5rem; + } + + @media #{$breakpoint-dimension-sm} { + font-size: 3rem; + } +} \ No newline at end of file diff --git a/src/features/introduction/components/introduction-hero/introduction-hero.module.scss b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss index 02baf3c4..bfeef97f 100644 --- a/src/features/introduction/components/introduction-hero/introduction-hero.module.scss +++ b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss @@ -3,32 +3,23 @@ .container { @include Container; - - background: var(--color_bg_page); - border-bottom: 1px solid var(--color_border_bold); + margin-bottom: 1.5rem; } .content { @include InnerContentFlex; - flex-direction: column; - align-items: center; - - padding-top: 2.5rem; - padding-bottom: 2.5rem; - - @media #{$breakpoint-dimension-xs} { - padding-top: 4.5rem; - padding-bottom: 4.5rem; - } } .title { + width: 100%; color: var(--color_fg_bold); - text-align: center; + text-align: left; font-size: 2rem; - line-height: 2.5rem; - font-weight: 400; - letter-spacing: -0.96px; + line-height: 1.15; + font-weight: 500; + letter-spacing: -.96px; + max-width: 42rem; + text-wrap-style: balance; @media #{$breakpoint-dimension-xs} { font-size: 2.5rem; diff --git a/src/features/introduction/components/introduction-page/introduction-page.component.tsx b/src/features/introduction/components/introduction-page/introduction-page.component.tsx index 7e4a65a4..17ed41fe 100644 --- a/src/features/introduction/components/introduction-page/introduction-page.component.tsx +++ b/src/features/introduction/components/introduction-page/introduction-page.component.tsx @@ -4,10 +4,7 @@ import { generateArticleStructuredData } from "@/features/seo/services/structure import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component"; import { getIntroductionDictionary } from "@/features/localization/services/language-dictionary.service"; import { IntroductionArticleComponent } from "@/features/introduction/components/introduction-article/introduction-article.component"; -import { IntroductionHeroComponent } from "@/features/introduction/components/introduction-hero/introduction-hero.component"; -import { EbookAdComponent } from "@/features/introduction/components/ebook-ad/ebook-ad.component"; import { getAuth0Dictionary } from "@/features/localization/services/ui-language-dictionary.service"; -import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service"; interface IntroductionPageComponentProps { languageCode: string; @@ -18,7 +15,6 @@ export const IntroductionPageComponent: React.FC< > = ({ languageCode }) => { const introductionDictionary = getIntroductionDictionary(languageCode); const auth0Dictionary = getAuth0Dictionary(languageCode); - const componentDictionary = getComponentDictionary(languageCode); return ( <> @@ -121,12 +117,10 @@ export const IntroductionPageComponent: React.FC< }), ]} /> - - - { @@ -18,9 +18,8 @@ const scrollToElementWithOffset = (id: string, offset = 0) => { }; export const SidebarNavComponent: React.FC = ({ - languageCode, + introductionDictionary, }) => { - const introductionDictionary = getIntroductionDictionary(languageCode); const headings = introductionDictionary.content.headings; const [activeId, setActiveId] = useState(null); diff --git a/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss b/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss index 9902c757..7969ca9a 100644 --- a/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss +++ b/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss @@ -1,33 +1,33 @@ @use "@/libs/theme/styles/variables" as *; .container { - display:none; - @media #{$breakpoint-dimension-sm} { - display: inline-block; - height: 100vh; - position: sticky; - color: var(--color_fg_link); - flex-shrink: 0; - top: 0; - padding: 160px 30px 0px; - margin-bottom: 100px; - border-right: 1px solid var(--color_border_bold); - max-width: 250px; - overflow-y: auto; - } + display: none; + @media #{$breakpoint-dimension-sm} { + display: inline-block; + height: 100vh; + position: sticky; + color: var(--color_fg_link); + flex-shrink: 0; + top: 0; + padding: 160px 30px 0px; + margin-bottom: 100px; + border-right: 1px solid var(--color_border_bold); + max-width: 250px; + overflow-y: auto; + } } .title { - margin-bottom: 36px; - padding-right: 8px; - cursor: pointer; + margin-bottom: 36px; + padding-right: 8px; + cursor: pointer; } .title__active { - color: var(--color_fg_selected); - border-bottom: 1px solid var(--color_border_selected); + color: var(--color_fg_selected); + border-bottom: 1px solid var(--color_border_selected); } .list { - list-style-type: none; + list-style-type: none; } diff --git a/src/libs/theme/styles/_variables.scss b/src/libs/theme/styles/_variables.scss index 721268b4..b42bba6a 100644 --- a/src/libs/theme/styles/_variables.scss +++ b/src/libs/theme/styles/_variables.scss @@ -148,8 +148,8 @@ $gradient-app-card---resting: linear-gradient( #3f59e4 67.69% ); -$ribbon-height: 1rem; -$ribbon-height-mobile: 0rem; +$ribbon-height: 2rem; +$ribbon-height-mobile: 2rem; $navbar-height: 5rem; $navbar-height-mobile: 3rem; $main-nav-height: calc($ribbon-height + $navbar-height); From e0684d0bcd6aa8488e240d27de169b4b0cbb122f Mon Sep 17 00:00:00 2001 From: Christian Samaniego <199278128+christiansamaniego-okta@users.noreply.github.com> Date: Tue, 7 Oct 2025 02:33:17 -0500 Subject: [PATCH 2/4] adjust article elements styles --- .../components/article/article.module.scss | 86 ++++++++++++------- .../components/ebook-ad/ebook-ad.module.scss | 2 +- .../introduction-article.component.tsx | 2 - .../introduction-article.module.scss | 3 + 4 files changed, 59 insertions(+), 34 deletions(-) diff --git a/src/features/common/components/article/article.module.scss b/src/features/common/components/article/article.module.scss index 07b3f255..7008bf6b 100644 --- a/src/features/common/components/article/article.module.scss +++ b/src/features/common/components/article/article.module.scss @@ -12,9 +12,8 @@ .article { display: flex; flex-direction: column; - grid-column: span 6; - max-width: 48.5rem; + max-width: 46rem; justify-self: center; @media #{$breakpoint-dimension-sm} { @@ -35,7 +34,7 @@ font-size: 2rem; line-height: 2.5rem; font-style: normal; - font-weight: 400; + font-weight: 500; letter-spacing: -0.05rem; margin-bottom: 1.5rem; font-family: var(--font-secondary), sans-serif; @@ -56,13 +55,12 @@ h3 { color: var(--color_fg_bold); - font-size: 1.5rem; line-height: 2rem; font-style: normal; - font-weight: 400; + font-weight: 500; letter-spacing: -0.05rem; - margin-bottom: 2rem; + margin-bottom: 1.5rem; font-family: var(--font-secondary), sans-serif; :global(html[lang="ja"]) & { @@ -77,11 +75,11 @@ "clig" off, "liga" off; font-size: 1rem; - line-height: 1.5em; + line-height: 1.45; font-style: normal; font-weight: 400; letter-spacing: -0.005rem; - margin-bottom: 2rem; + margin-bottom: 1rem; :global(html[lang="ja"]) & { @include LocaleLineHeight("ja", 1.5rem); @@ -95,12 +93,10 @@ ul, ol { - list-style-position: inside; margin-top: 0; ul, ol { - list-style-position: inside; margin-left: 1.5rem; padding-left: 0; } @@ -109,11 +105,11 @@ li { margin-bottom: 0.75rem; font-size: 1rem; - line-height: 2rem; + line-height: 1.45; color: var(--color_fg_default); letter-spacing: -0.01px; - text-indent: -1.5rem; - padding-left: 1.5rem; + margin-left: 1rem; + padding-left: 1rem; :global(html[lang="ja"]) & { @include LocaleLineHeight("ja", 2rem); @@ -124,9 +120,9 @@ &, &:hover, &:active { - color: var(--color_fg_link_primary); text-decoration: underline; - font-weight: 400; + font-weight: 500; + text-underline-offset: 0.25rem; } } @@ -136,42 +132,70 @@ } pre { - margin-bottom: 2rem; - background-color: var(--color_bg_code-editor); + margin-bottom: 1rem; + background-color: var(--color_bg_layer_alternate); color: var(--color_fg_default); font-size: 0.875rem; line-height: 1.375rem; font-style: normal; font-weight: 400; letter-spacing: 0.15px; - padding: 0.75rem; + padding: 0.25rem; border: 1px solid var(--color_border_bold); - border-radius: 0.25rem; + border-radius: 1rem; code { - color: var(--color_code_dark_blue2); + display: block; + width: 100%; + color: var(--color_code_gray); background-color: var(--color_bg_code-editor); font-weight: 500; - } - - @media #{$breakpoint-dimension-sm} { - border-radius: 0.5rem; - padding: 1rem; + font-size: 0.875rem; + line-height: 1.35; + border-radius: 0.75rem; + padding: 0.75rem; + box-shadow: + 0 0 0 0.5px rgba(0, 0, 0, 0.12), + 0 2px 2px -1px rgba(0, 0, 0, 0.04), + 0 4px 4px -2px rgba(0, 0, 0, 0.04), + 0 6px 6px -3px rgba(0, 0, 0, 0.04); } } blockquote { - background-color: var(--color_bg_state_info_subtle); - padding: 1rem 1.5rem; - margin: 2rem 0 2rem 0; - border-radius: 0 0.5rem 0.5rem 0; - border-left: 4px solid var(--color_border_state_info); + background-color: var(--color_bg_layer); + font-size: 0.875rem; + padding: 1rem; + margin: 2rem 0; + border-radius: 1rem; + border: 1px solid var(--color_border_default); + box-shadow: + 0 0 0 0.5px rgba(0, 0, 0, 0.12), + 0 2px 2px -1px rgba(0, 0, 0, 0.04), + 0 4px 4px -2px rgba(0, 0, 0, 0.04), + 0 6px 6px -3px rgba(0, 0, 0, 0.04); & * { - color: var(--color_fg_on_state_info_subtle); + color: var(--color_fg_default); padding: 0; margin: 0; } + + p { + display: flex; + flex-direction: row; + font-size: 0.875rem; + align-items: center; + gap: 0.75rem; + } + + ::before { + 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"); + display: block; + padding: 0.25rem 0.4rem 0.125rem; + border-radius: 9999px; + background-color: var(--color_bg_layer_alternate); + } } *:has(+ blockquote) { diff --git a/src/features/introduction/components/ebook-ad/ebook-ad.module.scss b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss index 13e9a3db..21e2db10 100644 --- a/src/features/introduction/components/ebook-ad/ebook-ad.module.scss +++ b/src/features/introduction/components/ebook-ad/ebook-ad.module.scss @@ -22,7 +22,7 @@ .copy { font-weight: 400; line-height: 1.25rem; - font-size: 1rem; + font-size: 0.875rem; color: var(--color_fg_default); & strong { diff --git a/src/features/introduction/components/introduction-article/introduction-article.component.tsx b/src/features/introduction/components/introduction-article/introduction-article.component.tsx index bfb6c6f4..6d14b06a 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.component.tsx +++ b/src/features/introduction/components/introduction-article/introduction-article.component.tsx @@ -8,8 +8,6 @@ import { SidebarNavComponent } from "../sidebar-nav/sidebar-nav.component"; import { EbookAdComponent } from "../ebook-ad/ebook-ad.component"; import { getComponentDictionary } from "@/features/localization/services/component-dictionary.service"; import { IntroductionDictionaryModel } from "@/features/localization/models/introduction-dictionary.model"; -import clsx from "clsx"; -import { getLocalizedSecondaryFont } from "@/libs/theme/fonts"; import { IntroductionHeroComponent } from "../introduction-hero/introduction-hero.component"; interface IntroductionArticleComponentProps { diff --git a/src/features/introduction/components/introduction-article/introduction-article.module.scss b/src/features/introduction/components/introduction-article/introduction-article.module.scss index 2b66fda1..39ce9189 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.module.scss +++ b/src/features/introduction/components/introduction-article/introduction-article.module.scss @@ -4,6 +4,9 @@ display: flex; } +.content { +} + .title { color: var(--color_fg_bold); font-size: 2rem; From 4f191effcb344b94a1882a930f1f48878ec17a5e Mon Sep 17 00:00:00 2001 From: Christian Samaniego <199278128+christiansamaniego-okta@users.noreply.github.com> Date: Tue, 7 Oct 2025 03:17:10 -0500 Subject: [PATCH 3/4] adjust sidenav styles --- .../introduction-article.module.scss | 7 +++--- .../introduction-hero.module.scss | 2 +- .../sidebar-nav/sidebar-nav.module.scss | 24 ++++++++++--------- 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/features/introduction/components/introduction-article/introduction-article.module.scss b/src/features/introduction/components/introduction-article/introduction-article.module.scss index 39ce9189..b1e2922f 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.module.scss +++ b/src/features/introduction/components/introduction-article/introduction-article.module.scss @@ -1,10 +1,9 @@ @use "@/libs/theme/styles/variables" as *; +@use "@/libs/theme/styles/mixins" as *; .container { - display: flex; -} - -.content { + @include InnerContentFlex; + justify-content: start; } .title { diff --git a/src/features/introduction/components/introduction-hero/introduction-hero.module.scss b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss index bfeef97f..1f12e8b2 100644 --- a/src/features/introduction/components/introduction-hero/introduction-hero.module.scss +++ b/src/features/introduction/components/introduction-hero/introduction-hero.module.scss @@ -3,7 +3,7 @@ .container { @include Container; - margin-bottom: 1.5rem; + margin: 1.5rem 0rem; } .content { diff --git a/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss b/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss index 7969ca9a..b6ed7a7b 100644 --- a/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss +++ b/src/features/introduction/components/sidebar-nav/sidebar-nav.module.scss @@ -2,32 +2,34 @@ .container { display: none; + @media #{$breakpoint-dimension-sm} { - display: inline-block; - height: 100vh; + display: block; + flex-shrink: 1; position: sticky; color: var(--color_fg_link); - flex-shrink: 0; - top: 0; - padding: 160px 30px 0px; - margin-bottom: 100px; + margin: 2rem 0rem;; + padding: 0rem 1rem; + top: $main-nav-height + 2rem; // additional value must be equal to top margin + top padding border-right: 1px solid var(--color_border_bold); - max-width: 250px; - overflow-y: auto; + font-size: 0.875rem; + max-width: 20rem; + height: fit-content; } } .title { - margin-bottom: 36px; - padding-right: 8px; cursor: pointer; } .title__active { color: var(--color_fg_selected); - border-bottom: 1px solid var(--color_border_selected); + text-decoration: underline; } .list { list-style-type: none; + display: flex; + flex-direction: column; + gap: 2rem; } From 751867617ae03b38a8fc09cf03fc6c3dfb9216f1 Mon Sep 17 00:00:00 2001 From: Christian Samaniego <199278128+christiansamaniego-okta@users.noreply.github.com> Date: Tue, 7 Oct 2025 16:44:48 -0500 Subject: [PATCH 4/4] address javier comments --- src/features/common/components/article/article.module.scss | 2 +- .../introduction-article/introduction-article.module.scss | 1 + src/libs/theme/styles/globals.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/common/components/article/article.module.scss b/src/features/common/components/article/article.module.scss index 7008bf6b..1f5ef8a4 100644 --- a/src/features/common/components/article/article.module.scss +++ b/src/features/common/components/article/article.module.scss @@ -13,7 +13,7 @@ display: flex; flex-direction: column; grid-column: span 6; - max-width: 46rem; + max-width: 56rem; justify-self: center; @media #{$breakpoint-dimension-sm} { diff --git a/src/features/introduction/components/introduction-article/introduction-article.module.scss b/src/features/introduction/components/introduction-article/introduction-article.module.scss index b1e2922f..6fd1e2ce 100644 --- a/src/features/introduction/components/introduction-article/introduction-article.module.scss +++ b/src/features/introduction/components/introduction-article/introduction-article.module.scss @@ -4,6 +4,7 @@ .container { @include InnerContentFlex; justify-content: start; + margin-bottom: 5rem; } .title { diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 4d243469..ba863606 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -56,7 +56,7 @@ --color_fg_link_hover: var(--functional-gray-50); --color_fg_link_pressed: var(--functional-gray-50); - --color_fg_selected: var(--functional-gray-850); + --color_fg_selected: var(--functional-gray-100); --color_border_selected: var(--functional-gray-850); --color_border_focus: var(--functional-gray-850);