From 8fd6f47b2f5d21a58ce356a949910db7d7e6064b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 24 Feb 2021 21:12:21 +0100
Subject: [PATCH] basic input styling for Profile page

---
 src/components/Profile.vue | 35 +++++++++++++++++++++++------------
 svelte-routify-windi-vite  |  1 +
 2 files changed, 24 insertions(+), 12 deletions(-)
 create mode 160000 svelte-routify-windi-vite

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 89e579e..8d0c82d 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -88,16 +88,27 @@
               </div>
             </div>
             <div class="tab-content block">
-              <div class="py-4 w-full lg:w-1/2">
+              <div class="py-4 w-full">
                 <div class="flex flex-col">
                   <form class="form flex flex-wrap w-full">
                     <div class="w-full">
+                      <!--  -->
+                      <div class="relative mb-4">
+                        <label for="email" class="leading-7 text-sm text-gray-400">Email</label>
+                        <input
+                          type="email"
+                          id="email"
+                          name="email"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        />
+                      </div>
+                      <!--  -->
                       <div class="form-element">
                         <div class="form-label">First name</div>
                         <input
                           name="first-name"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           type="text"
-                          class="form-input"
                           placeholder="Enter you first name"
                         />
                       </div>
@@ -106,7 +117,7 @@
                         <input
                           name="last-name"
                           type="text"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you last name"
                         />
                       </div>
@@ -115,7 +126,7 @@
                         <input
                           name="email"
                           type="email"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you email address"
                         />
                       </div>
@@ -124,7 +135,7 @@
                         <input
                           name="company"
                           type="text"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you company"
                         />
                       </div>
@@ -133,13 +144,13 @@
                         <input
                           name="position"
                           type="text"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you position"
                         />
                       </div>
                       <div class="form-element">
                         <div class="form-label">Language</div>
-                        <select name="language" class="form-select">
+                        <select name="language" class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                           <option>Select language</option>
                           <option value="english">English</option>
                           <option value="spanish">Spanish</option>
@@ -165,7 +176,7 @@
                         <input
                           name="email"
                           type="email"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you current email address"
                         />
                       </div>
@@ -174,7 +185,7 @@
                         <input
                           name="email"
                           type="email"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter you new email address"
                         />
                       </div>
@@ -243,7 +254,7 @@
                         <input
                           name="current-password"
                           type="password"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter your current password"
                         />
                       </div>
@@ -252,7 +263,7 @@
                         <input
                           name="new-password"
                           type="password"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter your new password"
                         />
                       </div>
@@ -261,7 +272,7 @@
                         <input
                           name="confirm-new-password"
                           type="password"
-                          class="form-input"
+                          class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                           placeholder="Enter your new password confirmation"
                         />
                       </div>
diff --git a/svelte-routify-windi-vite b/svelte-routify-windi-vite
new file mode 160000
index 0000000..a424252
--- /dev/null
+++ b/svelte-routify-windi-vite
@@ -0,0 +1 @@
+Subproject commit a4242522d191f8fe2450586f4986c549818893fe