web: UI clean up (#1310)

An intermediate clean up toward the new UI.

web/src/App.jsx

@@ -21,16 +21,14 @@
 
 import React, { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
-
+import { Questions } from "~/components/questions";
+import { ServerError, Installation } from "~/components/core";
+import { Loading } from "./components/layout";
+import { useInstallerL10n } from "./context/installerL10n";
 import { useInstallerClient, useInstallerClientStatus } from "~/context/installer";
 import { useProduct } from "./context/product";
 import { INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
-import { Questions } from "~/components/questions";
-
-import { ServerError, If, Installation } from "~/components/core";
-import { Loading } from "./components/layout";
-import { useInstallerL10n } from "./context/installerL10n";
 
 /**
  * Main application component.

web/src/assets/styles/composition.scss

@@ -1,29 +1,3 @@
-.stack > :where(
-  :not(legend, :last-child)) {
-  margin-block-end: var(--stack-gutter);
-}
-
-.flex-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  @extend .stack;
-}
-
-.split {
-  display: flex;
-  align-items: center;
-  gap: var(--split-gutter);
-}
-
-[data-items-alignment="start"] {
-  align-items: start;
-}
-
-.wrapped {
-  flex-wrap: wrap;
-}
-
 // TODO: make it less specific.
 .location-layout > div {
   display: flex;

web/src/assets/styles/patternfly-overrides.scss

@@ -123,7 +123,6 @@ table td > .pf-v5-c-empty-state {
 }
 
 .pf-v5-c-toolbar {
-  --stack-gutter: 0;
   --pf-v5-c-toolbar--PaddingTop: 0;
   --pf-v5-c-toolbar--PaddingBottom: 0;
 }
@@ -304,7 +303,9 @@ table td > .pf-v5-c-empty-state {
   fill: white;
 }
 
-.pf-v5-c-masthead .pf-v5-c-button.pf-m-link,
-.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
-  color: white;
+:not(.pf-m-light-200).pf-v5-c-masthead {
+  .pf-v5-c-button.pf-m-link,
+  .pf-v5-c-button.pf-m-plain {
+    color: white;
+  }
 }

web/src/assets/styles/utilities.scss

@@ -161,10 +161,6 @@
   padding: 0;
 }
 
-.no-stack-gutter {
-  --stack-gutter: 0;
-}
-
 .block-size-auto {
   block-size: auto;
 }

web/src/assets/styles/variables.scss

@@ -40,9 +40,6 @@
   --icon-size-xxl: 5rem;
   --icon-size-xxxl: 10rem;
 
-  --stack-gutter: var(--spacer-normal);
-  --split-gutter: var(--spacer-small);
-
   --wrapper-padding: var(--spacer-small);
   --wrapper-background: white;
 

web/src/components/core/Fieldset.jsx

@@ -22,6 +22,7 @@
 // @ts-check
 
 import React from "react";
+import { Stack } from "@patternfly/react-core";
 
 /**
  * Convenient component for grouping form fields in "sections"
@@ -47,9 +48,11 @@ export default function Fieldset({
   ...otherProps
 }) {
   return (
-    <fieldset className="stack" {...otherProps}>
-      {legend && <legend>{legend}</legend>}
-      {children}
+    <fieldset {...otherProps}>
+      <Stack hasGutter>
+        {legend && <legend>{legend}</legend>}
+        {children}
+      </Stack>
     </fieldset>
   );
 }

web/src/components/core/InstallationFinished.jsx

@@ -22,27 +22,23 @@
 import React, { useState, useEffect } from "react";
 import {
   Alert,
-  Text,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  ExpandableSection,
+  EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, ExpandableSection,
+  Stack,
+  Text
 } from "@patternfly/react-core";
-
-import { If, Page } from "~/components/core";
+import { Page } from "~/components/core";
 import { Icon } from "~/components/layout";
-import { useInstallerClient } from "~/context/installer";
 import { EncryptionMethods } from "~/client/storage";
 import { _ } from "~/i18n";
+import { useInstallerClient } from "~/context/installer";
 
 const TpmHint = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const title = _("TPM sealing requires the new system to be booted directly.");
 
   return (
     <Alert isInline variant="info" className="tpm-hint" title={<strong>{title}</strong>}>
-      <div className="stack">
+      <Stack hasGutter>
         {_("If a local media was used to run this installer, remove it before the next boot.")}
         <ExpandableSection
           isExpanded={isExpanded}
@@ -56,7 +52,7 @@ open encrypted devices will take place during the first boot of the new system.
 the machine needs to boot directly to the new boot loader.")
           }
         </ExpandableSection>
-      </div>
+      </Stack>
     </Alert>
   );
 };
@@ -98,16 +94,11 @@ function InstallationFinished() {
         <EmptyStateBody>
           <Text>{_("The installation on your machine is complete.")}</Text>
           <Text>
-            <If
-              condition={usingIguana}
-              then={_("At this point you can power off the machine.")}
-              else={_("At this point you can reboot the machine to log in to the new system.")}
-            />
+            {usingIguana
+              ? _("At this point you can power off the machine.")
+              : _("At this point you can reboot the machine to log in to the new system.")}
           </Text>
-          <If
-            condition={usingTpm}
-            then={<TpmHint />}
-          />
+          {usingTpm && <TpmHint />}
         </EmptyStateBody>
       </EmptyState>