using patternfly components

packages/runtime-tools-components/src/common/components/KeycloakUnavailablePage/KeycloakUnavailablePage.tsx

@@ -16,45 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Card, CardBody, CardHeader, CardHeaderMain, CardTitle } from "@patternfly/react-core/dist/js/components/Card";
 import { Button } from "@patternfly/react-core/dist/js/components/Button";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
 import React from "react";
-import kogitoLogo from "../../static/favicon.svg";
+import kieLogo from "../../static/kie.svg";
 import { OUIAProps, componentOuiaProps } from "../../ouiaTools";
 import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { EmptyState } from "@patternfly/react-core/dist/js/components/EmptyState";
 
 export const KeycloakUnavailablePage: React.FC<OUIAProps> = ({ ouiaId, ouiaSafe }) => {
   return (
-    <div
-      style={{
-        background: "#d2d2d2",
-        height: "100%",
-        textAlign: "center",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        color: "#6a6e73",
-        alignItems: "center",
-      }}
-      {...componentOuiaProps(ouiaId, "server-unavailable", ouiaSafe)}
-    >
-      <Brand src={kogitoLogo} alt="Kogito keycloak" heights={{ default: "100px" }} />
-      <TextContent>
-        <Text component={TextVariants.h1}>Error: 503 - Server unavailable</Text>
-      </TextContent>
-      <Title headingLevel="h6" style={{ marginTop: "10px" }}>
-        Sorry.. the keycloak server seems to be down.
-      </Title>
-      <Title headingLevel="h6">
-        Please contact administrator or{" "}
-        <Button variant="link" onClick={() => window.location.reload()} isInline>
-          {" "}
-          click here to retry
-        </Button>
-      </Title>
-    </div>
+    <Page>
+      <PageSection>
+        <Bullseye>
+          <EmptyState {...componentOuiaProps(ouiaId, "server-unavailable", ouiaSafe)}>
+            <Brand src={kieLogo} alt="KIE keycloak" heights={{ default: "100px" }} />
+            <TextContent>
+              <Text component={TextVariants.h1}>Error: 503 - Server unavailable</Text>
+            </TextContent>
+            <Title headingLevel="h6" style={{ marginTop: "10px" }}>
+              Sorry.. the keycloak server seems to be down.
+            </Title>
+            <Title headingLevel="h6">
+              Please contact administrator or{" "}
+              <Button variant="link" onClick={() => window.location.reload()} isInline>
+                {" "}
+                click here to retry
+              </Button>
+            </Title>
+          </EmptyState>
+        </Bullseye>
+      </PageSection>
+    </Page>
   );
 };