agama-project · dgdavid · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Jan 20 03:52:59 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Update look&feel of some pages to make them match the new style
+  (gh#agama-project/agama#3050).
+
 -------------------------------------------------------------------
 Tue Jan 20 00:53:06 UTC 2026 - David Diaz <dgonzalez@suse.com>
 

diff --git a/web/src/components/core/InstallationExit.test.tsx b/web/src/components/core/InstallationExit.test.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2025] SUSE LLC
+ * Copyright (c) [2025-2026] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -28,16 +28,16 @@ import InstallationExit from "./InstallationExit";
 describe("InstallationExit", () => {
   it("makes users aware system is rebooting", () => {
     plainRender(<InstallationExit />);
-    screen.getByRole("heading", { name: "Your system is rebooting", level: 1 });
+    screen.getByRole("heading", { name: "The system is rebooting", level: 1 });
   });
 
   it("makes users aware installer is no longer useful", () => {
     plainRender(<InstallationExit />);
-    screen.getByText(/The installer interface is no longer available/);
+    screen.getByText("The installer interface is no longer available.");
   });
 
   it("invites users to close the installer", () => {
     plainRender(<InstallationExit />);
-    screen.getByText(/you can safely close this window/);
+    screen.getByText("You can safely close this window.");
   });
 });
diff --git a/web/src/components/core/InstallationExit.tsx b/web/src/components/core/InstallationExit.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2025] SUSE LLC
+ * Copyright (c) [2025-2026] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -21,45 +21,63 @@
  */
 
 import React from "react";
-import {
-  Bullseye,
-  Card,
-  CardBody,
-  Content,
-  EmptyState,
-  EmptyStateBody,
-  Grid,
-  GridItem,
-} from "@patternfly/react-core";
+import { Flex, Grid, GridItem, HelperText, HelperTextItem, Title } from "@patternfly/react-core";
+import Icon from "~/components/layout/Icon";
+import Page from "~/components/core/Page";
 import { _ } from "~/i18n";
-import Page from "./Page";
+
+import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
 
 export default function InstallationExit() {
   return (
     <Page variant="minimal">
-      <Bullseye>
-        <Grid hasGutter>
-          <GridItem sm={8} smOffset={2}>
-            <Card>
-              <CardBody>
-                <EmptyState
-                  variant="xl"
-                  titleText={_("Your system is rebooting")}
-                  headingLevel="h1"
-                >
-                  <EmptyStateBody>
-                    <Content component="p">
-                      {_(
-                        "The installer interface is no longer available, so you can safely close this window.",
-                      )}
-                    </Content>
-                  </EmptyStateBody>
-                </EmptyState>
-              </CardBody>
-            </Card>
+      <Page.Content>
+        <Grid hasGutter style={{ height: "100%", placeContent: "center" }}>
+          <GridItem sm={12} md={6} style={{ alignSelf: "center" }}>
+            <Flex
+              gap={{ default: "gapMd" }}
+              direction={{ default: "column" }}
+              alignItems={{ default: "alignItemsCenter", md: "alignItemsFlexEnd" }}
+              alignContent={{ default: "alignContentCenter", md: "alignContentFlexEnd" }}
+              alignSelf={{ default: "alignSelfCenter" }}
+            >
+              <Icon name="restart_alt" width="3rem" height="3rem" />
+              <Title
+                headingLevel="h1"
+                style={{ textWrap: "balance" }}
+                className={[textStyles.fontSize_3xl, alignmentStyles.textAlignEndOnMd].join(" ")}
+              >
+                {_("The system is rebooting")}
+              </Title>
+              <HelperText>
+                <HelperTextItem>
+                  {_("The installer interface is no longer available.")}
+                </HelperTextItem>
+              </HelperText>
+            </Flex>
+          </GridItem>
+          <GridItem sm={12} md={6}>
+            <Flex
+              gap={{ default: "gapMd" }}
+              alignItems={{ md: "alignItemsCenter" }}
+              justifyContent={{ default: "justifyContentCenter", md: "justifyContentFlexStart" }}
+              style={{
+                minBlockSize: "30dvh",
+                boxShadow: "-1px 0 0 var(--pf-t--global--border--color--default)",
+                paddingInlineStart: "var(--pf-t--global--spacer--md)",
+                marginBlockStart: "var(--pf-t--global--spacer--xl)",
+              }}
+            >
+              <HelperText>
+                <HelperTextItem className={textStyles.fontSizeLg}>
+                  {_("You can safely close this window.")}
+                </HelperTextItem>
+              </HelperText>
+            </Flex>
           </GridItem>
         </Grid>
-      </Bullseye>
+      </Page.Content>
     </Page>
   );
 }
diff --git a/web/src/components/core/InstallationFinished.test.tsx b/web/src/components/core/InstallationFinished.test.tsx
@@ -103,7 +103,7 @@ describe("InstallationFinished", () => {
 
   it("shows the finished installation screen", () => {
     installerRender(<InstallationFinished />);
-    screen.getByText("Congratulations!");
+    screen.getByRole("heading", { level: 1, name: "Installation complete" });
   });
 
   it("shows a 'Reboot' button", () => {

diff --git a/web/src/components/core/InstallationFinished.tsx b/web/src/components/core/InstallationFinished.tsx
@@ -20,45 +20,43 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useState } from "react";
+import React from "react";
 import {
   Alert,
-  Bullseye,
   Button,
-  Card,
-  CardBody,
   Content,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateFooter,
-  ExpandableSection,
+  Divider,
+  Flex,
   Grid,
   GridItem,
+  HelperText,
+  HelperTextItem,
   Stack,
+  Title,
 } from "@patternfly/react-core";
 import { useNavigate } from "react-router";
-import { Icon } from "~/components/layout";
-import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
+import Icon from "~/components/layout/Icon";
+import Page from "~/components/core/Page";
 import { useExtendedConfig } from "~/hooks/model/config";
 import { finishInstallation } from "~/api";
 import { ROOT as PATHS } from "~/routes/paths";
 import { _ } from "~/i18n";
-import Page from "./Page";
 
-const TpmHint = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
+import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
+import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
+
+const TpmAlert = () => {
   const title = _("TPM sealing requires the new system to be booted directly.");
 
   return (
-    <Alert isInline className={alignmentStyles.textAlignStart} title={<strong>{title}</strong>}>
+    <Alert title={title} variant="danger">
       <Stack hasGutter>
-        {_("If a local media was used to run this installer, remove it before the next boot.")}
-        <ExpandableSection
-          isExpanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          toggleText={isExpanded ? _("Hide details") : _("See more details")}
-        >
+        <Divider />
+        <Content isEditorial className={textStyles.fontSizeXl}>
+          {_("If a local media was used to run this installer, remove it before the next boot.")}
+        </Content>
+        <Divider />
+        <Content>
           {
             // TRANSLATORS: "Trusted Platform Module" is the name of the technology and "TPM" its abbreviation
             _(
@@ -67,14 +65,12 @@ 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>
+        </Content>
       </Stack>
     </Alert>
   );
 };
 
-const SuccessIcon = () => <Icon name="check_circle" className="icon-xxxl color-success" />;
-
 // TODO: define some utility method to get the device used as root (drive, partition, logical volume).
 // TODO: use type checking for config.
 function usingTpm(config): boolean {
@@ -97,50 +93,74 @@ function usingTpm(config): boolean {
   return root?.encryption?.tpmFde !== undefined;
 }
 
-function InstallationFinished() {
-  const { storage: storageConfig } = useExtendedConfig();
+const RebootButton = () => {
   const navigate = useNavigate();
 
   const onReboot = () => {
     finishInstallation();
     navigate(PATHS.installationExit, { replace: true });
   };
 
+  return (
+    <Button variant="primary" size="lg" style={{ minInlineSize: "25dvw" }} onClick={onReboot}>
+      {_("Reboot")}
+    </Button>
+  );
+};
+
+function InstallationFinished() {
+  const { storage: storageConfig } = useExtendedConfig();
+  const mountTpmAlert = usingTpm(storageConfig);
+
   return (
     <Page showQuestions={false}>
-      <Bullseye>
-        <Grid hasGutter>
-          <GridItem sm={8} smOffset={2}>
-            <Card>
-              <CardBody>
-                <EmptyState
-                  variant="xl"
-                  titleText={_("Congratulations!")}
-                  headingLevel="h1"
-                  icon={SuccessIcon}
+      <Page.Content>
+        <Grid hasGutter style={{ height: "100%", placeContent: "center" }}>
+          <GridItem sm={12} md={6} style={{ alignSelf: "center" }}>
+            <Flex
+              gap={{ default: "gapMd" }}
+              direction={{ default: "column" }}
+              alignItems={{ default: "alignItemsCenter", md: "alignItemsFlexEnd" }}
+              alignContent={{ default: "alignContentCenter", md: "alignContentFlexEnd" }}
+              alignSelf={{ default: "alignSelfCenter" }}
+            >
+              <Icon name="done_all" width="3rem" height="3rem" />
+              <Title
+                headingLevel="h1"
+                style={{ textWrap: "balance" }}
+                className={[textStyles.fontSize_3xl, alignmentStyles.textAlignEndOnMd].join(" ")}
+              >
+                {_("Installation complete")}
+              </Title>
+
+              <HelperText>
+                <HelperTextItem
+                  className={alignmentStyles.textAlignEnd}
+                  style={{ textWrap: "balance" }}
                 >
-                  <EmptyStateBody>
-                    <Content component="p">
-                      {_("The installation on your machine is complete.")}
-                    </Content>
-                    <Content component="p">
-                      {_("At this point you can reboot the machine to log in to the new system.")}
-                    </Content>
-                    {usingTpm(storageConfig) && <TpmHint />}
-                  </EmptyStateBody>
-                  <EmptyStateFooter>
-                    <EmptyStateActions>
-                      <Button variant="primary" onClick={onReboot}>
-                        {_("Reboot")}
-                      </Button>
-                    </EmptyStateActions>
-                  </EmptyStateFooter>
-                </EmptyState>
-              </CardBody>
-            </Card>
+                  {_("You can reboot the machine to log in to the new system.")}
+                </HelperTextItem>
+              </HelperText>
+              {mountTpmAlert && <RebootButton />}
+            </Flex>
+          </GridItem>
+          <GridItem sm={12} md={6}>
+            <Flex
+              gap={{ default: "gapMd" }}
+              alignItems={{ md: "alignItemsCenter" }}
+              justifyContent={{ default: "justifyContentCenter", md: "justifyContentFlexStart" }}
+              style={{
+                minBlockSize: "30dvh",
+                boxShadow: "-1px 0 0 var(--pf-t--global--border--color--default)",
+                paddingInlineStart: "var(--pf-t--global--spacer--md)",
+                marginBlockStart: "var(--pf-t--global--spacer--xl)",
+              }}
+            >
+              {mountTpmAlert ? <TpmAlert /> : <RebootButton />}
+            </Flex>
           </GridItem>
         </Grid>
-      </Bullseye>
+      </Page.Content>
     </Page>
   );
 }

diff --git a/web/src/components/core/ServerError.test.tsx b/web/src/components/core/ServerError.test.tsx
@@ -30,7 +30,8 @@ import ServerError from "./ServerError";
 describe("ServerError", () => {
   it("wraps a generic server problem message", () => {
     installerRender(<ServerError />);
-    screen.getByText(/Cannot connect to Agama server/i);
+    screen.getByText("Cannot connect");
+    screen.getByText("Check whether Agama server is running.");
   });
 
   it("calls location.reload when user clicks on 'Reload'", async () => {