🔧 Styling form inputs

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">
+                      <div className="absolute right-1 inset-y-0 flex items-center px-0 pointer-events-none">
-                        <svg
+                        <i className="icon-[solar--alt-arrow-down-bold]" />
-                          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>
                     </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">
+                      <span className="text-red-200">{meta.error}</span>
-                        {meta.error}
-                      </span>
                     )}
                   </div>
                 )}
               </Field>
             </div>
-            <label className="label">Hostname</label>
+
-            <div className="field has-addons">
+            <label className="label">Credentials</label>
-              <p className="control">
+            <div className="flex items-center rounded-md border border-gray-300">
-                <span className="select">
+              <div className="relative">
-                  <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">
                 <Field
-                  name="port"
+                  name="username"
                   component="input"
-                  className="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"
-                  placeholder="port"
+                  placeholder="Username"
                 />
-              </p>
+                <span className="absolute right-10 inset-y-0 flex items-center px-0 pointer-events-none">
-            </div>
+                  <i className="icon-[solar--user-bold-duotone]" />
-            <div className="field">
+                </span>
-              <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>
               </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">