Style

Rigidity · Aug 28, 2024 · 54720a9 · 54720a9
1 parent 86989d1
commit 54720a9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -13,19 +13,32 @@ export default function Main() {
   const result = trimmed.length > 0 ? calc(trimmed) : null;
 
   return (
-    <>
+    <div style={{ maxWidth: 600, margin: "auto", textAlign: "center" }}>
       <h1 style={{ fontSize: 40 }}>BLS Public Key Encoder</h1>
-      <input value={m} onChange={(e) => setM(e.target.value)}></input>
-      <p style={{ width: 700, wordWrap: "break-word" }}>
-        {m.trim().length > 0
-          ? result ?? "Invalid master public key"
-          : "Enter your master public key"}
+      <textarea
+        style={{
+          width: "500px",
+          height: "74px",
+          fontSize: 22,
+          padding: "10px",
+          appearance: "none",
+          outline: "none",
+          border: "1px solid black",
+          borderRadius: "6px",
+          fontFamily: "Arial",
+        }}
+        placeholder="Enter your master public key"
+        value={m}
+        onChange={(e) => setM(e.target.value)}
+      ></textarea>
+      <p style={{ fontSize: 22, wordWrap: "break-word" }}>
+        {m.trim().length > 0 ? result ?? "Invalid key format" : ""}
       </p>
-      <p style={{ fontSize: 20 }}>
+      <p style={{ fontSize: 18 }}>
         This converts a master public key to the first wallet address encoded
-        with the bls12381 prefix.
+        with the "bls1238" prefix.
       </p>
-    </>
+    </div>
   );
 }
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,6 +9,13 @@ import Main from "../components/Main";
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<title>BLS Key Encoder</title>
+		<style>
+			body {
+				background-color: #DDFFDD;
+				font-size: 16px;
+				font-family: Arial, Helvetica, sans-serif;
+			}
+		</style>
 	</head>
 	<body>
 		<Main client:load/>