From 9dd2ff3afcfde4e75cdb4bad8bf6e597ba4c1ebe Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Thu, 26 Sep 2019 23:05:05 +0200
Subject: [PATCH] styling

---
 test/index.html |  5 -----
 test/test.tsx   | 46 +++++++++++++++++++++++++---------------------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/test/index.html b/test/index.html
index 00d7936..5a922ba 100644
--- a/test/index.html
+++ b/test/index.html
@@ -11,11 +11,6 @@
 		body {
 			padding: 1em
 		}
-
-		input,
-		select {
-			display: block;
-		}
 	</style>
 </head>
 
diff --git a/test/test.tsx b/test/test.tsx
index b17f740..9e8a1ee 100644
--- a/test/test.tsx
+++ b/test/test.tsx
@@ -33,35 +33,39 @@ const Index: React.FC = () => {
     <div>
       <form onSubmit={_submit}>
         <div>Username</div>
-        <input {...auto('username')} />
-        {errors.username && 'Something went wrong'}
+        <input className="input" {...auto('username')} />
         <TextError error={errors.username} />
-        <br />
+        <br /><br />
 
         <div>Password</div>
-        <input {...auto('password')} />
+        <input className="input" {...auto('password')} />
         <TextError error={errors.password} />
-        <br />
+        <br /><br />
 
         <div>Which one to choose?</div>
-        <select {...auto('type')}>
-          <option value="redux-form">Redux-Form</option>
-          <option value="react-hook-forms">React-Hook-Forms</option>
-          <option value="formik">Formik</option>
-          <option value="formhero">FormHero</option>
-        </select>
-        <br />
+        <div className="select">
+          <select {...auto('type')}>
+            <option value="redux-form">Redux-Form</option>
+            <option value="react-hook-forms">React-Hook-Forms</option>
+            <option value="formik">Formik</option>
+            <option value="formhero">FormHero</option>
+          </select>
+        </div>
+        <br /><br />
 
-        <div>Is it awesome?</div>
-        <input type="checkbox" name="vehicle" {...auto('awesome', {
-          setter: 'checked',
-          getter: 'onChange',
-          extractor: (e) => e.target.checked
-        })} />
+
+        <label className="checkbox">
+          <input type="checkbox" {...auto('awesome', {
+            setter: 'checked',
+            getter: 'onChange',
+            extractor: (e) => e.target.checked
+          })} />
+          Is it awesome?
+        </label>
         <TextError error={errors.awesome} />
-        <br />
+        <br /><br />
 
-        <button type="submit">Go 🚀</button>
+        <button className="button" type="submit">Go 🚀</button>
       </form>
     </div>
   )
@@ -69,5 +73,5 @@ const Index: React.FC = () => {
 
 ReactDOM.render(<Index />, document.getElementById('root'))
 
-// @ts-ignore
+      // @ts-ignore
 // if (module.hot) module.hot.accept()
\ No newline at end of file