Limit login container width

s-h-a-d-o-w · Nov 12, 2024 · d5a3b78 · d5a3b78
1 parent 226d283
commit d5a3b78
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 17 deletions.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -18,7 +18,7 @@ export default function GlobalError() {
 
   return (
     <Centered>
-      <div style={{ width: "75%", maxWidth: "400rem", textAlign: "center" }}>
+      <div style={{ width: "80%", maxWidth: "400rem", textAlign: "center" }}>
         If this was a commercial project, I&apos;d say something like: &quot;We
         have encountered an unexpected error. It has been reported automatically
         but if you keep experiencing this please reach out to support.&quot;

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,21 +1,11 @@
 import Link from "next/link";
 import { styled } from "../../../styled-system/jsx";
 import { AuthButton } from "./components/AuthButton";
+import { Centered } from "@/components/Centered";
 
 const StyledMain = styled("main", {
   base: {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-const StyledContainer = styled("div", {
-  base: {
+    width: "80%",
     maxWidth: "400rem",
     display: "flex",
     flexDirection: "column",
@@ -25,8 +15,8 @@ const StyledContainer = styled("div", {
 
 export default function Login() {
   return (
-    <StyledMain>
-      <StyledContainer>
+    <Centered>
+      <StyledMain>
         <h1>This is a private app.</h1>
         <p>
           If you aren&apos;t on the whitelist, you will not be able to sign in!
@@ -38,7 +28,7 @@ export default function Login() {
           .
         </p>
         <AuthButton />
-      </StyledContainer>
-    </StyledMain>
+      </StyledMain>
+    </Centered>
   );
 }