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 && ( -
- {changelog.features.map((feature) => ( -
-

{feature.title}

- {feature.media && renderMedia(feature.media)} - {feature.description} -
- ))} -
- )} - {changelog.bug_fixes && changelog.bug_fixes.length > 0 && ( -
-

Bug Fixes

- {changelog.bug_fixes && ( - {changelog.bug_fixes} - )} -
- )} - {changelog.maintenance && changelog.maintenance.length > 0 && ( -
-

Maintenance

- {changelog.maintenance && ( - {changelog.maintenance} - )} -
- )} +
+ {changelog.features && changelog.features.length > 0 && ( +
+ {changelog.features.map((feature) => ( +
+
{feature.title}
+ {feature.media && renderMedia(feature.media)} + {feature.description} +
+ ))} +
+ )} + {changelog.bug_fixes && changelog.bug_fixes.length > 0 && ( +
+
Bug Fixes
+ {changelog.bug_fixes && ( + {changelog.bug_fixes} + )} +
+ )} + {changelog.maintenance && changelog.maintenance.length > 0 && ( +
+
Maintenance
+ {changelog.maintenance && ( + {changelog.maintenance} + )} +
+ )} +
); }