samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated button design of Forms

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 13:04:02 +02:00
parent 72d597efc8
commit 31ee2a507d
1 changed files with 37 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/refactor/ComposerForm.svelte
View File

@ -167,13 +167,6 @@
<p class="text-2xl text-center text-white"> <p class="text-2xl text-center text-white">
{fields[$state.context.currentField].description} {fields[$state.context.currentField].description}
</p> </p>
<!-- <label
for={fields[$state.context.currentField].name}
class="block mb-2 font-semibold text-center text-white"
>
{fields[$state.context.currentField].name.charAt(0).toUpperCase() +
fields[$state.context.currentField].name.slice(1)}
</label> -->
{/if} {/if}
</div> </div>
{#if fields[$state.context.currentField].type === 'text'} {#if fields[$state.context.currentField].type === 'text'}
@ -205,37 +198,36 @@
submitted submitted
{/if} {/if}
<div class="flex justify-between mt-4"> <div class="flex justify-between mt-4">
<div>
{#each $possibleActions as action (action)} {#each $possibleActions as action (action)}
{#if action === 'PREV'} {#if action === 'PREV'}
<button <button
type="button" type="button"
on:click={() => send(action)} on:click={() => send(action)}
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" class="btn btn-xl variant-filled"
disabled={$state.context.currentField === 0} disabled={$state.context.currentField === 0}
> >
{action} {action}
</button> </button>
{/if} {/if}
{/each} {/each}
</div>
<div>
{#each $possibleActions as action (action)} {#each $possibleActions as action (action)}
{#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'} {#if action !== 'NEXT' && action !== 'PREV' && action !== 'SUBMIT'}
<button <button type="button" on:click={() => send(action)} class="btn btn-xl variant-filled">
type="button"
on:click={() => send(action)}
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{action} {action}
</button> </button>
{/if} {/if}
{/each} {/each}
</div>
<div>
{#each $possibleActions as action (action)} {#each $possibleActions as action (action)}
{#if action === 'NEXT' || action === 'SUBMIT'} {#if action === 'NEXT' || action === 'SUBMIT'}
<button <button
type="button" type="button"
on:click={() => handleNext()} on:click={() => handleNext()}
class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" class="btn btn-xl variant-filled"
disabled={$errors[fields[$state.context.currentField].name]} disabled={$errors[fields[$state.context.currentField].name]}
> >
{action} {action}
@ -243,5 +235,6 @@
{/if} {/if}
{/each} {/each}
</div> </div>
</div>
</form> </form>
</div> </div>