DRY some login/signup components

3 files changed, 46 insertions, 82 deletions

diff --git a/src/App.js b/src/App.js
index db67184..c15378b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,38 +12,45 @@ import { useAuth } from "./hooks/useAuth";
 function ButtonRow() {
   let auth = useAuth();
 
-    return <div style={{ display: "flex" }}>
-      { auth.isAuthenticated() ? <><Button
-        className="LoginButton"
-        primary
-        onClick={() => (document.location = "/zones")}
-      >
-        Zones
-      </Button>
-      <Button
-        className="LoginButton"
-        secondary
-        onClick={() => auth.signout(() => {})}
-      >
-        Log Out
-      </Button>
-   </> : <>
-      <Button
-        className="LoginButton"
-        primary
-        onClick={() => (document.location = "/login")}
-      >
-        Login
-      </Button>
-      <Button
-        className="LoginButton"
-        secondary
-        onClick={() => (document.location = "/signup")}
-      >
-        Sign Up
-      </Button>
-      </>}
-    </div>;
+  return (
+    <div style={{ display: "flex" }}>
+      {auth.isAuthenticated() ? (
+        <>
+          <Button
+            className="LoginButton"
+            primary
+            onClick={() => (document.location = "/zones")}
+          >
+            Zones
+          </Button>
+          <Button
+            className="LoginButton"
+            secondary
+            onClick={() => auth.signout(() => {})}
+          >
+            Log Out
+          </Button>
+        </>
+      ) : (
+        <>
+          <Button
+            className="LoginButton"
+            primary
+            onClick={() => (document.location = "/login")}
+          >
+            Login
+          </Button>
+          <Button
+            className="LoginButton"
+            secondary
+            onClick={() => (document.location = "/signup")}
+          >
+            Sign Up
+          </Button>
+        </>
+      )}
+    </div>
+  );
 }
 function App() {
   return (
diff --git a/src/routes/Login.js b/src/routes/Login.js
index bfad280..378717e 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -5,51 +5,9 @@ import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js";
 import { useAuth } from "../hooks/useAuth";
 import { useFeatures } from "../hooks/useFeatures";
-import { styled } from "@stitches/react";
 import { debounce } from "lodash";
 import { Link } from "react-router-dom";
-
-const Flex = styled("div", {
-  display: "flex",
-  alignItems: "flex-start",
-  justifyContent: "center",
-});
-
-const LoginCard = styled("div", {
-  boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-  borderRadius: "12px",
-  padding: "1em",
-  marginTop: "20vh",
-  border: "1px solid #D4D4D8",
-  backgroundColor: "#F4F4F5",
-  width: "360px",
-});
-
-const Title = styled("h1", {
-  textAlign: "center",
-  fontSize: "3em",
-  fontWeight: "300",
-  margin: "1rem 0",
-});
-
-const Subtitle = styled("h1", {
-  textAlign: "center",
-  fontSize: "2.5em",
-  margin: "1rem 0",
-  fontWeight: 300,
-});
-
-const StyledLabel = styled("label", {
-  display: "block",
-  paddingBottom: "0.25em",
-  fontSize: "0.9em",
-});
-
-const AlignRight = styled("div", {
-  display: "flex",
-  alignItems: "right",
-  justifyContent: "right",
-});
+import { Flex, Subtitle, AlignRight, LoginCard, StyledLabel } from "./SignUp";
 
 function Login(props) {
   let auth = useAuth();
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index ae82fc7..4567523 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -8,14 +8,13 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { useFeatures } from "../hooks/useFeatures.js";
 import { Link } from "react-router-dom";
 
-
-const Flex = styled("div", {
+export const Flex = styled("div", {
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "center",
 });
 
-const LoginCard = styled("div", {
+export const LoginCard = styled("div", {
   boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
   borderRadius: "12px",
   padding: "1em",
@@ -25,27 +24,27 @@ const LoginCard = styled("div", {
   width: "360px",
 });
 
-const Title = styled("h1", {
+export const Title = styled("h1", {
   textAlign: "center",
   fontSize: "3em",
   margin: "1rem 0",
   fontWeight: "300",
 });
 
-const Subtitle = styled("h1", {
+export const Subtitle = styled("h1", {
   textAlign: "center",
   fontSize: "2.5em",
   margin: "1rem 0",
   fontWeight: 300,
 });
 
-const StyledLabel = styled("label", {
+export const StyledLabel = styled("label", {
   display: "block",
   paddingBottom: "0.25em",
   fontSize: "0.9em",
 });
 
-const AlignRight = styled("div", {
+export const AlignRight = styled("div", {
   display: "flex",
   alignItems: "right",
   justifyContent: "right",