Add features, restyle base page

5 files changed, 59 insertions, 60 deletions

diff --git a/src/App.css b/src/App.css
index 74b5e05..475d50a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,11 @@
 .App {
   text-align: center;
+  margin: 32px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App > header {
+  margin: 0px 64px;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  justify-content: space-between;
 }
diff --git a/src/App.js b/src/App.js
index 68b29ca..44045ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,46 @@
 import "./App.css";
-import RecordTable from "./components/RecordTable";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./routes/Home";
+import Zones from "./routes/Zones";
+import Records from "./routes/Records";
+import SignUp from "./routes/SignUp.js";
+import Login from "./routes/Login";
+import Button from "./uikit/Button";
 
 function App() {
   return (
     <div className="App">
-      <RecordTable></RecordTable>
+      <header>
+        <h1>
+          HOSTS<b>dot</b>TXT
+        </h1>
+
+        <div style={{ display: "flex" }}>
+          <Button
+            className="LoginButton"
+            primary
+            onClick={() => (document.location = "/login")}
+          >
+            Login
+          </Button>
+          <Button
+            className="LoginButton"
+            secondary
+            onClick={() => (document.location = "/signup")}
+          >
+            Sign Up
+          </Button>
+        </div>
+      </header>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<SignUp />} />
+          <Route path="/zones" element={<Zones />} />
+          <Route path="/zones/:zoneName" element={<Records />} />
+          <Route path="/" exact element={<Home />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }
diff --git a/src/index.js b/src/index.js
index 77d8b7b..7b00620 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
-import SignUp from "./routes/SignUp.js";
-import Login from "./routes/Login";
+import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AuthProvider } from "./hooks/useAuth";
 import { FeaturesProvider } from "./hooks/useFeatures";
-import Records from "./routes/Records";
-import Zones from "./routes/Zones";
-import Home from "./routes/Home";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
@@ -17,15 +12,7 @@ root.render(
   <React.StrictMode>
     <AuthProvider>
       <FeaturesProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<SignUp />} />
-            <Route path="/zones" element={<Zones />} />
-            <Route path="/zones/:zoneName" element={<Records />} />
-            <Route path="/" exact element={<Home />} />
-          </Routes>
-        </BrowserRouter>
+        <App />
       </FeaturesProvider>
     </AuthProvider>
   </React.StrictMode>
diff --git a/src/routes/Home.js b/src/routes/Home.js
index 9cebcc4..b602c25 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -2,25 +2,24 @@ import Button from "../uikit/Button";
 import { useState, useEffect } from "react";
 
 export default function Home() {
-    let [metrics, setMetrics] = useState();
-    useEffect(() => {
-        fetch("/api/v1/metrics")
-        .then((resp) => resp.json())
-        .then((resp) => setMetrics(resp))
-    } , []);
+  let [metrics, setMetrics] = useState();
+  useEffect(() => {
+    fetch("/api/v1/metrics")
+      .then((resp) => resp.json())
+      .then((resp) => setMetrics(resp));
+  }, []);
 
   return (
     <div>
-      <h1>
-        HOSTS<b>dot</b>TXT
-      </h1>
       <Button primary onClick={() => (document.location = "/zones")}>
         Zones
       </Button>
       <div>
         {metrics != null && (
-            <p>Served {metrics.count} queries in the last 24 hours!
-            99% of those queries were served in under {(metrics.p99 / 1000).toPrecision(2)}ms</p>
+          <p>
+            Served {metrics.count} queries in the last 24 hours! 99% of those
+            queries were served in under {(metrics.p99 / 1000).toPrecision(2)}ms
+          </p>
         )}
       </div>
     </div>
diff --git a/src/routes/Login.js b/src/routes/Login.js
index afdd88b..9125f7d 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -139,7 +139,11 @@ function Login(props) {
           </Button>
         </AlignRight>
         <center>
-          {features.signup && (<p>Don't have an account? <Link to="/signup">Sign up!</Link></p>)}
+          {features.signup && (
+            <p>
+              Don't have an account? <Link to="/signup">Sign up!</Link>
+            </p>
+          )}
         </center>
       </LoginCard>
     </Flex>