From 5bc315f1624652b277ae4f0b4d3011b2b00d5b56 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 11:11:32 +0100
Subject: [PATCH] Component items ui updated

---
 .../ComponentSelectionList.svelte             | 27 ++-----------
 .../userInterface/ItemTab/Item.svelte         | 39 +++++++------------
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../src/pages/[application]/_reset.svelte     |  2 +-
 4 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 3ffab198e9..6fc4193017 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,32 +52,11 @@
 </div>
 
 <style>
-  .tabs {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-    margin: 0 auto;
-    padding: 0 30px;
-    border-bottom: 1px solid #d8d8d8;
-
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.14px;
-  }
-
-  li {
-    color: #808192;
-    margin: 0 5px;
-    padding: 0 8px;
-    cursor: pointer;
-  }
 
   .panel {
-    padding: 20px;
+    padding: 20px 0px;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .active {
-    border-bottom: solid 3px #0055ff;
-    color: #393c44;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 82eec75483..3fc62d7a92 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -8,59 +8,46 @@
   </div>
   <div class="item-text">
     <div class="item-name">{item.name}</div>
-    <div class="item-description">
-      <p>{item.description}</p>
-    </div>
   </div>
 </div>
 
 <style>
+
   .item-item {
     display: flex;
-    flex-direction: row;
-    padding: 10px 0px 8px 10px;
-    align-items: center;
+    flex-direction: column;
     cursor: pointer;
+    margin-bottom: 8px;
+    padding: 8px 0px 16px 0px;
+    width: 80px;
+    justify-content: center;
+    align-items: center;
+    margin-right: 6px;
   }
 
   .item-item:hover {
-    background: #fbfbfb;
-    border-radius: 5px;
+    background: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-icon {
-    flex: 0 0 40px;
-    background: #f1f4fc;
-    height: 40px;
-    border-radius: 5px;
+    border-radius: 3px;
     display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
   .item-text {
     display: flex;
-    padding-left: 16px;
-    padding-top: 8px;
     flex-direction: column;
   }
 
   .item-name {
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
-  .item-description {
-    font-size: 12px;
-    color: #808192;
-  }
-
-  p {
-    line-height: 15px;
-  }
 
   i {
     font-size: 24px;
-    color: #808192;
+    color: var(--ink-light);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae6a658e7a..b62b0b0f74 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -249,7 +249,7 @@ export default {
           properties: { design: { ...all } },
         },
         {
-          name: "Navigation Bar",
+          name: "Nav Bar",
           _component: "@budibase/standard-components/Navigation",
           description:
             "A component for handling the navigation within your app.",
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index edaed8c967..5e3e973ae7 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -150,7 +150,7 @@
   }
 
   .topnavitemright:hover {
-    color: rgb(255, 255, 255, 0.8);
+    color: var(--ink);
     font-weight: 500;
   }