External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-18 07:56:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: changelog modal spacing issue (#9048)

Browse Source 
* fix: added fix for changelog modal styling issue

* chore: minor code cleanup

* chore: pr review changes

* chore: minor preetier fix
This commit is contained in:
Abhi kumar 2025-09-09 18:44:33 +05:30 committed by GitHub
parent 6c7275d355
commit 0129326a0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
View File

@ -2,10 +2,28 @@
position: relative; position: relative;
padding-left: 20px; 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 { .changelog-release-date {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: var(--text-vanilla-400, #c0c1c3); color: var(--text-vanilla-400, #c0c1c3);
display: block;
margin-bottom: 12px;
} }
&-list { &-list {
@ -81,12 +99,7 @@
} }
} }
h1, & :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
h2,
h3,
h4,
h5,
h6 {
font-weight: 600; font-weight: 600;
color: var(--text-vanilla-100, #fff); color: var(--text-vanilla-100, #fff);
} }
@ -96,7 +109,8 @@
line-height: 32px; line-height: 32px;
} }
h2 { h2,
&-section-title {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
@ -108,6 +122,7 @@
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--bg-slate-400, #1d212d); border: 1px solid var(--bg-slate-400, #1d212d);
margin-bottom: 28px;
} }
.changelog-media-video { .changelog-media-video {
@ -124,17 +139,8 @@
&-line { &-line {
background-color: var(--bg-vanilla-300); background-color: var(--bg-vanilla-300);
} }
li,
p {
color: var(--text-ink-500);
}
h1, & :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
h2,
h3,
h4,
h5,
h6 {
color: var(--text-ink-500); color: var(--text-ink-500);
} }

56
frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx
View File

@ -55,33 +55,35 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
<div className="inner-ball" /> <div className="inner-ball" />
</div> </div>
<span className="changelog-release-date">{formattedReleaseDate}</span> <span className="changelog-release-date">{formattedReleaseDate}</span>
{changelog.features && changelog.features.length > 0 && ( <div className="changelog-renderer-content">
<div className="changelog-renderer-list"> {changelog.features && changelog.features.length > 0 && (
{changelog.features.map((feature) => ( <div className="changelog-renderer-list">
<div key={feature.id}> {changelog.features.map((feature) => (
<h2>{feature.title}</h2> <div key={feature.id}>
{feature.media && renderMedia(feature.media)} <div className="changelog-renderer-section-title">{feature.title}</div>
<ReactMarkdown>{feature.description}</ReactMarkdown> {feature.media && renderMedia(feature.media)}
</div> <ReactMarkdown>{feature.description}</ReactMarkdown>
))} </div>
</div> ))}
)} </div>
{changelog.bug_fixes && changelog.bug_fixes.length > 0 && ( )}
<div> {changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
<h2>Bug Fixes</h2> <div className="changelog-renderer-bug-fixes">
{changelog.bug_fixes && ( <div className="changelog-renderer-section-title">Bug Fixes</div>
<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown> {changelog.bug_fixes && (
)} <ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
</div> )}
)} </div>
{changelog.maintenance && changelog.maintenance.length > 0 && ( )}
<div> {changelog.maintenance && changelog.maintenance.length > 0 && (
<h2>Maintenance</h2> <div className="changelog-renderer-maintenance">
{changelog.maintenance && ( <div className="changelog-renderer-section-title">Maintenance</div>
<ReactMarkdown>{changelog.maintenance}</ReactMarkdown> {changelog.maintenance && (
)} <ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
</div> )}
)} </div>
)}
</div>
</div> </div>
); );
} }