diff --git a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss index 2f050ab78eb6..bfd29677ca02 100644 --- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss +++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss @@ -2,10 +2,28 @@ position: relative; padding-left: 20px; + & :is(h1, h2, h3, h4, h5, h6, p, &-section-title) { + margin-bottom: 12px; + } + + &-content { + display: flex; + flex-direction: column; + gap: 32px; + } + + &-section-title { + font-size: 14px; + line-height: 20px; + color: var(--text-vanilla-400, #c0c1c3); + } + .changelog-release-date { font-size: 14px; line-height: 20px; color: var(--text-vanilla-400, #c0c1c3); + display: block; + margin-bottom: 12px; } &-list { @@ -81,12 +99,7 @@ } } - h1, - h2, - h3, - h4, - h5, - h6 { + & :is(h1, h2, h3, h4, h5, h6, p, &-section-title) { font-weight: 600; color: var(--text-vanilla-100, #fff); } @@ -96,7 +109,8 @@ line-height: 32px; } - h2 { + h2, + &-section-title { font-size: 20px; line-height: 28px; } @@ -108,6 +122,7 @@ overflow: hidden; border-radius: 4px; border: 1px solid var(--bg-slate-400, #1d212d); + margin-bottom: 28px; } .changelog-media-video { @@ -124,17 +139,8 @@ &-line { background-color: var(--bg-vanilla-300); } - li, - p { - color: var(--text-ink-500); - } - h1, - h2, - h3, - h4, - h5, - h6 { + & :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) { color: var(--text-ink-500); } diff --git a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx index fe2a7b953e4e..5113b4d6abc4 100644 --- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx +++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx @@ -55,33 +55,35 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
{formattedReleaseDate} - {changelog.features && changelog.features.length > 0 && ( -