PART 2: Slightly modernize the look - After #7072 by okurz · Pull Request #7069 · os-autoinst/openQA

okurz · 2026-03-03T21:53:03Z

feat: reduce jumbotron size for a more compact welcome area
refactor: refine modern design maintainability and typography
fix: improve navbar contrast and Job Groups visibility in dark mode
refactor: remove legacy card classes from live view
feat: modernize main dashboard layout
feat: overhaul navbar and navigation menus for modern look
feat: modernize global layout and component styles
refactor: modernize openQA theme variables for Bootstrap 5

Screenshots for comparison: Old left - new Right

Screenshot_20260303_224137_modern_bs5_left_old_right_new_dashboard

Screenshot_20260303_224219_modern_bs5_left_old_right_new_all_tests

Screenshot_20260303_224245_modern_bs5_left_old_right_new_job_group_dropdown

Screenshot_20260303_224310_modern_bs5_left_old_right_new_users_menu

Screenshot_20260303_224354_modern_bs5_left_old_right_new_tests_overview

Screenshot_20260303_224428_modern_bs5_left_old_right_new_dashboard_dark_mode

After:

style: auto-format all .scss files with Prettier #7072

github-actions · 2026-03-03T21:53:13Z

Great PR! Please pay attention to the following items before merging:

Files matching assets/stylesheets/**:

Consider providing screenshots in a PR comment to show the difference visually

This is an automatically generated QA checklist based on modified files.

Martchus

Changes I would rather revert:

The old navbar wasted less space and I liked the bigger openQA icon more.

Changes I find ok:

The old accent color looked better but I guess it doesn't make a big difference.

Changes I liked:

The new navbar and menu borders/shadows look better.
The new jumbotron background in darkmode looks better but the SUSE font color needs to be adjusted for better contrast.

Martchus · 2026-03-04T13:56:36Z

assets/stylesheets/overall.scss

+.h4,
+.h5,
+.h6 {
+  font-family: inherit;


Please keep these in one line.

I formatted files automatically with prettier. Your comment brought me to the idea to bring in such automated style changes first. I think it's easier if we first discuss the style in this new PR when we no that only whitespace changes are applied. Then I will rebase which will make this PR's changes easier to read. See

style: auto-format all .scss files with Prettier #7072

Martchus · 2026-03-04T13:58:09Z

assets/stylesheets/overall.scss

 .tooltip .tooltip-inner {
-    max-width: 400px;
-    p {
-        margin-bottom: 2px;
-    }
-    ul {
-        padding-left: 1.2rem;
-    }
-    p, ul {
-        text-align: left;
-        word-break: break-word;
-    }
+  max-width: 25rem;
+  text-align: left;
+  p {
+    margin-bottom: 0.125rem;
+  }
+  ul {
+    padding-left: 1.25rem;
+  }
 }


This isn't shown on any of the screenshots. What is the improvement/change here?

Using more relative measurements rather than fixed ones. I must say I did not check all changes visually as I assume there is generally no significant impact on normal zoom levels.

okurz · 2026-03-04T16:28:49Z

* The old navbar wasted less space and I liked the bigger openQA icon more.
* The new jumbotron background in darkmode looks better but the SUSE font color needs to be adjusted for better contrast.

Those are actually also the two biggest issues I see with it :) I will see what I can about it.

Changes I find ok:

* The old accent color looked better but I guess it doesn't make a big difference.

please clarify what you mean with "accent color"

Changes I liked:

* The new navbar and menu borders/shadows look better.

👍

perlpunk · 2026-03-05T13:26:31Z

Regarding missing OBS checks: I can't get them redelivered, but the OBS project is there, so we can look at it manually before merging: https://build.opensuse.org/package/show/devel:openQA:GitHub:os-autoinst:openQA:PR-7069/openQA

The initial PR creation is too old to redeliver the webhook.

mergify · 2026-03-28T05:04:59Z

This pull request is now in conflicts. Could you fix it? 🙏

Refactor openqa_theme.scss to use native Bootstrap 5 maps and variables. This ensures better compatibility with Bootstrap 5 native color modes and modern CSS practices while maintaining backward compatibility for existing SCSS files through variable aliasing.

Update overall.scss to leverage Bootstrap 5 CSS variables for cards, tabs, and headings. This improves dark mode consistency and introduces a more contemporary look with subtle shadows and improved spacing. Includes a fix for body margin to prevent the footer from overlapping interactive elements in UI tests.

Refresh the navigation bar and dropdown menus using modern BS5 patterns. Introduces border-radius for links and improved dropdown shadows. Retains specific vertical padding at larger breakpoints to maintain compatibility with Selenium tests that expect exact element positioning.

Replace legacy Bootstrap classes (.jumbotron, .hidden-sm-down) with modern utility equivalents. The .jumbotron class is preserved as a secondary class to maintain compatibility with existing JavaScript and UI tests.

Replace .card-outline-secondary with BS5 native .border-secondary in the live view template.

- Remove deprecated .navbar-light from navbar template to allow BS5 color modes. - Define explicit navbar CSS variables for dark mode in overall.scss. - Ensure nav-links stay bright and visible when selected or hovered in dark mode. - Improve general link and primary color contrast for dark mode.

- Restore lightweight heading weights (font-weight: 400) to match original UI. - Centralize dark mode primary color and font weight in openqa_theme.scss. - Eliminate hardcoded hex values and use SCSS functions for RGB variables. - Convert remaining px spacing to rem for better accessibility and scaling. - Clean up navigation SCSS by removing specificity overrides and using global variables.

Refine the main dashboard welcome area by reducing redundant nested padding (from ~96px to ~30px). This restores the balance of the original design while maintaining the modern Bootstrap 5 aesthetic.

- Prevent prettier from formatting multi-selector heading rules across multiple lines to maintain compactness as requested in PR review. - Revert tooltip styling changes as they are unneeded and not shown in screenshots.

- Remove single-line heading exclusions from overall.scss. - Update npm scripts to include Prettier auto-formatting and linting for .scss files during 'make tidy-js'. - Apply Prettier formatting across all .scss files in assets/stylesheets to enforce a consistent codebase style.

okurz force-pushed the feature/037_modern_design branch from 19c8dce to 2ea54c7 Compare March 3, 2026 21:55

Martchus requested changes Mar 4, 2026

View reviewed changes

okurz marked this pull request as draft March 4, 2026 17:44

okurz changed the title ~~Slightly modernize the look~~ PART 2: Slightly modernize the look - After #7072 Mar 4, 2026

okurz force-pushed the feature/037_modern_design branch 3 times, most recently from 38c579a to 46f1586 Compare March 23, 2026 14:00

okurz force-pushed the feature/037_modern_design branch from 46f1586 to 2e660af Compare March 24, 2026 22:30

okurz force-pushed the feature/037_modern_design branch from 2e660af to 27af73e Compare March 31, 2026 21:37

okurz added 10 commits April 1, 2026 13:08

feat: modernize main dashboard layout

2592d8d

Replace legacy Bootstrap classes (.jumbotron, .hidden-sm-down) with modern utility equivalents. The .jumbotron class is preserved as a secondary class to maintain compatibility with existing JavaScript and UI tests.

refactor: remove legacy card classes from live view

f877256

Replace .card-outline-secondary with BS5 native .border-secondary in the live view template.

feat: reduce jumbotron size for a more compact welcome area

560676d

Refine the main dashboard welcome area by reducing redundant nested padding (from ~96px to ~30px). This restores the balance of the original design while maintaining the modern Bootstrap 5 aesthetic.

style: address PR review feedback on overall.scss

fd10b37

- Prevent prettier from formatting multi-selector heading rules across multiple lines to maintain compactness as requested in PR review. - Revert tooltip styling changes as they are unneeded and not shown in screenshots.

okurz force-pushed the feature/037_modern_design branch from 27af73e to df75230 Compare April 1, 2026 11:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PART 2: Slightly modernize the look - After #7072#7069

PART 2: Slightly modernize the look - After #7072#7069
okurz wants to merge 10 commits intoos-autoinst:masterfrom
okurz:feature/037_modern_design

okurz commented Mar 3, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 3, 2026

Uh oh!

Martchus left a comment

Uh oh!

Martchus Mar 4, 2026

Uh oh!

okurz Mar 4, 2026

Uh oh!

Martchus Mar 4, 2026

Uh oh!

okurz Mar 4, 2026

Uh oh!

okurz commented Mar 4, 2026

Uh oh!

perlpunk commented Mar 5, 2026

Uh oh!

mergify bot commented Mar 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

okurz commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots for comparison: Old left - new Right

Uh oh!

github-actions bot commented Mar 3, 2026

Uh oh!

Martchus left a comment

Choose a reason for hiding this comment

Uh oh!

Martchus Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

okurz Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Martchus Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

okurz Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

okurz commented Mar 4, 2026

Uh oh!

perlpunk commented Mar 5, 2026

Uh oh!

mergify bot commented Mar 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

okurz commented Mar 3, 2026 •

edited

Loading