Converted insights custom scss to tailwind

[stijnpotters1]

No description provided.

[Copilot]

Pull request overview

This PR migrates the Angular frontend styling from component-level SCSS to Tailwind utility classes, while also adding a lightweight “seeded-data” Docker Compose setup to speed up PR reviews without requiring Postgres/importer/GitHub credentials.

Changes:

• Replaced many component .scss styles with Tailwind utility classes in templates and host bindings.
• Added Tailwind v4 + PostCSS wiring and switched the Angular workspace from SCSS to CSS global styles.
• Added docker-compose.seed.yaml and documentation for running the webapp against the seeded in-memory DB for review.

Reviewed changes

Copilot reviewed 162 out of 170 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
README.md	Documents seeded-data PR review workflow and clarifies required Spring profiles.
insights-webapp/src/main/frontend/src/styles.scss	Removes old global SCSS.
insights-webapp/src/main/frontend/src/styles.css	Adds Tailwind import, keyframes, and markdown-body base styling.
insights-webapp/src/main/frontend/src/assets/icons/spinner.svg	Adds spinner icon used for loading states.
insights-webapp/src/main/frontend/src/assets/icons/moon.svg	Adds icon used by pill button.
insights-webapp/src/main/frontend/src/assets/icons/list.svg	Adds icon used by pill button.
insights-webapp/src/main/frontend/src/assets/icons/help.svg	Adds icon used by pill button.
insights-webapp/src/main/frontend/src/assets/icons/github.svg	Adds icon used by pill button.
insights-webapp/src/main/frontend/src/app/pipes/severity-chip.pipe.ts	Introduces Tailwind-backed severity chip class mapping.
insights-webapp/src/main/frontend/src/app/pipes/badge-class.pipe.ts	Splits “badge key” vs “badge chip classes” and adds BadgeChipPipe.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/timeline-header/timeline-header.component.ts	Removes SCSS wiring; template now owns styling.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/timeline-header/timeline-header.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/timeline-header/timeline-header.component.html	Converts timeline header styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-toolbar/roadmap-toolbar.component.ts	Adds computed class strings for view-mode toggles; removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-toolbar/roadmap-toolbar.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-toolbar/roadmap-toolbar.component.html	Converts roadmap toolbar to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-legend/roadmap-legend.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-legend/roadmap-legend.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/roadmap-legend/roadmap-legend.component.html	Converts roadmap legend styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/release-roadmap.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/release-roadmap.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/release-roadmap.component.html	Converts release roadmap layout to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/milestone-row/milestone-row.component.ts	Removes SCSS wiring; refines track height calculation for Tailwind-based layout.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/milestone-row/milestone-row.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/milestone-row/milestone-row.component.html	Converts milestone row styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/issue-bar/issue-bar.component.ts	Adds computed inner class strings; removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/issue-bar/issue-bar.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-roadmap/issue-bar/issue-bar.component.html	Converts issue bar styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-panel/vulnerability-impact-panel.component.ts	Uses SeverityChipPipe/toSeverityKey; switches styling to host+template.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-manage.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-manage.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-manage.component.html	Converts vulnerability impact manage layout to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-details/vulnerability-impact-details.component.ts	Moves basic display styling to host; removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/vulnerability-impact-manage/vulnerability-impact-details/vulnerability-impact-details.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-manage/release-manage.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-panel/business-value-panel.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-manage.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-manage.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-manage.component.html	Converts business value manage layout to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-issue-panel/business-value-issue-panel.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-edit/business-value-edit.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-edit/business-value-edit.component.html	Converts edit modal form styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-duplicate/business-value-duplicate.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-duplicate/business-value-duplicate.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-duplicate/business-value-duplicate.component.html	Converts duplicate modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-delete/business-value-delete.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-delete/business-value-delete.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-delete/business-value-delete.component.html	Converts delete modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-add/business-value-add.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-add/business-value-add.component.html	Converts add modal form styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/release-skipped-versions.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/release-skipped-versions.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/release-skipped-versions.html	Converts skipped versions modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-version-button/include-version-button.component.ts	Moves styling to host+computed classes.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-version-button/include-version-button.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-version-button/include-version-button.component.html	Uses Tailwind hover states for pending/undo label.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-actions/include-actions.component.ts	Moves styling to host+template utilities.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-actions/include-actions.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-skipped-versions/include-actions/include-actions.component.html	Converts include actions UI to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-node.service.ts	Minor doc-comment text edits.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-graph.component.ts	Adds LtsBadgeComponent import and updates imports list.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.ts	Moves host display styling from SCSS to host metadata.
insights-webapp/src/main/frontend/src/app/pages/release-graph/release-catalogus/release-catalogus.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/vulnerability-details-off-canvas/vulnerability-details-off-canvas.ts	Uses SeverityChipPipe/toSeverityKey; removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/vulnerability-details-off-canvas/vulnerability-details-off-canvas.html	Converts vulnerability off-canvas styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-vulnerabilities/release-vulnerabilities.ts	Uses SeverityChipPipe/toSeverityKey; removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-vulnerabilities/release-vulnerabilities.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-vulnerabilities/release-vulnerabilities.html	Converts vulnerabilities list styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/release-important-issues.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/release-important-issues.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/release-important-issues.component.html	Converts important issues panel styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/issue-tree-branch/issue-tree-branch.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/issue-tree-branch/issue-tree-branch.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-important-issues/issue-tree-branch/issue-tree-branch.component.html	Converts issue tree row styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-highlights/release-highlights.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-highlights/release-highlights.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-highlights/release-highlights.component.html	Converts highlights chart layout/styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-details.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value/release-business-value.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value/release-business-value.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value/release-business-value.component.html	Converts business values list styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value-modal/release-business-value-modal.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value-modal/release-business-value-modal.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/release-details/release-business-value-modal/release-business-value-modal.component.html	Converts business value modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/header/header.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview.component.scss	Deletes page SCSS.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview.component.html	Converts CVE overview page layout to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-right-panel/cve-overview-right-panel.component.ts	Moves panel layout styling to host metadata.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-left-panel.component.ts	Moves panel layout styling to host metadata.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-left-panel.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-left-panel.component.html	Converts left panel UI to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-item/cve-overview-item.component.ts	Switches to BadgeChipPipe and moves display styling to host.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-item/cve-overview-item.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/pages/cve-overview/cve-overview-left-panel/cve-overview-item/cve-overview-item.component.html	Converts CVE list item styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/vulnerability-stats/vulnerability-stats.component.ts	Moves wrapper display styling to host metadata.
insights-webapp/src/main/frontend/src/app/components/vulnerability-stats/vulnerability-stats.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/vulnerability-stats/vulnerability-stats.component.html	Converts stat row layout to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/tooltip/tooltip.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/tooltip/tooltip.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/tooltip/tooltip.component.html	Converts tooltip styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/stat-card/stat-card.component.ts	Replaces SCSS-driven tinting with computed Tailwind class strings.
insights-webapp/src/main/frontend/src/app/components/stat-card/stat-card.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/stat-card/stat-card.component.html	Converts label/value styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/pill-button/pill-button.component.ts	Replaces SCSS icons with mask-based Tailwind styling and computed classes.
insights-webapp/src/main/frontend/src/app/components/pill-button/pill-button.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/pill-button/pill-button.component.html	Uses computed Tailwind class strings for pill button.
insights-webapp/src/main/frontend/src/app/components/off-canvas/off-canvas.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/off-canvas/off-canvas.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/off-canvas/off-canvas.component.html	Converts off-canvas styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/not-found/not-found.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/not-found/not-found.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/not-found/not-found.component.html	Converts 404 page styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/modal/modal.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/modal/modal.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/modal/modal.component.html	Converts modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/lts-badge/lts-badge.component.ts	Adds new LTS badge component rendered in the graph UI.
insights-webapp/src/main/frontend/src/app/components/loader/loader.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/loader/loader.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/loader/loader.component.html	Converts loader styling to Tailwind utilities and uses shared keyframes.
insights-webapp/src/main/frontend/src/app/components/issue-type-tag/issue-type-tag.component.ts	Moves wrapper display styling to host metadata.
insights-webapp/src/main/frontend/src/app/components/issue-type-tag/issue-type-tag.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/issue-type-tag/issue-type-tag.component.html	Converts issue type tag styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/gesture/gesture.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/gesture/gesture.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/gesture/gesture.component.html	Converts gesture indicator styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/filter-icon/filter-icon.component.ts	Moves display styling to host metadata.
insights-webapp/src/main/frontend/src/app/components/filter-icon/filter-icon.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/filter-icon/filter-icon.component.html	Adds Tailwind sizing utility to SVG.
insights-webapp/src/main/frontend/src/app/components/feedback/feedback.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/feedback/feedback.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/feedback/feedback.component.html	Converts feedback FAB styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/cvss-calculator/cvss-calculator.component.ts	Moves wrapper display styling to host metadata.
insights-webapp/src/main/frontend/src/app/components/cvss-calculator/cvss-calculator.component.html	Converts CVSS calculator modal styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/cve-search-input/cve-search-input.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/src/app/components/cve-search-input/cve-search-input.component.scss	Deletes component SCSS.
insights-webapp/src/main/frontend/src/app/components/cve-search-input/cve-search-input.component.html	Converts search input styling to Tailwind utilities.
insights-webapp/src/main/frontend/src/app/components/cve-filter-panel/cve-filter-panel.component.ts	Moves panel layout styling to host metadata.
insights-webapp/src/main/frontend/src/app/app.component.ts	Removes SCSS wiring.
insights-webapp/src/main/frontend/package.json	Adds Tailwind/PostCSS dependencies.
insights-webapp/src/main/frontend/angular.json	Switches styles from SCSS to CSS and updates schematics defaults.
insights-webapp/src/main/frontend/.postcssrc.json	Enables Tailwind PostCSS plugin.
docs/ARCHITECTURE.md	Documents local-seed as the PR review profile and links to README instructions.
docker-compose.seed.yaml	Adds dedicated seeded-data review stack for the webapp.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (2)

insights-webapp/src/main/frontend/src/app/pages/release-roadmap/timeline-header/timeline-header.component.html:16

• z-3 is not a default Tailwind z-index utility, so this left column may not stay above the grid as intended. Use z-[3] (arbitrary value) or a standard z-* class.
  insights-webapp/src/main/frontend/src/app/pages/release-manage/business-value-manage/business-value-add/business-value-add.component.html:71
• The textarea uses non-default Tailwind sizing utilities (min-h-55, max-md:min-h-45), so the intended min-heights likely won’t apply. Use arbitrary values or nearest default utilities.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 166 out of 174 changed files in this pull request and generated no new comments.

[stijnpotters1]

@Matthbo Do you have any tips or tricks i should take into account while implementing this?

[Matthbo]

@Matthbo Do you have any tips or tricks i should take into account while implementing this?

Keep in mind the how the base classes work, the Flow had a lot of something[...px] while usually that could be converted to something-40 for example. So keep in mind the scaling of items
You can also do calculations to get to more precise values.
Everything under core concepts in the documentation of tailwind is helpful, read it carefully to see what you can do and dont be too attached to how old css had set things up.
Use groups if you need to depend on the state of a related element.
Think about theming, the theming file should define the colour palette that you can implicitly use, theres also a pretty easy way to have darkmode as a theme.

[stijnpotters1]

@Matthbo Do you have any tips or tricks i should take into account while implementing this?

Keep in mind the how the base classes work, the Flow had a lot of something[...px] while usually that could be converted to something-40 for example. So keep in mind the scaling of items You can also do calculations to get to more precise values. Everything under core concepts in the documentation of tailwind is helpful, read it carefully to see what you can do and dont be too attached to how old css had set things up. Use groups if you need to depend on the state of a related element. Think about theming, the theming file should define the colour palette that you can implicitly use, theres also a pretty easy way to have darkmode as a theme.

Okay thank you! tomorrow i will do more and better reseach and i will try to improve it.

[stijnpotters1]

Okay i have tried my best to improve it according to your advise.
I think its almost done but it is worth to double check.
Good luck :)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud