kie-issues#2568: [sonataflow-management-console-webapp] Restyle 503 Keycloak page

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

@@ -16,52 +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/kogito.png";
+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={{
-        display: "flex",
-        justifyContent: "center",
-        paddingTop: "5%",
-        background: "#868686",
-        height: "100%",
-      }}
-      {...componentOuiaProps(ouiaId, "server-unavailable", ouiaSafe)}
-    >
-      {" "}
-      <Card
-        style={{
-          maxHeight: "300px",
-        }}
-      >
-        <CardHeader>
-          <CardHeaderMain>
-            <Brand src={kogitoLogo} alt="Kogito keycloak" style={{ height: "30px" }} />
-          </CardHeaderMain>
-        </CardHeader>
-        <CardBody isFilled={false}></CardBody>
-        <CardTitle>Error:503 - Server unavailable</CardTitle>
-        <CardBody isFilled={false}></CardBody>
-        <CardBody>Sorry.. the keycloak server seems to be down</CardBody>
-        <CardBody isFilled={false}></CardBody>
+    <Page>
+      <PageSection>
         <Bullseye>
-          <span>
-            Please contact administrator or{" "}
-            <Button variant="link" onClick={() => window.location.reload()} isInline>
-              click here to retry
-            </Button>
-          </span>
+          <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>
-        <CardBody isFilled={false}></CardBody>
-      </Card>
-    </div>
+      </PageSection>
+    </Page>
   );
 };