1
0
Fork 0
mirror of synced 2024-07-01 12:30:41 +12:00

edit/delete record dropdown update

During the onboarding of Nile, he reported the dropdown was too small and hard to use.

I have increased the size of the dropdown, text, improved spacing, added icons, and hover.
This commit is contained in:
Joe 2020-07-14 15:41:46 +01:00
parent 18bd05070b
commit a205e3e7e8

View file

@ -113,15 +113,15 @@
on:click={() => {
editRecord(row)
}}>
<div>Edit</div>
<i class="ri-edit-line" />
<div class="label">Edit</div>
</li>
<li>
<div
on:click={() => {
deleteRecord(row)
}}>
Delete
</div>
<li
on:click={() => {
deleteRecord(row)
}}>
<i class="ri-delete-bin-2-line" />
<div class="label">Delete</div>
</li>
</ul>
</div>
@ -146,6 +146,9 @@
</section>
<style>
section {
margin-bottom: 20px;
}
.title {
font-size: 24px;
font-weight: 600;
@ -204,4 +207,28 @@
display: flex;
align-items: center;
}
li {
display: flex;
align-items: center;
border-radius: 5px;
}
i {
color: var(--grey-7);
margin-right: 8px;
font-size: 20px;
}
.label {
color: var(--grey-7);
font-size: 14px;
font-family: inter;
font-weight: 400;
margin: 12px 0px;
}
.label:hover {
color: var(--ink);
cursor: pointer;
}
</style>