frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Styling form inputs

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-13 21:43:21 -05:00
parent 81b590157e
commit a7508df0b3
1 changed files with 36 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/client/components/shared/ConnectionForm/ConnectionForm.tsx
View File

@@ -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">