feat: improve recommendation badges - use subtle left border instead of aggressive solid background

This commit is contained in:
2025-10-16 15:04:55 -03:00
parent 636feb5b2a
commit 96e0feb6b2

View File

@@ -1064,19 +1064,26 @@
} }
.issue-recommendation { .issue-recommendation {
background-color: var(--pf-global--success-color--100); background-color: transparent;
color: var(--pf-global--Color--100); color: var(--pf-global--Color--200);
padding: 12px; padding: 12px 16px;
border-radius: 4px; border-left: 4px solid var(--pf-global--success-color--100);
border-radius: 0;
font-size: 14px; font-size: 14px;
display: flex; display: block;
align-items: center; margin-top: 8px;
gap: 8px;
} }
.issue-recommendation::before { .issue-recommendation.cpu {
content: "💡"; border-left-color: var(--pf-global--info-color--100);
font-size: 16px; }
.issue-recommendation.memory {
border-left-color: var(--pf-global--warning-color--100);
}
.issue-recommendation.other {
border-left-color: var(--pf-global--Color--400);
} }
.other-issues-section { .other-issues-section {
@@ -2754,7 +2761,7 @@
<span class="issue-ratio">${extractRatio(issue.message)}</span> <span class="issue-ratio">${extractRatio(issue.message)}</span>
<span class="issue-values">${extractValues(issue.message)}</span> <span class="issue-values">${extractValues(issue.message)}</span>
</div> </div>
<div class="issue-recommendation"> <div class="issue-recommendation ${resourceType.toLowerCase()}">
${generateSpecificRecommendation(issue, resourceType)} ${generateSpecificRecommendation(issue, resourceType)}
</div> </div>
</div> </div>