From a205e3e7e8065a876272792fb42551d47f619434 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 14 Jul 2020 15:41:46 +0100
Subject: [PATCH] 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.
---
 .../ModelDataTable/ModelDataTable.svelte      | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 85ffa58a6a..22426269a2 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -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>