Improve settings panel

zetter · Jun 6, 2020 · 471bdd0 · 471bdd0
1 parent 6114acf
commit 471bdd0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/components/app.css b/src/components/app.css
@@ -57,6 +57,22 @@ body {
   animation: fade-in 500ms ease-in-out;
 }
 
+input[type="text"] {
+  border: none;
+  margin-bottom: 10px;
+  border: 1px solid white;
+  border-radius: 3px;
+  margin-left: 10px;
+  width: 40px;
+}
+
+input[type="submit"] {
+  background-color: #FFF;
+  border: 1px solid black;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
 @keyframes fade-in {
     0% {
         opacity: 0;

diff --git a/src/components/settings.js b/src/components/settings.js
@@ -28,15 +28,15 @@ const Settings = ({initialX, initialY, onSubmit, show}) => {
   return <div>
     <h3>Settings</h3>
 
-    <p>The size of the repeated pattern:</p>
+    <p>The size of the repeated pattern.</p>
     <form onSubmit={submit}>
       <div>
         <label htmlFor="x">Tiles wide:</label>
-        <input name="x" value={x} onChange={(e) => setX(e.target.value)}/>
+        <input type="text" id="x" value={x} onChange={(e) => setX(e.target.value)}/>
       </div>
       <div>
         <label htmlFor="y">Tiles high:</label>
-        <input name="y" value={y} onChange={(e) => setY(e.target.value)}/>
+        <input type="text" id="y" value={y} onChange={(e) => setY(e.target.value)}/>
       </div>
 
       <input type="submit" value="Regenerate"/>