Make login and signup pages a bit nicer

3 files changed, 7 insertions, 10 deletions

diff --git a/src/App.css b/src/App.css
index 3b3879c..b6a7024 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,10 @@
 .App {
   text-align: center;
-  margin: 32px;
 }
 
 .App > header {
   margin: 0px 64px;
+  padding: 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 9ae8d84..bfad280 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -11,17 +11,15 @@ import { Link } from "react-router-dom";
 
 const Flex = styled("div", {
   display: "flex",
-  alignItems: "center",
+  alignItems: "flex-start",
   justifyContent: "center",
-  minHeight: "100vh",
-  // If ever we decide to move the title out of the login card itself
-  flexDirection: "column",
 });
 
 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",
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 8cd02d8..ae82fc7 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -8,19 +8,18 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { useFeatures } from "../hooks/useFeatures.js";
 import { Link } from "react-router-dom";
 
+
 const Flex = styled("div", {
   display: "flex",
-  alignItems: "center",
+  alignItems: "flex-start",
   justifyContent: "center",
-  minHeight: "100vh",
-  // If ever we decide to move the title out of the login card itself
-  flexDirection: "column",
 });
 
 const LoginCard = styled("div", {
   boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-  borderRadius: "4px",
+  borderRadius: "12px",
   padding: "1em",
+  marginTop: "20vh",
   border: "1px solid #D4D4D8",
   backgroundColor: "#F4F4F5",
   width: "360px",