From 2358c931c9669a4e78708e03dc055a46f080be42 Mon Sep 17 00:00:00 2001
From: Octo8080 <okutannderuta0529@gmail.com>
Date: Sat, 6 Jan 2024 01:54:19 +0900
Subject: [PATCH] Update Styling

---
 routesTemplate/create.tsx | 84 ++++++++++++++++++++-------------------
 routesTemplate/login.tsx  | 84 ++++++++++++++++++++-------------------
 src/routes/create.tsx     | 84 ++++++++++++++++++++-------------------
 src/routes/login.tsx      | 84 ++++++++++++++++++++-------------------
 src/utils/style.ts        | 17 ++++++--
 5 files changed, 186 insertions(+), 167 deletions(-)

diff --git a/routesTemplate/create.tsx b/routesTemplate/create.tsx
index ee1928d..dd8fbba 100644
--- a/routesTemplate/create.tsx
+++ b/routesTemplate/create.tsx
@@ -107,47 +107,49 @@ export function getCreateComponent(
   ) {
     return (
       <div style={styles.block}>
-        <div>
-          <h2>Custom Create Account</h2>
-        </div>
-        <div>
-          <form action={paths.createPath} method="post">
-            <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
-            <div style={styles.row}>
-              {data?.errors?.length > 0 && (
-                <ul>
-                  {data.errors.map((error) => <li>{error}</li>)}
-                </ul>
-              )}
-            </div>
-            <div style={styles.row}>
-              <label for={resourceIdentifierName} style={styles.label}>
-                {pascalCase(resourceIdentifierName)}
-              </label>
-              <input
-                type="text"
-                id={resourceIdentifierName}
-                name={resourceIdentifierName}
-                style={styles.textbox}
-                value={data?.identifier}
-              />
-            </div>
-            <div style={styles.row}>
-              <label for="password" style={styles.label}>Password</label>
-              <input
-                type="password"
-                id={PASSWORD}
-                name={PASSWORD}
-                style={styles.textbox}
-              />
-            </div>
-            <div style={styles.row}>
-              <button type="submit" style={styles.button}>CREATE</button>
-            </div>
-          </form>
-        </div>
-        <div>
-          <a href={paths.loginPath} style={styles.link}>LOGIN</a>
+        <div style={styles.container}>
+          <div style={styles.centering}>
+            <h2>Custom Create Account</h2>
+          </div>
+          <div>
+            <form action={paths.createPath} method="post">
+              <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
+              <div style={styles.row}>
+                {data?.errors?.length > 0 && (
+                  <ul>
+                    {data.errors.map((error) => <li>{error}</li>)}
+                  </ul>
+                )}
+              </div>
+              <div style={styles.row}>
+                <label for={resourceIdentifierName} style={styles.label}>
+                  {pascalCase(resourceIdentifierName)}
+                </label>
+                <input
+                  type="text"
+                  id={resourceIdentifierName}
+                  name={resourceIdentifierName}
+                  style={styles.textbox}
+                  value={data?.identifier}
+                />
+              </div>
+              <div style={styles.row}>
+                <label for="password" style={styles.label}>Password</label>
+                <input
+                  type="password"
+                  id={PASSWORD}
+                  name={PASSWORD}
+                  style={styles.textbox}
+                />
+              </div>
+              <div style={{...styles.row, ...styles.centering}}>
+                <button type="submit" style={styles.button}>Create</button>
+              </div>
+            </form>
+          </div>
+          <div style={styles.centering}>
+            <a href={paths.loginPath} style={styles.link}>Login</a>
+          </div>
         </div>
       </div>
     );
diff --git a/routesTemplate/login.tsx b/routesTemplate/login.tsx
index dc51e4d..6192cb9 100644
--- a/routesTemplate/login.tsx
+++ b/routesTemplate/login.tsx
@@ -93,47 +93,49 @@ export function getLoginComponent(
   ) {
     return (
       <div style={styles.block}>
-        <div>
-          <h2>Custom Login</h2>
-        </div>
-        <div>
-          <form action={paths.loginPath} method="post">
-            <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
-            <div style={styles.row}>
-              {data?.errors?.length > 0 && (
-                <ul>
-                  {data.errors.map((error) => <li>{error}</li>)}
-                </ul>
-              )}
-            </div>
-            <div style={styles.row}>
-              <label for={resourceIdentifierName} style={styles.label}>
-                {pascalCase(resourceIdentifierName)}
-              </label>
-              <input
-                type="text"
-                id={resourceIdentifierName}
-                name={resourceIdentifierName}
-                style={styles.textbox}
-                value={data?.identifier}
-              />
-            </div>
-            <div style={styles.row}>
-              <label for="password" style={styles.label}>Password</label>
-              <input
-                type="password"
-                id={PASSWORD}
-                name={PASSWORD}
-                style={styles.textbox}
-              />
-            </div>
-            <div style={styles.row}>
-              <button type="submit" style={styles.button}>Login</button>
-            </div>
-          </form>
-        </div>
-        <div>
-          <a href={paths.createPath} style={styles.link}>Create Account</a>
+        <div style={styles.container}>
+          <div style={styles.centering}>
+            <h2>Custom Login</h2>
+          </div>
+          <div>
+            <form action={paths.loginPath} method="post">
+              <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
+              <div style={styles.row}>
+                {data?.errors?.length > 0 && (
+                  <ul>
+                    {data.errors.map((error) => <li>{error}</li>)}
+                  </ul>
+                )}
+              </div>
+              <div style={styles.row}>
+                <label for={resourceIdentifierName} style={styles.label}>
+                  {pascalCase(resourceIdentifierName)}
+                </label>
+                <input
+                  type="text"
+                  id={resourceIdentifierName}
+                  name={resourceIdentifierName}
+                  style={styles.textbox}
+                  value={data?.identifier}
+                />
+              </div>
+              <div style={styles.row}>
+                <label for="password" style={styles.label}>Password</label>
+                <input
+                  type="password"
+                  id={PASSWORD}
+                  name={PASSWORD}
+                  style={styles.textbox}
+                />
+              </div>
+              <div style={{...styles.row, ...styles.centering}}>
+                <button type="submit" style={styles.button}>Login</button>
+              </div>
+            </form>
+          </div>
+          <div style={styles.centering}>
+            <a href={paths.createPath} style={styles.link}>Create Account</a>
+          </div>
         </div>
       </div>
     );
diff --git a/src/routes/create.tsx b/src/routes/create.tsx
index 9483fd7..ee40823 100644
--- a/src/routes/create.tsx
+++ b/src/routes/create.tsx
@@ -106,47 +106,49 @@ export function getCreateComponent(
   ) {
     return (
       <div style={styles.block}>
-        <div>
-          <h2>Create Account</h2>
-        </div>
-        <div>
-          <form action={paths.createPath} method="post">
-            <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
-            <div style={styles.row}>
-              {data?.errors?.length > 0 && (
-                <ul>
-                  {data.errors.map((error) => <li>{error}</li>)}
-                </ul>
-              )}
-            </div>
-            <div style={styles.row}>
-              <label for={resourceIdentifierName} style={styles.label}>
-                {pascalCase(resourceIdentifierName)}
-              </label>
-              <input
-                type="text"
-                id={resourceIdentifierName}
-                name={resourceIdentifierName}
-                style={styles.textbox}
-                value={data?.identifier}
-              />
-            </div>
-            <div style={styles.row}>
-              <label for="password" style={styles.label}>Password</label>
-              <input
-                type="password"
-                id={PASSWORD}
-                name={PASSWORD}
-                style={styles.textbox}
-              />
-            </div>
-            <div style={styles.row}>
-              <button type="submit" style={styles.button}>CREATE</button>
-            </div>
-          </form>
-        </div>
-        <div>
-          <a href={paths.loginPath} style={styles.link}>LOGIN</a>
+        <div style={styles.container}>
+          <div style={styles.centering}>
+            <h2>Create Account</h2>
+          </div>
+          <div>
+            <form action={paths.createPath} method="post">
+              <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
+              <div style={styles.row}>
+                {data?.errors?.length > 0 && (
+                  <ul>
+                    {data.errors.map((error) => <li>{error}</li>)}
+                  </ul>
+                )}
+              </div>
+              <div style={styles.row}>
+                <label for={resourceIdentifierName} style={styles.label}>
+                  {pascalCase(resourceIdentifierName)}
+                </label>
+                <input
+                  type="text"
+                  id={resourceIdentifierName}
+                  name={resourceIdentifierName}
+                  style={styles.textbox}
+                  value={data?.identifier}
+                />
+              </div>
+              <div style={styles.row}>
+                <label for="password" style={styles.label}>Password</label>
+                <input
+                  type="password"
+                  id={PASSWORD}
+                  name={PASSWORD}
+                  style={styles.textbox}
+                />
+              </div>
+              <div style={{...styles.row, ...styles.centering}}>
+                <button type="submit" style={styles.button}>Create</button>
+              </div>
+            </form>
+          </div>
+          <div style={styles.centering}>
+            <a href={paths.loginPath} style={styles.link}>Login</a>
+          </div>
         </div>
       </div>
     );
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index 98a18bf..a792b7c 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -92,47 +92,49 @@ export function getLoginComponent(
   ) {
     return (
       <div style={styles.block}>
-        <div>
-          <h2>Login</h2>
-        </div>
-        <div>
-          <form action={paths.loginPath} method="post">
-            <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
-            <div style={styles.row}>
-              {data?.errors?.length > 0 && (
-                <ul>
-                  {data.errors.map((error) => <li>{error}</li>)}
-                </ul>
-              )}
-            </div>
-            <div style={styles.row}>
-              <label for={resourceIdentifierName} style={styles.label}>
-                {pascalCase(resourceIdentifierName)}
-              </label>
-              <input
-                type="text"
-                id={resourceIdentifierName}
-                name={resourceIdentifierName}
-                style={styles.textbox}
-                value={data?.identifier}
-              />
-            </div>
-            <div style={styles.row}>
-              <label for="password" style={styles.label}>Password</label>
-              <input
-                type="password"
-                id={PASSWORD}
-                name={PASSWORD}
-                style={styles.textbox}
-              />
-            </div>
-            <div style={styles.row}>
-              <button type="submit" style={styles.button}>Login</button>
-            </div>
-          </form>
-        </div>
-        <div>
-          <a href={paths.createPath} style={styles.link}>Create Account</a>
+        <div style={styles.container}>
+          <div style={styles.centering}>
+            <h2>Login</h2>
+          </div>
+          <div>
+            <form action={paths.loginPath} method="post">
+              <input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
+              <div style={styles.row}>
+                {data?.errors?.length > 0 && (
+                  <ul>
+                    {data.errors.map((error) => <li>{error}</li>)}
+                  </ul>
+                )}
+              </div>
+              <div style={styles.row}>
+                <label for={resourceIdentifierName} style={styles.label}>
+                  {pascalCase(resourceIdentifierName)}
+                </label>
+                <input
+                  type="text"
+                  id={resourceIdentifierName}
+                  name={resourceIdentifierName}
+                  style={styles.textbox}
+                  value={data?.identifier}
+                />
+              </div>
+              <div style={styles.row}>
+                <label for="password" style={styles.label}>Password</label>
+                <input
+                  type="password"
+                  id={PASSWORD}
+                  name={PASSWORD}
+                  style={styles.textbox}
+                />
+              </div>
+              <div style={{...styles.row, ...styles.centering}}>
+                <button type="submit" style={styles.button}>Login</button>
+              </div>
+            </form>
+          </div>
+          <div style={styles.centering}>
+            <a href={paths.createPath} style={styles.link}>Create Account</a>
+          </div>
         </div>
       </div>
     );
diff --git a/src/utils/style.ts b/src/utils/style.ts
index 86e826f..269c25f 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -1,8 +1,19 @@
 export const styles = {
-  block: { padding: "10px", backgroundColor: "#EEE" },
+  block: { display: "block" },
+  container: {
+    maxWidth: "300px",
+    margin: "auto",
+    backgroundColor: "#EEE",
+    padding: "10px",
+    position: "absolute",
+    top: "40%",
+    left: "50%",
+    transform: "translate(-50%, -40%)"
+  },
   row: { marginBottom: "5px" },
   label: { float: "left", width: "100px" },
-  textbox: { border: "1px solid #CCC", borderRadius: "4px" },
-  button: { border: "1px solid #CCC", borderRadius: "4px", padding: "2px" },
+  textbox: { border: "1px solid #CCC", borderRadius: "4px"  },
+  button: { border: "1px solid #CCC", borderRadius: "4px", paddingTop: "4px", paddingBottom: "4px", paddingRight: "12px", paddingLeft: "12px",  },
   link: { color: "#88D", textDecoration: "underline" },
+  centering: { textAlign: "center" }, 
 };