Skip to content

Commit

Permalink
feat: improve form layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@malfynnction
malfynnction committed Jan 27, 2024
1 parent a05d321 commit 9dc4143
Show file tree
Hide file tree
Showing 23 changed files with 639 additions and 654 deletions.
38 changes: 22 additions & 16 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
}

.box {
@apply shadow-sm rounded-lg bg-gray-100 dark:bg-slate-700;
@apply shadow-sm rounded-md bg-gray-100 dark:bg-slate-700;
}

.card {
Expand All @@ -99,37 +99,43 @@
@apply bg-red-100 p-2 rounded-md text-red-800 dark:text-red-600;
}

.button-group {
@apply gap-4 flex flex-col md:flex-row-reverse md:justify-start;
}

.btn-primary {
@apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered bg-blue-800 hover:bg-blue-900 dark:hover:bg-blue-700 text-white py-3 px-4 text-sm font-bold;
}

.btn-secondary {
@apply box w-full text-red-800 hover:text-red-900 dark:text-red-600 dark:hover:text-red-500 py-2 px-4 text-base font-medium hover:bg-gray-200 dark:hover:bg-slate-600;
@apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered text-blue-800 hover:text-blue-900 dark:text-gray-300 dark:hover:text-gray-200 py-2 px-4 text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 border border-blue-800 dark:border-gray-300;
}

.link-blue {
@apply text-blue-600 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-300;
.btn-secondary-red {
@apply btn-secondary text-red-800 hover:text-red-900 border-red-800 dark:text-red-600 dark:hover:text-red-600 dark:border-red-600;
}

textarea,
select {
@apply border border-gray-300 dark:border-gray-900 rounded-md p-2 dark:bg-slate-800 dark:focus:bg-slate-700 dark:text-gray-100;
.link-blue {
@apply text-blue-800 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300;
}

.form-field--wrapper {
@apply sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
input[type='file'] {
@apply border border-gray-300;
&::file-selector-button {
@apply bg-gray-400 dark:bg-slate-600;
}
}

.form-field--label {
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 sm:mt-px sm:pt-2;
@apply block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300;
}

.input--outer {
@apply mt-1 sm:mt-0 sm:col-span-2 relative;
}

.input--inner {
@apply max-w-lg flex rounded-md shadow-sm relative;
@apply mt-2 relative;
}

.input {
@apply flex-1 block w-full min-w-0 sm:text-sm border-gray-300 dark:border-gray-900 rounded-md dark:bg-slate-800 dark:focus:bg-slate-700 dark:text-gray-100;
@apply flex-1 block w-full min-w-0 sm:text-sm border-gray-300 rounded-md dark:text-gray-100 dark:border-slate-700 dark:bg-slate-700 dark:focus:bg-slate-700 focus:outline-transparent focus:border-transparent focus:ring-2 focus:ring-inset focus:ring-blue-800 dark:focus:ring-blue-700;
}

.dashboard {
Expand Down
115 changes: 63 additions & 52 deletions src/components/AccountForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,6 @@ const AccountForm = ({ budget, type }: Props) => {
>
<div className="header">
<h1>{t('accounts.account')}</h1>
<div className="header--action">
<Link to={-1 as any} className="header--action__secondary">
{t('cancel')}
</Link>
<button type="submit">{t('save')}</button>
</div>
</div>

<Error error={error} />
Expand Down Expand Up @@ -126,8 +120,9 @@ const AccountForm = ({ budget, type }: Props) => {
</Link>
)}
<div className="card">
<FormFields>
<FormFields className="md:grid grid-cols-2 md:gap-x-4 md:gap-y-6">
<FormField
className="col-span-full"
type="text"
name="name"
label={t('accounts.name')}
Expand All @@ -138,13 +133,7 @@ const AccountForm = ({ budget, type }: Props) => {

{type === 'internal' ? (
<>
<div className="grid grid-cols-3 gap-4 items-center">
<label
className="text-sm font-medium text-gray-700 dark:text-gray-300"
htmlFor="onbudget"
>
{t('accounts.onBudget')}
</label>
<div className="relative flex items-start col-span-full">
<div
className="mt-px pt-2 pr-2 col-span-2 flex sm:block justify-end"
onClick={e => {
Expand Down Expand Up @@ -179,6 +168,19 @@ const AccountForm = ({ budget, type }: Props) => {
/>
</div>
</div>
<div className="ml-3 text-sm leading-6">
<label className="form-field--label" htmlFor="onbudget">
{t('accounts.onBudget')}
</label>
<p
id="comments-description"
className="text-gray-500 dark:text-gray-400"
>
{account.onBudget
? t('accounts.onBudgetExplanation')
: t('accounts.offBudgetExplanation')}
</p>
</div>
</div>
<FormField
type="number"
Expand Down Expand Up @@ -211,7 +213,7 @@ const AccountForm = ({ budget, type }: Props) => {
</>
) : null}

<div className="form-field--wrapper">
<div className="col-span-full">
<label htmlFor="note" className="form-field--label">
{t('accounts.note')}
</label>
Expand All @@ -222,48 +224,57 @@ const AccountForm = ({ budget, type }: Props) => {
rows={3}
value={account?.note || ''}
onChange={e => updateValue('note', e.target.value)}
className="max-w-lg shadow-sm block w-full sm:text-sm border rounded-md"
className="input"
/>
</div>
</div>
</FormFields>

{isPersisted ? (
<div className="pt-5 space-y-3">
<ArchiveButton
resource={account as Account}
resourceTypeTranslation={t('accounts.account')}
apiConnection={accountApi}
onSuccess={data => {
setAccount(data)
if (error) {
setError('')
}
}}
onError={setError}
/>
<button
type="button"
onClick={() => {
if (window.confirm(t('accounts.confirmDelete'))) {
accountApi
.delete(account as Account)
.then(() => {
navigate(-1)
})
.catch(err => {
setError(err.message)
})
}
}}
className="btn-secondary"
>
<TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
{t('accounts.delete')}
</button>
{/* TODO: reconcile */}
</div>
) : null}
<div className="mt-8 button-group">
<button type="submit" className="btn-primary">
{t('save')}
</button>
{isPersisted ? (
<>
<ArchiveButton
resource={account as Account}
resourceTypeTranslation={t('accounts.account')}
apiConnection={accountApi}
onSuccess={data => {
setAccount(data)
if (error) {
setError('')
}
}}
onError={setError}
/>
<button
type="button"
onClick={() => {
if (window.confirm(t('accounts.confirmDelete'))) {
accountApi
.delete(account as Account)
.then(() => {
navigate(-1)
})
.catch(err => {
setError(err.message)
})
}
}}
className="btn-secondary-red"
>
<TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
{t('accounts.delete')}
</button>
{/* TODO: reconcile */}
</>
) : (
<Link to={-1 as any} className="btn-secondary">
{t('cancel')}
</Link>
)}
</div>
</div>
</>
)}
Expand Down
4 changes: 1 addition & 3 deletions src/components/AllocationInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const AllocationInputs = ({
)

return (
<FormFields>
<FormFields className="space-y-4">
<FormField
type="number"
name="absoluteAllocation"
Expand All @@ -40,7 +40,6 @@ const AllocationInputs = ({
onFocus={e => {
e.target.select()
}}
compact
>
<InputCurrency currency={budget.currency} />
</FormField>
Expand All @@ -59,7 +58,6 @@ const AllocationInputs = ({
)
setRelativeAllocation(e.target.value)
}}
compact
>
<InputCurrency currency={budget.currency} />
</FormField>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ArchiveButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const ArchiveButton = ({
.then(onSuccess)
.catch(onError)
}}
className="btn-secondary link-blue text-center"
className="btn-secondary"
>
<ArchiveBoxIcon className="icon-sm inline mr-1 relative bottom-0.5" />
{t(resource.archived ? 'unarchiveObject' : 'archiveObject', {
Expand Down
Loading

0 comments on commit 9dc4143

Please sign in to comment.