From f648f9c0b9a59bf82bf7c5edb54d16507873ebc8 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@rapidrtc.com>
Date: Sat, 4 Sep 2021 14:16:17 -0500
Subject: [PATCH] Moved Header and Content to HomePage

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
---
 packages/app/src/App.tsx                      |   4 +-
 packages/app/src/components/home/HomePage.tsx | 104 ++++++++++--------
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 81dbdf4cac..244bc7aa2a 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -114,9 +114,7 @@ const routes = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
     {/* TODO(rubenl): Move this to / once its more mature and components exist */}
-    <Route path="/home" element={<HomepageCompositionRoot />}>
-      <HomePage />
-    </Route>
+    <Route path="/home" element={<HomePage />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"
diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx
index 5831b49d2c..f5f0162f52 100644
--- a/packages/app/src/components/home/HomePage.tsx
+++ b/packages/app/src/components/home/HomePage.tsx
@@ -22,52 +22,64 @@ import {
   ComponentTabs,
   ComponentTab,
 } from '@backstage/plugin-home';
-import { HomePageSearchBar } from '@backstage/plugin-search';
+import {
+  Content,
+  Header,
+  Page,
+  HomepageTimer,
+} from '@backstage/core-components';
 
 export const HomePage = () => (
-  <Grid container spacing={3}>
-    <Grid item xs={12}>
-      <HomePageSearchBar />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <HomePageRandomJoke />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <HomePageRandomJoke defaultCategory="any" Renderer={ComponentAccordion} />
-      <HomePageRandomJoke
-        title="Another Random Joke"
-        Renderer={ComponentAccordion}
-      />
-      <HomePageRandomJoke
-        title="One More Random Joke"
-        defaultCategory="programming"
-        Renderer={ComponentAccordion}
-      />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <ComponentTabs
-        title="Random Jokes"
-        tabs={[
-          {
-            label: 'Programming',
-            Component: () => (
-              <HomePageRandomJoke
-                defaultCategory="programming"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-          {
-            label: 'Any',
-            Component: () => (
-              <HomePageRandomJoke
-                defaultCategory="any"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-        ]}
-      />
-    </Grid>
-  </Grid>
+  <Page themeId="home">
+    <Header title="Home">
+      <HomepageTimer />
+    </Header>
+    <Content>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={4}>
+          <HomePageRandomJoke />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <HomePageRandomJoke
+            defaultCategory="any"
+            Renderer={ComponentAccordion}
+          />
+          <HomePageRandomJoke
+            title="Another Random Joke"
+            Renderer={ComponentAccordion}
+          />
+          <HomePageRandomJoke
+            title="One More Random Joke"
+            defaultCategory="programming"
+            Renderer={ComponentAccordion}
+          />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <ComponentTabs
+            title="Random Jokes"
+            tabs={[
+              {
+                label: 'Programming',
+                Component: () => (
+                  <HomePageRandomJoke
+                    defaultCategory="programming"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+              {
+                label: 'Any',
+                Component: () => (
+                  <HomePageRandomJoke
+                    defaultCategory="any"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+            ]}
+          />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
 );