Updated 404 page with new UI (#4419)

openmetadata-ui/src/main/resources/ui/src/assets/svg/404-number.svg

@@ -0,0 +1,3 @@
+<svg width="107" height="567" viewBox="0 0 107 567" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.629262 107.989H63.4631V131H89.9261V107.989H106.162V85.8082H89.9261V0.0909052H55.2812L0.629262 86.1918V107.989ZM63.9744 85.8082H28.4986V84.7855L62.9517 30.2614H63.9744V85.8082ZM53.9389 351.876C86.858 351.876 106.737 326.82 106.801 283.673C106.865 240.847 86.7301 216.301 53.9389 216.301C21.0838 216.301 1.14062 240.783 1.0767 283.673C0.948864 326.692 20.956 351.812 53.9389 351.876ZM53.9389 328.929C38.9176 328.929 29.2017 313.844 29.2656 283.673C29.3295 253.95 38.9815 238.993 53.9389 238.993C68.8324 238.993 78.5483 253.95 78.5483 283.673C78.6122 313.844 68.8963 328.929 53.9389 328.929ZM0.629262 543.989H63.4631V567H89.9261V543.989H106.162V521.808H89.9261V436.091H55.2812L0.629262 522.192V543.989ZM63.9744 521.808H28.4986V520.786L62.9517 466.261H63.9744V521.808Z" fill="#6B6B6B" fill-opacity="0.06"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/pages/page-not-found/index.tsx

@@ -13,33 +13,47 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import notFoundImage from '../../assets/img/404-image.png';
+import notFoundNumber from '../../assets/svg/404-number.svg';
 import { Button } from '../../components/buttons/Button/Button';
-import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
-import PageContainer from '../../components/containers/PageContainer';
+import { ROUTES } from '../../constants/constants';
 
 const PageNotFound = () => {
   return (
-    <PageContainer>
-      <div
-        className="tw-flex tw-flex-col tw-place-items-center tw-mt-24"
-        data-testid="no-page-found">
-        <ErrorPlaceHolder />
-        <div
-          className="tw-flex tw-mt-3 tw-justify-around"
-          data-testid="route-links">
-          <Link className="tw-mr-2" to="/">
-            <Button size="regular" theme="primary" variant="contained">
-              Go to Home
-            </Button>
-          </Link>
-          <Link className="tw-mr-2" to="/explore">
-            <Button size="regular" theme="primary" variant="contained">
-              Explore
-            </Button>
-          </Link>
+    <div
+      className="page-not-found-container tw-relative"
+      data-testid="no-page-found">
+      <div className="tw-flex-center tw-hw-full tw-absolute tw-inset-0">
+        <img alt="not found" src={notFoundNumber} />
+      </div>
+      <div className="tw-flex tw-hw-full tw-absolute tw-inset-0">
+        <div className="tw-hw-full tw-flex-center">
+          <div className="tw-text-center">
+            <h4 className="tw-font-bold tw-text-3xl tw-text-grey-muted">
+              Page Not Found
+            </h4>
+            <p className="tw-text-lg tw-text-grey-muted-muted">
+              The page you are looking for is not available
+            </p>
+            <div className="tw-text-center tw-mt-16" data-testid="route-links">
+              <Link to={ROUTES.HOME}>
+                <Button className="tw-mr-5" theme="primary">
+                  Go To Homepage
+                </Button>
+              </Link>
+              <Link to={ROUTES.EXPLORE}>
+                <Button className="tw-opacity-40" theme="primary">
+                  Explore
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="tw-hw-full tw-flex-center">
+          <img alt="not found" src={notFoundImage} />
         </div>
       </div>
-    </PageContainer>
+    </div>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css

@@ -38,6 +38,16 @@
     @apply tw-text-body tw-text-grey-body tw-font-normal;
   }
 
+  /* utils */
+
+  .tw-flex-center {
+    @apply tw-flex tw-justify-center tw-items-center;
+  }
+
+  .tw-hw-full {
+    @apply tw-w-full tw-h-full;
+  }
+
   .tw-table {
     @apply tw-w-full;
   }

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -910,3 +910,24 @@ code {
 .public-DraftStyleDefault-block {
   margin: 0;
 }
+
+/* page not found css */
+
+.page-not-found-container {
+  width: 100%;
+  height: calc(100% - 68px);
+  display: flex;
+}
+
+.page-not-found-container::after,
+.page-not-found-container::before {
+  content: '';
+  width: 100%;
+}
+
+.page-not-found-container::after {
+  background-color: #f8f9fa;
+}
+.page-not-found-container::before {
+  background-color: #fff;
+}