Fix spacing in manage user page and add first name and last name fields

This commit is contained in:
Andrew Kingston 2021-05-19 10:39:23 +01:00
parent c62b002182
commit 1e595cb452
1 changed files with 37 additions and 47 deletions

View File

@ -56,7 +56,8 @@
}
</script>
<Layout noPadding gap="XS">
<Layout noPadding>
<Layout gap="XS" noPadding>
<div class="back">
<ActionButton
on:click={() => $goto("./")}
@ -67,33 +68,38 @@
Back to users
</ActionButton>
</div>
<div class="heading">
<Layout noPadding gap="XS">
<Heading>User: {$roleFetch?.data?.email}</Heading>
<Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro
ut nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro ut
nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit
veritatis quos quas laborum magnam tenetur perspiciatis ex hic.
</Body>
</Layout>
</div>
<Divider size="S" />
<div class="general">
<Layout gap="S" noPadding>
<Heading size="S">General</Heading>
<div class="fields">
<div class="field">
<Label size="L">Email</Label>
<Input disabled thin value={$roleFetch?.data?.email} />
</div>
<div class="field">
<Label size="L">First name</Label>
<Input disabled thin value={$roleFetch?.data?.firstName} />
</div>
<div class="field">
<Label size="L">Last name</Label>
<Input disabled thin value={$roleFetch?.data?.lastName} />
</div>
</div>
<div class="regenerate">
<ActionButton size="S" icon="Refresh" quiet>
Regenerate password
</ActionButton>
</div>
</div>
</Layout>
<Divider size="S" />
<div class="roles">
<Layout gap="S" noPadding>
<Heading size="S">Configure roles</Heading>
<Table
on:click={openUpdateRolesModal}
@ -104,18 +110,16 @@
allowSelectRows={false}
customRenderers={[{ column: "role", component: TagsRenderer }]}
/>
</div>
</Layout>
<Divider size="S" />
<div class="delete">
<Layout gap="S" noPadding>
<Layout gap="XS" noPadding>
<Heading size="S">Delete user</Heading>
<Body>Deleting a user completely removes them from your account.</Body>
</Layout>
<div class="delete-button">
<Button warning on:click={deleteUserModal.show}>Delete user</Button>
</div>
</Layout>
</div>
</Layout>
<Modal bind:this={deleteUserModal}>
<ModalContent
@ -143,26 +147,12 @@
.fields {
display: grid;
grid-gap: var(--spacing-m);
margin-top: var(--spacing-xl);
}
.field {
display: grid;
grid-template-columns: 32% 1fr;
align-items: center;
}
.heading {
margin-bottom: var(--spacing-xl);
}
.general {
position: relative;
margin: var(--spacing-xl) 0;
}
.roles {
margin: var(--spacing-xl) 0;
}
.delete {
margin-top: var(--spacing-xl);
}
.regenerate {
position: absolute;
top: 0;