Add User Model Update

This commit is contained in:
Joe 2020-06-02 21:12:33 +01:00
parent dad4b93459
commit 196058d774
1 changed files with 33 additions and 6 deletions

View File

@ -22,7 +22,11 @@
</script> </script>
<form on:submit|preventDefault class="uk-form-stacked"> <form on:submit|preventDefault class="uk-form-stacked">
<div> <div class="main">
<div class="heading">
<i class="ri-list-settings-line button--toggled" />
<div class="title">Create User</div>
</div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label> <label class="uk-form-label" for="form-stacked-text">Username</label>
<input class="uk-input" type="text" bind:value={username} /> <input class="uk-input" type="text" bind:value={username} />
@ -41,18 +45,41 @@
</div> </div>
</div> </div>
<footer> <footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> <div class="button">
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton> <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
</div>
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer> </footer>
</form> </form>
<style> <style>
div {
padding: 30px; .main {
padding: 40px 40px 20px 40px;
} }
.title {
font-size: 24px;
font-weight: 700;
color: var(--ink);
margin-left: 12px;
}
.heading {
display: flex;
align-items: baseline;
}
footer { footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px; padding: 20px;
background: var(--grey-light); background: var(--grey-light);
border-radius: 0.5rem; border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
} }
</style> </style>