Component items ui updated

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>

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;
+    flex-direction: column;
-    padding: 10px 0px 8px 10px;
-    align-items: center;
     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;
+    background: var(--grey-light);
-    border-radius: 5px;
+    border-radius: 3px;
   }
 
   .item-icon {
-    flex: 0 0 40px;
+    border-radius: 3px;
-    background: #f1f4fc;
-    height: 40px;
-    border-radius: 5px;
     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>

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.",

packages/builder/src/pages/[application]/_layout.svelte

@@ -147,7 +147,7 @@
   }
 
   .topnavitemright:hover {
-    color: rgb(255, 255, 255, 0.8);
+    color: var(--ink);
     font-weight: 500;
   }