Optimize ThemeToggle in LoginFrame

components/layout/PageContainer.tsx

@@ -1,7 +1,7 @@
 import { JSX } from "preact";
 
 interface PageContainerProps {
-  children: JSX.Element | JSX.Element[] | string;
+  children: JSX.Element | JSX.Element[] | string[] | string;
   centered?: boolean;
   className?: string;
 }

islands/LoginFrame.tsx

@@ -97,73 +97,80 @@ export default function LoginFrame(props: LoginFrameProps) {
   };
 
   return (
-    <div className="w-[375px] mt-4 box-border p-4 text-gray-800 dark:text-gray-100 flex flex-col relative">
+    <div className="flex items-center justify-center flex-col w-full h-full relative">
       <div className="absolute top-0 right-0">
         <ThemeToggle />
       </div>
-      <Input
-        label="Email"
-        error={emailError}
-        type="text"
-        placeholder="Your email"
-        value={email}
-        onInput={(e) => {
-          setEmailError(false);
-          setEmail((e.target as HTMLInputElement).value);
-        }}
-      />
-      <Input
-        label="Password"
-        error={passwordError}
-        type="password"
-        placeholder="Your password"
-        value={password}
-        onInput={(e) => {
-          setPasswordError(false);
-          setPassword((e.target as HTMLInputElement).value);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onSubmit();
-          }
-        }}
-      />
-      {props.mode === "register"
-        ? (
-          <Input
-            label="Confirm Password"
-            error={confirmPasswordError}
-            type="password"
-            placeholder="Confirm your password"
-            value={confirmPassword}
-            onInput={(e) => {
-              setConfirmPasswordError(false);
-              setConfirmPassword((e.target as HTMLInputElement).value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                onSubmit();
-              }
-            }}
-          />
-        )
-        : null}
-      <Button
-        variant="primary"
-        className="h-[38px] mt-2 mb-2"
-        type="button"
-        onClick={onSubmit}
-      >
-        {props.mode === "register" ? "Register" : "Sign in"}
-      </Button>
-      <Button
-        type="button"
-        onClick={() => {
-          location.href = props.mode === "register" ? "/login" : "/register";
-        }}
-      >
-        {props.mode === "register" ? "Go Login" : "Go Register"}
-      </Button>
+      <h2>
+        {props.mode === "register"
+          ? "Register to Postdown"
+          : "Sign in to Postdown"}
+      </h2>
+      <div className="w-[375px] mt-4 box-border p-4 text-gray-800 dark:text-gray-100 flex flex-col">
+        <Input
+          label="Email"
+          error={emailError}
+          type="text"
+          placeholder="Your email"
+          value={email}
+          onInput={(e) => {
+            setEmailError(false);
+            setEmail((e.target as HTMLInputElement).value);
+          }}
+        />
+        <Input
+          label="Password"
+          error={passwordError}
+          type="password"
+          placeholder="Your password"
+          value={password}
+          onInput={(e) => {
+            setPasswordError(false);
+            setPassword((e.target as HTMLInputElement).value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              onSubmit();
+            }
+          }}
+        />
+        {props.mode === "register"
+          ? (
+            <Input
+              label="Confirm Password"
+              error={confirmPasswordError}
+              type="password"
+              placeholder="Confirm your password"
+              value={confirmPassword}
+              onInput={(e) => {
+                setConfirmPasswordError(false);
+                setConfirmPassword((e.target as HTMLInputElement).value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onSubmit();
+                }
+              }}
+            />
+          )
+          : null}
+        <Button
+          variant="primary"
+          className="h-[38px] mt-2 mb-2"
+          type="button"
+          onClick={onSubmit}
+        >
+          {props.mode === "register" ? "Register" : "Sign in"}
+        </Button>
+        <Button
+          type="button"
+          onClick={() => {
+            location.href = props.mode === "register" ? "/login" : "/register";
+          }}
+        >
+          {props.mode === "register" ? "Go Login" : "Go Register"}
+        </Button>
+      </div>
     </div>
   );
 }

routes/login.tsx

@@ -9,8 +9,7 @@ export default define.page(() => {
       <Head>
         <title>Login</title>
       </Head>
-      <PageContainer centered>
-        <h2>Sign in to Postdown</h2>
+      <PageContainer>
         <LoginFrame mode="login" />
       </PageContainer>
     </>

routes/register.tsx

@@ -9,8 +9,7 @@ export default define.page(() => {
       <Head>
         <title>Register</title>
       </Head>
-      <PageContainer centered>
-        <h2>Register to Postdown</h2>
+      <PageContainer>
         <LoginFrame mode="register" />
       </PageContainer>
     </>