From 038942900252b95d1ea8937b44f892463f036165 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 13 Jun 2020 13:06:18 +0200
Subject: [PATCH] wip

---
 src/components/categories/Forms.vue            |  6 +++---
 .../ui/Forms/{Inputs.vue => Simple.vue}        | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)
 rename src/components/ui/Forms/{Inputs.vue => Simple.vue} (86%)

diff --git a/src/components/categories/Forms.vue b/src/components/categories/Forms.vue
index 7a770da..36b2f74 100644
--- a/src/components/categories/Forms.vue
+++ b/src/components/categories/Forms.vue
@@ -2,7 +2,7 @@
     <div class="w-full max-w-5xl mx-auto my-10">
         <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
 
-        <inputs></inputs>
+        <simple></simple>
         <newsletter></newsletter>
         <sign-in></sign-in>
         <sign-in-with-image></sign-in-with-image>
@@ -10,14 +10,14 @@
 </template>
 
 <script>
-import Inputs from "../ui/Forms/Inputs";
+import Simple from "../ui/Forms/Simple";
 import Newsletter from "../ui/Forms/Newsletter";
 import SignIn from "../ui/Forms/SignIn";
 import SignInWithImage from "../ui/Forms/SignInWithImage";
 
 export default {
     components: { 
-        Inputs,
+        Simple,
         Newsletter,
         SignIn,
         SignInWithImage
diff --git a/src/components/ui/Forms/Inputs.vue b/src/components/ui/Forms/Simple.vue
similarity index 86%
rename from src/components/ui/Forms/Inputs.vue
rename to src/components/ui/Forms/Simple.vue
index b8c27f3..7761193 100644
--- a/src/components/ui/Forms/Inputs.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -8,22 +8,22 @@
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                         <div>
                             <label class="text-gray-700" for="username">Username</label>
-                            <input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="emailAddress">Email Address</label>
-                            <input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="password">Password</label>
-                            <input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                            <input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                         </div>
                     </div>
 
@@ -40,7 +40,7 @@
     export default {
         data() {
             return {
-                name: 'Inputs',
+                name: 'Simple',
                 code: `
         <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
             <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
@@ -49,22 +49,22 @@
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                     <div>
                         <label class="text-gray-700" for="username">Username</label>
-                        <input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="password">Password</label>
-                        <input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
                     </div>
                 </div>