Add dedicated home page

RedstoneWizard08 · Mar 21, 2023 · 6e03bbb · 6e03bbb
1 parent 150ab99
commit 6e03bbb
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 90 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -17,6 +17,15 @@ export const App = () => {
                         }
                     />
 
+                    <AsyncRoute
+                        path="/spacewarp"
+                        getComponent={() =>
+                            import("./routes/SpaceWarp").then(
+                                (m) => m.SpaceWarp
+                            )
+                        }
+                    />
+
                     <AsyncRoute
                         path="/instances"
                         getComponent={() =>

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
@@ -17,18 +17,20 @@ export const Header = () => {
         setMods(/\/mods?(\/\d+)?/i.test(router.path!));
 
         setManage(router.path == "/manage");
-        setSpacewarp(router.path == "/" || router.path == "/install");
+        setSpacewarp(router.path == "/spacewarp" || router.path == "/install");
     }, [router.path]);
 
     return (
         <div className="header">
-            <img
-                className="logo"
-                src={logo}
-                alt="insert space warp logo here"
-            />
+            <Link className="logo-link" href="/">
+                <img
+                    className="logo"
+                    src={logo}
+                    alt="insert space warp logo here"
+                />
+            </Link>
 
-            <Link className={`link ${spacewarp ? "active" : ""}`} href="/">
+            <Link className={`link ${spacewarp ? "active" : ""}`} href="/spacewarp">
                 <i className="icon fa-solid fa-rocket" />
                 SpaceWarp
             </Link>

diff --git a/app/src/routes/Home.scss b/app/src/routes/Home.scss
@@ -5,78 +5,11 @@
     padding: 0;
 
     user-select: none;
-
     background-color: #1f2120;
 
-    .container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 55vh;
-    }
-
-    .logo {
-        width: 65%;
-        border-radius: 8px;
-        user-select: none;
-    }
-
     .title {
         width: 100%;
         user-select: none;
         text-align: center;
     }
-
-    .actions {
-        width: 80%;
-        padding: 2% 10%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-evenly;
-    }
-
-    .action {
-        border: 2px solid #3c3c3e;
-        border-radius: 4px;
-        background-color: transparent;
-        user-select: none;
-        color: #dddfdc;
-        font-family: "manteka", serif;
-
-        width: 30%;
-        padding: 1.5% 0;
-
-        margin-top: 2%;
-        margin-left: 35%;
-
-        cursor: pointer;
-        outline: none;
-        transition: color 0.5s ease, background-color 0.5s ease;
-
-        &:hover {
-            background-color: #3c3c3e;
-        }
-
-        &#uninstall {
-            background-color: #c04040;
-            color: #dddfdc;
-
-            &:hover {
-                background-color: #803030;
-            }
-        }
-
-        &#launch {
-            background-color: #409040;
-            color: #dddfdc;
-
-            width: 15%;
-            margin-left: 42.5%;
-
-            &:hover {
-                background-color: #107010;
-            }
-        }
-    }
 }
diff --git a/app/src/routes/Home.tsx b/app/src/routes/Home.tsx
@@ -1,25 +1,9 @@
 import "./Home.scss";
-import banner from "../assets/background_banner.png";
-import { route } from "preact-router";
 
 export const Home = () => {
-    const doInstall = () => {
-        route("/install", true);
-    };
-
     return (
         <div className="home-container">
-            <div class="container">
-                <img src={banner} alt="Space Warp Logo" className="logo" />
-            </div>
-
-            <br />
-
             <h1 className="title">Welcome to Wormhole</h1>
-
-            <button type="button" className="action" onClick={doInstall}>
-                Install SpaceWarp
-            </button>
         </div>
     );
 };
diff --git a/app/src/routes/SpaceWarp.scss b/app/src/routes/SpaceWarp.scss
@@ -0,0 +1,82 @@
+.spacewarp-container {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    user-select: none;
+
+    background-color: #1f2120;
+
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 55vh;
+    }
+
+    .logo {
+        width: 65%;
+        border-radius: 8px;
+        user-select: none;
+    }
+
+    .title {
+        width: 100%;
+        user-select: none;
+        text-align: center;
+    }
+
+    .actions {
+        width: 80%;
+        padding: 2% 10%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+
+    .action {
+        border: 2px solid #3c3c3e;
+        border-radius: 4px;
+        background-color: transparent;
+        user-select: none;
+        color: #dddfdc;
+        font-family: "manteka", serif;
+
+        width: 30%;
+        padding: 1.5% 0;
+
+        margin-top: 2%;
+        margin-left: 35%;
+
+        cursor: pointer;
+        outline: none;
+        transition: color 0.5s ease, background-color 0.5s ease;
+
+        &:hover {
+            background-color: #3c3c3e;
+        }
+
+        &#uninstall {
+            background-color: #c04040;
+            color: #dddfdc;
+
+            &:hover {
+                background-color: #803030;
+            }
+        }
+
+        &#launch {
+            background-color: #409040;
+            color: #dddfdc;
+
+            width: 15%;
+            margin-left: 42.5%;
+
+            &:hover {
+                background-color: #107010;
+            }
+        }
+    }
+}
diff --git a/app/src/routes/SpaceWarp.tsx b/app/src/routes/SpaceWarp.tsx
@@ -0,0 +1,21 @@
+import "./SpaceWarp.scss";
+import banner from "../assets/background_banner.png";
+import { route } from "preact-router";
+
+export const SpaceWarp = () => {
+    const doInstall = () => {
+        route("/install", true);
+    };
+
+    return (
+        <div className="spacewarp-container">
+            <div class="container">
+                <img src={banner} alt="Space Warp Logo" className="logo" />
+            </div>
+
+            <button type="button" className="action" onClick={doInstall}>
+                Install SpaceWarp
+            </button>
+        </div>
+    );
+};