Fixed certification icon size in all the pages#29786
Conversation
Rohit0301
added
the
safe to test
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
Rohit0301
added
safe to test
Code Review ✅ ApprovedUniformly standardizes the certification icon size across all pages to improve visual consistency. No issues found. OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const tagStyle = showName | ||
| ? { | ||
| backgroundColor: certification.tagLabel.style?.color | ||
| ? certification.tagLabel.style?.color + '33' | ||
| : '#f8f8f8', | ||
| padding: '2px 6px', | ||
| } | ||
| : {}; |
There was a problem hiding this comment.
When showName is true, the asset header and certification widget still pass certifications with tagLabel.style.color, but this branch no longer uses that color to fill the chip. Named certification tags now render as transparent padded text instead of the previous tinted chip, so configured Gold/Silver/Bronze/custom colors are dropped in the main named-tag surfaces.
| const tagStyle = showName | |
| ? { | |
| backgroundColor: certification.tagLabel.style?.color | |
| ? certification.tagLabel.style?.color + '33' | |
| : '#f8f8f8', | |
| padding: '2px 6px', | |
| } | |
| : {}; | |
| const tagStyle = showName | |
| ? { | |
| backgroundColor: certification.tagLabel.style?.color | |
| ? certification.tagLabel.style?.color + '33' | |
| : '#f8f8f8', | |
| padding: '2px 6px', | |
| } | |
| : {}; |
Context Used: CLAUDE.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| span.certification-text { | ||
| color: @grey-700; | ||
| font-size: 12px; | ||
| font-size: 14px; | ||
| max-width: 120px; | ||
| } | ||
|
|
||
| span.bronze { | ||
| color: @red-16; | ||
| } | ||
|
|
||
| span.silver { | ||
| color: @grey-700; | ||
| } | ||
|
|
||
| span.gold { | ||
| color: @yellow-11; | ||
| } | ||
| } |
There was a problem hiding this comment.
The component still adds bronze, silver, or gold as the text class, but this hunk removes the only level-specific rules for those classes. Named certifications without a distinct icon now inherit the same text color, so users can no longer distinguish the certification level from the text styling.
| span.certification-text { | |
| color: @grey-700; | |
| font-size: 12px; | |
| font-size: 14px; | |
| max-width: 120px; | |
| } | |
| span.bronze { | |
| color: @red-16; | |
| } | |
| span.silver { | |
| color: @grey-700; | |
| } | |
| span.gold { | |
| color: @yellow-11; | |
| } | |
| } | |
| span.certification-text { | |
| color: @grey-700; | |
| font-size: 14px; | |
| max-width: 120px; | |
| } | |
| span.bronze { | |
| color: @red-16; | |
| } | |
| span.silver { | |
| color: @grey-700; | |
| } | |
| span.gold { | |
| color: @yellow-11; | |
| } | |
| } |
Context Used: CLAUDE.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| .certification-card-content { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| align-items: center; | ||
| gap: 12px; |
There was a problem hiding this comment.
The certification popover renders a fixed-size icon next to a title and free-form description inside a narrow card. When that description wraps, align-items: center centers the icon against the whole text block instead of the first line, making longer certification cards look vertically off compared with the previous top-aligned layout.
| .certification-card-content { | |
| display: flex; | |
| align-items: flex-start; | |
| align-items: center; | |
| gap: 12px; | |
| .certification-card-content { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; |
Context Used: CLAUDE.md (source)
Jest test CoverageUI tests summary
|
|
🔴 Playwright Results — 2 failure(s), 20 flaky✅ 4513 passed · ❌ 2 failed · 🟡 20 flaky · ⏭️ 55 skipped
Genuine Failures (failed on all attempts)❌
|
1 participant
Describe your changes:
Fixes #
I worked on ... because ...
Type of change:
High-level design:
N/A — small change.
Tests:
Use cases covered
Unit tests
Backend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
UI screen recording / screenshots:
Not applicable.
Checklist:
Fixes <issue-number>: <short explanation>Fixes #<issue-number>above.Greptile Summary
This PR updates certification icon sizing and spacing in the UI. The main changes are:
Confidence Score: 4/5
Named certification tags lose their configured visual styling in reachable UI surfaces.
CertificationTag.tsx and certification-tag.less need follow-up.
Important Files Changed
Reviews (1): Last reviewed commit: "Fixed certification icon size in all the..." | Re-trigger Greptile
Context used (3)