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,44 +56,50 @@
}
</script>
<Layout noPadding gap="XS">
<div class="back">
<ActionButton
on:click={() => $goto("./")}
quiet
size="S"
icon="BackAndroid"
>
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
veritatis quos quas laborum magnam tenetur perspiciatis ex hic.
</Body>
</Layout>
</div>
<Layout noPadding>
<Layout gap="XS" noPadding>
<div class="back">
<ActionButton
on:click={() => $goto("./")}
quiet
size="S"
icon="BackAndroid"
>
Back to users
</ActionButton>
</div>
<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
veritatis quos quas laborum magnam tenetur perspiciatis ex hic.
</Body>
</Layout>
<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,16 +110,14 @@
allowSelectRows={false}
customRenderers={[{ column: "role", component: TagsRenderer }]}
/>
</div>
</Layout>
<Divider size="S" />
<div class="delete">
<Layout gap="S" noPadding>
<Heading size="S">Delete user</Heading>
<Body>Deleting a user completely removes them from your account.</Body>
<div class="delete-button">
<Button warning on:click={deleteUserModal.show}>Delete user</Button>
</div>
</Layout>
<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>
@ -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;