center UI

components/Timetable.tsx

@@ -229,10 +229,7 @@ const Timetable = ({
     main();
   }, []);
 
-  return (
-    <>
-      <button
-        onClick={async () => {
+  const DownloadMarks = async () => {
     console.log("download marks", marks);
     const data = {
       user,
@@ -250,19 +247,24 @@ const Timetable = ({
     }
     console.log(data);
     downloadObjectAsJson(data, user);
-        }}
-      >
-        DownloadSelection
-      </button>
-      <span>Login as {user}</span>
+  };
+
+  return (
+    <>
+      <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>
     </>
   );

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,13 +12,32 @@ const UserInputWrap = ({ children, setUser }) => {
   return (
     <>
       {!begin && (
+        <div
+          style={{
+            display: "grid",
+            placeItems: "center",
+            alignItems: "center",
+            minHeight: "100vh",
+          }}
+        >
           <div>
             <input
-            placeholder="在这输你的名字"
+              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("姓名不能为空");
@@ -31,6 +51,7 @@ const UserInputWrap = ({ children, setUser }) => {
               Login
             </button>
           </div>
+        </div>
       )}
       {begin && children}
     </>