From 35934a4da004dcb4e148f9a84d20749cd421fd3b Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Sun, 10 Jan 2021 10:09:47 +0000
Subject: [PATCH] Updated the design of the items within the component dropdown

Icons were a little hard to make out. Increased the size and visability.
The icons are not ideal, but I will tackle this another day - Budi Icons!
---
 .../components/common/Dropdowns/DropdownItem.svelte  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 66a384fc90..f6f1ec2d12 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -11,7 +11,9 @@
   on:click
   class:big={subtitle != null}
   {...$$restProps}>
-  {#if icon}<i class={icon} />{/if}
+  {#if icon}
+    <i class={icon} />
+  {/if}
   <div class="content">
     <div class="title">{title}</div>
     {#if subtitle != null}
@@ -56,7 +58,7 @@
   }
 
   .title {
-    font-weight: 400;
+    font-weight: 500;
   }
 
   .subtitle {
@@ -65,6 +67,10 @@
   }
 
   i {
-    font-size: 16px;
+    padding: 0.5rem;
+    background-color: var(--grey-2);
+    font-size: 24px;
+    border-radius: var(--border-radius-s);
+    color: var(--ink);
   }
 </style>