+
);
}
diff --git a/web/src/components/core/ProgressText.tsx b/web/src/components/core/ProgressText.tsx
index 8a31346e2a..705fe6c71f 100644
--- a/web/src/components/core/ProgressText.tsx
+++ b/web/src/components/core/ProgressText.tsx
@@ -21,7 +21,7 @@
*/
import React from "react";
-import { Split, Text } from "@patternfly/react-core";
+import { Split, Content } from "@patternfly/react-core";
type ProgressTextProps = {
/** Progress message. */
@@ -39,7 +39,7 @@ export default function ProgressText({ message, current, total }: ProgressTextPr
const text = current === 0 ? message : `${message} (${current}/${total})`;
return (
- {text}
+ {text}
);
}
diff --git a/web/src/components/core/ServerError.tsx b/web/src/components/core/ServerError.tsx
index 2d2c4cc70d..1735b4a1fb 100644
--- a/web/src/components/core/ServerError.tsx
+++ b/web/src/components/core/ServerError.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2022-2024] SUSE LLC
+ * Copyright (c) [2022-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -21,13 +21,8 @@
*/
import React from "react";
-import {
- EmptyState,
- EmptyStateIcon,
- EmptyStateBody,
- EmptyStateHeader,
-} from "@patternfly/react-core";
-import { Center, Icon, PlainLayout } from "~/components/layout";
+import { Bullseye, EmptyState, EmptyStateBody } from "@patternfly/react-core";
+import { Icon, PlainLayout } from "~/components/layout";
import { Page } from "~/components/core";
import { _ } from "~/i18n";
import { locationReload } from "~/utils";
@@ -39,16 +34,16 @@ function ServerError() {
-
-
- }
- />
+
+ {_("Please, check whether it is running.")}
-
+
diff --git a/web/src/components/l10n/KeyboardSelection.tsx b/web/src/components/l10n/KeyboardSelection.tsx
index 0675bc3877..dce08d3192 100644
--- a/web/src/components/l10n/KeyboardSelection.tsx
+++ b/web/src/components/l10n/KeyboardSelection.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2023-2024] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -21,7 +21,7 @@
*/
import React, { useState } from "react";
-import { Form, FormGroup, Radio, Text } from "@patternfly/react-core";
+import { Content, Form, FormGroup, Radio } from "@patternfly/react-core";
import { useNavigate } from "react-router-dom";
import { ListSearch, Page } from "~/components/core";
import { _ } from "~/i18n";
@@ -59,7 +59,7 @@ export default function KeyboardSelection() {
{name}{" "}
- {id}
+ {id}
}
value={id}
diff --git a/web/src/components/l10n/LocaleSelection.tsx b/web/src/components/l10n/LocaleSelection.tsx
index ccc50b8e41..2446a52e09 100644
--- a/web/src/components/l10n/LocaleSelection.tsx
+++ b/web/src/components/l10n/LocaleSelection.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2023-2024] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -57,10 +57,12 @@ export default function LocaleSelection() {
{name}
-
+
{territory}
- {id}
+
+ {id}
+
}
value={id}
diff --git a/web/src/components/l10n/TimezoneSelection.tsx b/web/src/components/l10n/TimezoneSelection.tsx
index 614ba8dc5a..30136056fe 100644
--- a/web/src/components/l10n/TimezoneSelection.tsx
+++ b/web/src/components/l10n/TimezoneSelection.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2023-2024] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -21,7 +21,7 @@
*/
import React, { useState } from "react";
-import { Divider, Flex, Form, FormGroup, Radio, Text } from "@patternfly/react-core";
+import { Content, Divider, Flex, Form, FormGroup, Radio } from "@patternfly/react-core";
import { useNavigate } from "react-router-dom";
import { ListSearch, Page } from "~/components/core";
import { timezoneTime } from "~/utils";
@@ -93,12 +93,12 @@ export default function TimezoneSelection() {
{parts.join("-")}{" "}
- {country}
+ {country}
}
description={
- {timezoneTime(id, date) || ""}
+ {timezoneTime(id, date) || ""}
{details}
diff --git a/web/src/components/layout/Center.tsx b/web/src/components/layout/Center.tsx
deleted file mode 100644
index 48c4a53512..0000000000
--- a/web/src/components/layout/Center.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright (c) [2022-2024] SUSE LLC
- *
- * All Rights Reserved.
- *
- * This program is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation; either version 2 of the License, or (at your option)
- * any later version.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, contact SUSE LLC.
- *
- * To contact SUSE LLC about this file by physical or electronic mail, you may
- * find current contact information at www.suse.com.
- */
-
-import React from "react";
-
-/**
- * Wrapper component for centering vertically its children
- *
- * @note It could be replaced by the 'vertically-centered' CSS utility class once Firefox add support
- * by default for the :has selector, which allows having something like
- *
- * .parent:has(.vertically-centered) {
- * display: grid;
- * place-items: center;
- * block-size: 100%;
- * }
- *
- * .vertically-centered { inline-size: 100%; }
- *
- * We can use \@support CSS at rule and use a workaround when :has not available, but somehow
- * prefer waiting until Firefox gets support.
- *
- * To know more, read
- * - https://www.w3.org/TR/selectors-4/#relational
- * - https://ishadeed.com/article/css-has-parent-selector/
- */
-const Center = ({ children }: React.PropsWithChildren) => (
-
-
{children}
-
-);
-
-export default Center;
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index e14500b450..1b65057d0f 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -23,11 +23,10 @@
import React, { useState } from "react";
import {
Masthead,
- MastheadProps,
MastheadContent,
MastheadToggle,
MastheadMain,
- MastheadBrand,
+ MastheadLogo,
PageToggleButton,
Toolbar,
ToolbarContent,
@@ -39,6 +38,7 @@ import {
DropdownList,
DropdownItem,
Divider,
+ Content,
} from "@patternfly/react-core";
import { Icon } from "~/components/layout";
import { useProduct } from "~/queries/software";
@@ -57,8 +57,6 @@ export type HeaderProps = {
showProductName?: boolean;
/** Whether the installer options link should be mounted */
showInstallerOptions?: boolean;
- /** The background color for the top bar */
- background?: MastheadProps["backgroundColor"];
/** Callback to be triggered for toggling the IssuesDrawer visibility */
toggleIssuesDrawer?: () => void;
};
@@ -124,7 +122,6 @@ const OptionsDropdown = ({ showInstallerOptions }) => {
export default function Header({
showSidebarToggle = true,
showProductName = true,
- background = "dark",
toggleIssuesDrawer,
}: HeaderProps): React.ReactNode {
const location = useLocation();
@@ -141,24 +138,30 @@ export default function Header({
!["/login", "/products/progress"].includes(location.pathname);
return (
-
- {showSidebarToggle && (
-
-
-
-
-
- )}
- {title && {title}}
+
+
+ {showSidebarToggle && (
+
+
+
+
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+
-
-
+
+
diff --git a/web/src/components/layout/Layout.tsx b/web/src/components/layout/Layout.tsx
index b80f62a316..9f1aa3a4f8 100644
--- a/web/src/components/layout/Layout.tsx
+++ b/web/src/components/layout/Layout.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2024] SUSE LLC
+ * Copyright (c) [2024-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -22,7 +22,7 @@
import React, { Suspense, useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
-import { Page, PageProps } from "@patternfly/react-core";
+import { Masthead, Page, PageProps } from "@patternfly/react-core";
import { Questions } from "~/components/questions";
import Header, { HeaderProps } from "~/components/layout/Header";
import { Loading, Sidebar } from "~/components/layout";
@@ -58,7 +58,7 @@ const Layout = ({
if (mountSidebar) pageProps.sidebar = ;
if (mountHeader) {
- pageProps.header = (
+ pageProps.masthead = (
;
pageProps.isNotificationDrawerExpanded = issuesDrawerVisible;
+ } else {
+ // FIXME: render an empty Masthead instead of nothing, in order to have
+ // everything working as designed by PatternfFly (there are some CSS rules
+ // that expect the masthead to be there :shrug:)
+ pageProps.masthead = ;
}
return (
<>
-
+ }>{children || }
{location.pathname !== ROOT.login && }
@@ -88,7 +93,6 @@ const fullProps: LayoutProps = {
headerOptions: {
showProductName: true,
showInstallerOptions: true,
- background: "dark",
},
};
@@ -105,7 +109,6 @@ const plainProps: LayoutProps = {
headerOptions: {
showProductName: false,
showInstallerOptions: true,
- background: "light200",
},
};
diff --git a/web/src/components/layout/Loading.tsx b/web/src/components/layout/Loading.tsx
index 7147518404..1577b8f012 100644
--- a/web/src/components/layout/Loading.tsx
+++ b/web/src/components/layout/Loading.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2022-2025] SUSE LLC
*
* All Rights Reserved.
*
@@ -21,8 +21,8 @@
*/
import React from "react";
-import { EmptyState, EmptyStateIcon, EmptyStateHeader, Spinner } from "@patternfly/react-core";
-import { Center, PlainLayout } from "~/components/layout";
+import { Bullseye, EmptyState, Spinner } from "@patternfly/react-core";
+import { PlainLayout } from "~/components/layout";
import { LayoutProps } from "~/components/layout/Layout";
import { _ } from "~/i18n";
@@ -38,15 +38,9 @@ function Loading({
const Wrapper = useLayout ? Layout : React.Fragment;
return (
-