From 1f6d6ca6b62aabf411b28f80ad2944b1a653ffa3 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 14 Dec 2023 22:25:48 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Form=20refactor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/ConnectionForm/ConnectionForm.tsx  | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
index 573f1b8..3d42d96 100644
--- a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
+++ b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
@@ -18,7 +18,7 @@ export const ConnectionForm = ({
             <h2 className="text-xl">{formHeading}</h2>
 
             <div className="relative flex flex-col">
-              <label className="label">Hostname</label>
+              <label className="block py-1">Hostname</label>
               <Field name="hostname" validate={hostNameValidator}>
                 {({ input, meta }) => (
                   <div className="flex items-center rounded-md border border-gray-300">
@@ -26,7 +26,7 @@ export const ConnectionForm = ({
                       <Field
                         name="protocol"
                         component="select"
-                        className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                        className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 pr-6 pl-4 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                       >
                         <option>Protocol</option>
                         <option value="http">http://</option>
@@ -37,19 +37,30 @@ export const ConnectionForm = ({
                       </div>
                     </div>
 
-                    <input
-                      {...input}
-                      type="text"
-                      placeholder="hostname"
-                      className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    />
+                    <Field name="hostname" validate={hostNameValidator}>
+                      {({ input, meta }) => (
+                        <div>
+                          <input
+                            {...input}
+                            type="text"
+                            placeholder="Hostname"
+                            className="ml-2 bg-transparent py-2 px-2 border-r border-gray-300 w-full h-10 dark:text-slate-200 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                          />
+                          {meta.error && meta.touched && (
+                            <span className="is-size-7 has-text-danger">
+                              {meta.error}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    </Field>
 
                     {/* port */}
                     <Field
                       name="port"
                       component="input"
                       className="ml-2 bg-transparent py-2 px-2 block w-full rounded-md sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                      placeholder="port"
+                      placeholder="Port"
                     />
 
                     {meta.error && meta.touched && (
@@ -60,36 +71,44 @@ export const ConnectionForm = ({
               </Field>
             </div>
 
-            <label className="label">Credentials</label>
+            <label className="block py-1">Credentials</label>
             <div className="flex items-center rounded-md border border-gray-300">
               <div className="relative">
                 <Field
                   name="username"
                   component="input"
-                  className="appearance-none h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  className="relative left-7 top-0 h-10 bg-transparent rounded-none border-r border-gray-300 text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                   placeholder="Username"
                 />
-                <span className="absolute right-10 inset-y-0 flex items-center px-0 pointer-events-none">
-                  <i className="icon-[solar--user-bold-duotone]" />
+                <span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
+                  <i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
+                </span>
+              </div>
+              <div className="relative">
+                <Field
+                  name="password"
+                  component="input"
+                  type="password"
+                  className="relative left-14 top-0 h-10 bg-transparent text-gray-700 dark:text-slate-200 py-1 px-3 sm:text-sm sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  placeholder="Password"
+                />
+                <span className="absolute left-9 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
+                  <i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
                 </span>
               </div>
-              <Field
-                name="password"
-                component="input"
-                type="password"
-                className="input"
-                placeholder="Password"
-              />
-              <span className="icon is-small is-left">
-                <i className="fa-solid fa-lock"></i>
-              </span>
             </div>
             <div className="field is-grouped">
-              <p className="control">
-                <button type="submit" className="button is-primary">
+              <button
+                className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                type="submit"
+              >
+                <span className="text-md">
                   {!isEmpty(initialData) ? "Update" : "Save"}
-                </button>
-              </p>
+                </span>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
+                </span>
+              </button>
 
               <p className="control">
                 <button type="submit" className="button is-danger">