center UI

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>
     </>
   );