Add better zones list ui

5 files changed, 62 insertions, 47 deletions

diff --git a/package.json b/package.json
index 3ccebe8..3faaa2d 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "eject": "react-scripts eject",
     "deploy": "rsync -avz build/ root@hostsdottxt.net:/var/www/html/"
   },
-  "proxy": "http://localhost:8080",
+  "proxy": "http://hostsdottxt.net",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 98c887d..59b1298 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -1,22 +1,16 @@
-import { useContext, useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import React from "react";
 import {
-  Routes,
-  Route,
-  Link,
   useNavigate,
   useLocation,
-  Navigate,
-  Outlet,
 } from "react-router-dom";
 import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js";
-import { useAuth } from "../hooks/useAuth";
-import { useFeatures } from "../hooks/useFeatures";
-import { isExpired } from "react-jwt";
-import { styled } from "@stitches/react";
-import { debounce } from "lodash";
-import { keyframes } from "@stitches/react";
+import {useAuth} from "../hooks/useAuth";
+import {useFeatures} from "../hooks/useFeatures";
+import {isExpired} from "react-jwt";
+import {styled} from "@stitches/react";
+import {debounce} from "lodash";
 
 const Flex = styled("div", {
   display: "flex",
@@ -24,7 +18,7 @@ const Flex = styled("div", {
   justifyContent: "center",
   minHeight: "100vh",
   // If ever we decide to move the title out of the login card itself
-  flexDirection: "column"
+  flexDirection: "column",
 });
 
 const LoginCard = styled("div", {
@@ -33,15 +27,14 @@ const LoginCard = styled("div", {
   padding: "1em",
   border: "1px solid #D4D4D8",
   backgroundColor: "#F4F4F5",
-  width: "360px"
+  width: "360px",
 });
 
 const Title = styled("h1", {
   textAlign: "center",
   fontSize: "3em",
-  fontWeight: "500",
+  fontWeight: "300",
   margin: "1rem 0",
-  fontWeight: 300,
 });
 
 const Subtitle = styled("h1", {
@@ -74,7 +67,7 @@ function Login(props) {
 
   useEffect(() => {
     if (auth.token && !isExpired(auth.token)) {
-      navigate(from, { replace: true });
+      navigate(from, {replace: true});
     }
   }, [auth.token, from, navigate]);
 
@@ -92,7 +85,7 @@ function Login(props) {
       if (res.status === 200) {
         res.json().then((data) => {
           auth.signin(data.token, () => {
-            navigate(from, { replace: true });
+            navigate(from, {replace: true});
           });
         });
       } else {
@@ -116,7 +109,7 @@ function Login(props) {
   }, 200);
 
   function onKeyPress(e) {
-    if (e.key == "Enter") {
+    if (e.key === "Enter") {
       e.preventDefault();
       handleSubmit();
     }
@@ -124,8 +117,8 @@ function Login(props) {
 
   return (
     <Flex>
+      <Title>HOSTSdotTXT</Title>
       <LoginCard>
-        <Title>HOSTSdotTXT</Title>
         <Subtitle>Log In</Subtitle>
         <StyledLabel htmlFor="email">Email</StyledLabel>
         <Input id="email" type="email" onChange={checkTotpRequired}></Input>
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index e73ee43..47e626b 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -12,6 +12,8 @@ const Flex = styled("div", {
   alignItems: "center",
   justifyContent: "center",
   minHeight: "100vh",
+  // If ever we decide to move the title out of the login card itself
+  flexDirection: "column",
 });
 
 const LoginCard = styled("div", {
@@ -20,14 +22,14 @@ const LoginCard = styled("div", {
   padding: "1em",
   border: "1px solid #D4D4D8",
   backgroundColor: "#F4F4F5",
+  width: "360px",
 });
 
 const Title = styled("h1", {
   textAlign: "center",
   fontSize: "3em",
-  fontWeight: "500",
   margin: "1rem 0",
-  fontWeight: 300,
+  fontWeight: "300",
 });
 
 const Subtitle = styled("h1", {
@@ -117,10 +119,10 @@ export function SignUp() {
   if (!features.signup) {
     return (
       <Flex>
+        <Title>HOSTSdotTXT</Title>
         <LoginCard>
-          <Title>HOSTSdotTXT</Title>
           <Subtitle>Sign Up</Subtitle>
-          <p>Sorry, but sign-ups are currently disabled.</p>
+          <center><p>Sorry, but sign-ups are currently disabled.</p></center>
         </LoginCard>
       </Flex>
     );
@@ -128,8 +130,8 @@ export function SignUp() {
 
   return (
     <Flex>
+      <Title>HOSTSdotTXT</Title>
       <LoginCard>
-        <Title>HOSTSdotTXT</Title>
         <Subtitle>Sign Up</Subtitle>
         <StyledLabel for="email">
           Email{" "}
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
index 35b494f..e751476 100644
--- a/src/routes/Zones.js
+++ b/src/routes/Zones.js
@@ -1,18 +1,34 @@
-import { styled } from "@stitches/react";
-import { useEffect } from "react";
-import { RequireAuth, useAuth } from "../hooks/useAuth";
+import {styled} from "@stitches/react";
+import {RequireAuth, useAuth} from "../hooks/useAuth";
 import useFetch from "../hooks/useFetch";
 
+const Container = styled("main", {
+  maxWidth: "800px",
+  margin: "auto",
+  padding: "12px",
+});
+
 const Card = styled("div", {
   padding: "16px 48px",
-  border: "1px solid black",
+  borderRadius: "8px",
   flexBasis: "100%",
+  border: "1px solid #D4D4D8",
+  backgroundColor: "#F4F4F5",
+  transition: "box-shadow 0.2s",
+  "&:hover": {
+    boxShadow: "0 4px 6px rgba(0,0,0,0.05)",
+  },
+});
+
+const LinkStyled = styled("a", {
+  textDecoration: "none",
+  color: "inherit",
 });
 
 export default function Zones() {
   const auth = useAuth();
 
-  const { data, loading, error } = useFetch("/api/v1/zones", {
+  let {data, loading, error} = useFetch("/api/v1/zones", {
     headers: {
       Authorization: auth.token,
     },
@@ -21,28 +37,32 @@ export default function Zones() {
   if (loading) {
     return (
       <RequireAuth>
-        <div style={{ padding: "0px 32px" }}>
-          <h1>Available Zones</h1>
-          <h2>Loading zones...</h2>
-        </div>
+        <Container>
+          <div style={{padding: "0px 32px"}}>
+            <h1>Available Zones</h1>
+            <h2>Loading zones...</h2>
+          </div>
+        </Container>
       </RequireAuth>
     );
   }
 
   return (
     <RequireAuth>
-      <div style={{ padding: "0px 32px" }}>
-        <h1>Available Zones</h1>
-        <div style={{ display: "flex" }}>
-          {data.map((zone) => {
-            return (
-              <a href={"/zones/" + zone.id}>
-                <Card>{zone.id}</Card>
-              </a>
-            );
-          })}
+      <Container>
+        <div style={{padding: "0px 32px"}}>
+          <h1>Available Zones</h1>
+          <div style={{display: "flex"}}>
+            {data.map((zone) => {
+              return (
+                <LinkStyled href={"/zones/" + zone.id}>
+                  <Card>{zone.id}</Card>
+                </LinkStyled>
+              );
+            })}
+          </div>
         </div>
-      </div>
+      </Container>
     </RequireAuth>
   );
 }
diff --git a/src/uikit/Button.js b/src/uikit/Button.js
index d14ca06..278f3a6 100644
--- a/src/uikit/Button.js
+++ b/src/uikit/Button.js
@@ -2,7 +2,7 @@ import { styled } from "@stitches/react";
 
 export const Button = styled("button", {
   display: "block",
-  // Making the button wider makes it look less cramped
+  // Making the button wider and not taller makes it look less cramped
   padding: "0.5rem 1rem",
   fontSize: "1rem",
   margin: "0.2rem",