From 7738e061fcf436f206a8a122e7b2666fce980e42 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Thu, 16 Feb 2023 23:55:05 +0800
Subject: [PATCH] center UI

---
 components/Timetable.tsx     | 50 +++++++++++++++---------------
 components/UserInputWrap.tsx | 59 ++++++++++++++++++++++++------------
 2 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/components/Timetable.tsx b/components/Timetable.tsx
index 7e29554..aae2058 100644
--- a/components/Timetable.tsx
+++ b/components/Timetable.tsx
@@ -229,40 +229,42 @@ const Timetable = ({
     main();
   }, []);
 
+  const DownloadMarks = async () => {
+    console.log("download marks", marks);
+    const data = {
+      user,
+      selections: {},
+    };
+    for (const row of marks) {
+      for (const input of row) {
+        if (input === null) continue;
+        if (input.checked) {
+          data.selections[input.name] = 1;
+        } else if (parseFloat(input.value)) {
+          data.selections[input.name] = parseFloat(input.value);
+        }
+      }
+    }
+    console.log(data);
+    downloadObjectAsJson(data, user);
+  };
+
   return (
     <>
-      <button
-        onClick={async () => {
-          console.log("download marks", marks);
-          const data = {
-            user,
-            selections: {},
-          };
-          for (const row of marks) {
-            for (const input of row) {
-              if (input === null) continue;
-              if (input.checked) {
-                data.selections[input.name] = 1;
-              } else if (parseFloat(input.value)) {
-                data.selections[input.name] = parseFloat(input.value);
-              }
-            }
-          }
-          console.log(data);
-          downloadObjectAsJson(data, user);
-        }}
-      >
-        DownloadSelection
-      </button>
-      <span>Login as {user}</span>
+      <h2 style={{textAlign: 'center'}}>Login as {user}</h2>
       <div
         ref={ref}
         contentEditable={editable}
         style={{
           overflow: "scroll",
+          display: 'flex',
+          justifyContent: 'center',
         }}
         onInput={handleInput}
       ></div>{" "}
+      <p style={{ display: "flex", justifyContent: "center" }}>
+        <button onClick={DownloadMarks}>Download Selection</button>
+      </p>
       <div style={{ display: "none" }} id="download-dom"></div>
     </>
   );
diff --git a/components/UserInputWrap.tsx b/components/UserInputWrap.tsx
index 068c974..42c82e4 100644
--- a/components/UserInputWrap.tsx
+++ b/components/UserInputWrap.tsx
@@ -1,3 +1,4 @@
+import { NodeNextRequest } from "next/dist/server/base-http/node";
 import React from "react";
 
 const UserInputWrap = ({ children, setUser }) => {
@@ -11,25 +12,45 @@ const UserInputWrap = ({ children, setUser }) => {
   return (
     <>
       {!begin && (
-        <div>
-          <input
-            placeholder="在这输你的名字"
-            value={inputUser}
-            onChange={(event) => setInputUser(event.target.value)}
-          />
-          <button
-            onClick={() => {
-              if (inputUser.trim() === "") {
-                alert("姓名不能为空");
-                return;
-              }
-              setUser(inputUser.trim());
-              setBegin(true);
-              localStorage.setItem("user", inputUser.trim());
-            }}
-          >
-            Login
-          </button>
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            alignItems: "center",
+            minHeight: "100vh",
+          }}
+        >
+          <div>
+            <input
+              style={{
+                margin: "0.5em",
+                padding: "0.5em",
+                borderRadius: "0.39em",
+              }}
+              placeholder="你的名字..."
+              value={inputUser}
+              onChange={(event) => setInputUser(event.target.value)}
+              size={10}
+            />
+            <button
+              style={{
+                margin: "0.5em",
+                padding: "0.5em",
+                backgroundColor: "#39ceff",
+              }}
+              onClick={() => {
+                if (inputUser.trim() === "") {
+                  alert("姓名不能为空");
+                  return;
+                }
+                setUser(inputUser.trim());
+                setBegin(true);
+                localStorage.setItem("user", inputUser.trim());
+              }}
+            >
+              Login
+            </button>
+          </div>
         </div>
       )}
       {begin && children}