From a7508df0b3da0fa32dcb405ca7a6ed1a3d31b486 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 13 Dec 2023 21:43:21 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Styling=20form=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/ConnectionForm/ConnectionForm.tsx  | 124 +++++-------------
 1 file changed, 36 insertions(+), 88 deletions(-)

diff --git a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
index 139626b..573f1b8 100644
--- a/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
+++ b/src/client/components/shared/ConnectionForm/ConnectionForm.tsx
@@ -17,36 +17,23 @@ export const ConnectionForm = ({
           <form onSubmit={handleSubmit}>
             <h2 className="text-xl">{formHeading}</h2>
 
-            <div className="relative flex w-full max-w-[24rem]">
+            <div className="relative flex flex-col">
+              <label className="label">Hostname</label>
               <Field name="hostname" validate={hostNameValidator}>
                 {({ input, meta }) => (
                   <div className="flex items-center rounded-md border border-gray-300">
                     <div className="relative">
-                      {/* <select
-                        id="dropdown"
-                        className="appearance-none h-11 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"
-                      >
-                        <option>Protocol</option>
-                        <option value="http">http://</option>
-                        <option value="https">https://</option>
-                      </select> */}
                       <Field
                         name="protocol"
                         component="select"
-                        className="appearance-none h-11 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 px-3 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>
                         <option value="https">https://</option>
                       </Field>
-                      <div className="absolute right-0 inset-y-0 flex items-center px-0 pointer-events-none">
-                        <svg
-                          className="h-5 w-5 text-gray-400"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path d="M7 7l3-3 3 3m0 6l-3 3-3-3"></path>
-                        </svg>
+                      <div className="absolute right-1 inset-y-0 flex items-center px-0 pointer-events-none">
+                        <i className="icon-[solar--alt-arrow-down-bold]" />
                       </div>
                     </div>
 
@@ -54,87 +41,48 @@ export const ConnectionForm = ({
                       {...input}
                       type="text"
                       placeholder="hostname"
-                      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"
+                      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"
                     />
+
+                    {/* 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"
+                    />
+
                     {meta.error && meta.touched && (
-                      <span className="is-size-7 has-text-danger">
-                        {meta.error}
-                      </span>
+                      <span className="text-red-200">{meta.error}</span>
                     )}
                   </div>
                 )}
               </Field>
             </div>
-            <label className="label">Hostname</label>
-            <div className="field has-addons">
-              <p className="control">
-                <span className="select">
-                  <Field name="protocol" component="select">
-                    <option>Protocol</option>
-                    <option value="http">http://</option>
-                    <option value="https">https://</option>
-                  </Field>
-                </span>
-              </p>
-              <div className="control is-expanded">
-                <Field name="hostname" validate={hostNameValidator}>
-                  {({ input, meta }) => (
-                    <div>
-                      <input
-                        {...input}
-                        type="text"
-                        placeholder="hostname"
-                        className="input"
-                      />
-                      {meta.error && meta.touched && (
-                        <span className="is-size-7 has-text-danger">
-                          {meta.error}
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </Field>
-              </div>
-              <p className="control">
+
+            <label className="label">Credentials</label>
+            <div className="flex items-center rounded-md border border-gray-300">
+              <div className="relative">
                 <Field
-                  name="port"
+                  name="username"
                   component="input"
-                  className="input"
-                  placeholder="port"
+                  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"
+                  placeholder="Username"
                 />
-              </p>
-            </div>
-            <div className="field">
-              <label className="label">Credentials</label>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
-                    <Field
-                      name="username"
-                      component="input"
-                      className="input"
-                      placeholder="Username"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
-                    </span>
-                  </p>
-                </div>
-                <div className="field">
-                  <p className="control is-expanded has-icons-left has-icons-right">
-                    <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>
-                  </p>
-                </div>
+                <span className="absolute right-10 inset-y-0 flex items-center px-0 pointer-events-none">
+                  <i className="icon-[solar--user-bold-duotone]" />
+                </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">