web: update look&feel of some outdated pages

[dgdavid]

Problem

Some pages were not update to the latest look&feel introduced at #3009 along with a better overview page and confirmation dialog.

Solution

Make them match the new look&feel progressively.

Testing

• Adapted existing tests
• Tested manually

Screenshots

Screen	Before	After
Server error
Installation complete (w/o TPM)
Installation complete (with TPM)
System rebooting

[dgdavid]

I don't have a particularly strong opinion on some of the changes, but I believe it's important to have all screens updated and aligned with the recently revised login and installation progress pages.

For the specific case of the InstallationFinished screen, I had to adjust the placement of the main action button conditionally due to the TPM alert (internally called TpmHint). In my view, placing the button differently depending on the content is reasonable. Regarding the alert itself, I have two suggestions for future improvements (not for this PR):

• Use default PatternFly styling for alerts instead of custom CSS overrides.
  The default style, which includes a thin border, may fits better now with the current design, in which also there is a tendency for using fewer alerts across pages.

  

  diff --git a/web/src/assets/styles/index.scss b/web/src/assets/styles/index.scss
  index 1d8460069..e1de388fa 100644
    --- a/web/src/assets/styles/index.scss
    +++ b/web/src/assets/styles/index.scss
  @@ -334,27 +334,6 @@ strong {
     --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
    --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
     --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  -  border-width: 0;
  -  border-radius: 0;
  -  border-inline-start-width: var(--pf-t--global--border--width--box--status--default);
  -
  -  &:has(.pf-v6-c-alert__description) {
  -    row-gap: var(--pf-t--global--spacer--xs);
  -  }
  -
  -  $pf-alert-modifiers: "custom", "info", "success", "warning", "danger";
  -
  -  @each $modifier in $pf-alert-modifiers {
  -    &.pf-m-#{$modifier} {
  -      background: linear-gradient(
  -        to right in srgb,
  -        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 94%),
  -        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 96%),
  -        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 98%),
  -        transparent
  -      );
  -    }
  -  }
   
     &.pf-m-plain {
       border: 0;

• Consider using the "danger" variant for this alert.
  Since it conveys an important warning that the user must boot directly into the system for the installation to succeed, using the danger variant have more sense than just a hint.

  

[dgdavid]

Another note for reviewers: you might notice that some presentational markup is repeated in several places. Ideally, this should be extracted into a reusable layout component for maintainability and consistency. I’ve chosen to defer this refactoring to future iterations, once these changes are more consolidated.

[dgdavid]

For the InstallationExit (the screen after clicking on Reboot), below alternative are shorten and more straigtforward.

Rebooting system

System rebooting

System is rebooting

[ancorgs]

I also prefer the standard "danger" variant for TpmHint.

In any case (both using our customized ones or a standard variant), I find the font sizes to be a bit surprising. What it seems to be the title ("TPM sealing requires the new system...") is actually smaller that it seems to be the body ("If a local media was used...").

[coveralls]

coverage: 72.996% (+0.02%) from 72.976%
when pulling b2c7c04 on update-outdated-pages
into ce7a8ee on master.

[dgdavid]

I also prefer the standard "danger" variant for TpmHint.

Done with current styles.

Check b2c7c04

Switch to PF/Alert default styles postponed to other PR

[ancorgs]

Let's merge this as it is. Although I would like to rethink a bit the TpmHint in the future. Now that the texts are all displayed at once (instead of using "see more details") I find it a bit too verbose and repetitive.