From 538aea1b04505958f4bc26e90f86137992ac9612 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 1/5] Component items ui updated

---
 .../ComponentSelectionList.svelte             | 27 ++-----------
 .../userInterface/ItemTab/Item.svelte         | 39 +++++++------------
 .../userInterface/temporaryPanelStructure.js  |  2 +-
 .../src/pages/[application]/_layout.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]/_layout.svelte b/packages/builder/src/pages/[application]/_layout.svelte
index 5de5e3379b..a996a2680f 100644
--- a/packages/builder/src/pages/[application]/_layout.svelte
+++ b/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;
   }
 

From a6b7837cd3bd398c3eadd1cfe6cda95ef36c91d6 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:18:05 +0100
Subject: [PATCH 2/5] Unified icons and made the components look like blocks

---
 .../ComponentPropertiesPanel.svelte            |  2 +-
 .../ComponentsPaneSwitcher.svelte              |  2 +-
 .../userInterface/ItemTab/Item.svelte          |  9 ++++++---
 .../userInterface/temporaryPanelStructure.js   | 18 +++++++++---------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 3ab8c522f0..726fb35aae 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -109,7 +109,7 @@
 
   .title > div:nth-child(1) {
     grid-column-start: name;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 
   .title > div:nth-child(2) {
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 185b1d640d..de523cd7bf 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -55,7 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 20px;
-    border-left: solid 1px #e8e8ef;
+    border-left: solid 1px var(--grey);
   }
 
   .switcher {
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index 3fc62d7a92..af78d2e015 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -19,14 +19,17 @@
     cursor: pointer;
     margin-bottom: 8px;
     padding: 8px 0px 16px 0px;
-    width: 80px;
+    width: 120px;
+    height: 80px;
     justify-content: center;
     align-items: center;
-    margin-right: 6px;
+    margin-right: 8px;
+    background-color: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-item:hover {
-    background: var(--grey-light);
+    background: var(--grey);
     border-radius: 3px;
   }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index b62b0b0f74..eba4c51bb1 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -15,7 +15,7 @@ export default {
           name: "Screenslot",
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-line",
+          icon: "ri-crop-2-fill",
           commonProps: {},
           children: [],
         },
@@ -119,7 +119,7 @@ export default {
         {
           name: "Input",
           description: "These components handle user input.",
-          icon: "ri-edit-box-line",
+          icon: "ri-edit-box-fill",
           commonProps: {},
           children: [
             {
@@ -127,7 +127,7 @@ export default {
               name: "Textfield",
               description:
                 "A textfield component that allows the user to input text.",
-              icon: "ri-edit-box-line",
+              icon: "ri-edit-box-fill",
               properties: {
                 design: { ...all },
                 settings: [
@@ -145,7 +145,7 @@ export default {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
-              icon: "ri-checkbox-line",
+              icon: "ri-checkbox-fill",
               properties: {
                 design: { ...all },
                 settings: [{ label: "Label", key: "label", control: Input }],
@@ -166,7 +166,7 @@ export default {
               name: "Select",
               description:
                 "A select component for choosing from different options",
-              icon: "ri-file-list-line",
+              icon: "ri-file-list-fill",
               properties: {
                 design: { ...all },
                 settings: [],
@@ -236,7 +236,7 @@ export default {
           name: "Card",
           description:
             "A basic card component that can contain content and actions.",
-          icon: "ri-layout-bottom-line",
+          icon: "ri-layout-bottom-fill",
           children: [],
           properties: { design: { ...all } },
         },
@@ -303,7 +303,7 @@ export default {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
-          icon: "ri-bar-chart-line",
+          icon: "ri-bar-chart-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -311,7 +311,7 @@ export default {
           name: "List",
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
-          icon: "ri-file-list-line",
+          icon: "ri-file-list-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -319,7 +319,7 @@ export default {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
           description: "Shiny map",
-          icon: "ri-map-pin-line",
+          icon: "ri-map-pin-fill",
           properties: { design: { ...all } },
           children: [],
         },

From 86499c132387dfa7e11de785c74f0759c1c41ba8 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 12:51:47 +0100
Subject: [PATCH 3/5] Tidy up

---
 .../builder/src/components/userInterface/ItemTab/Item.svelte   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index af78d2e015..cd51e42564 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -12,7 +12,6 @@
 </div>
 
 <style>
-
   .item-item {
     display: flex;
     flex-direction: column;
@@ -31,6 +30,7 @@
   .item-item:hover {
     background: var(--grey);
     border-radius: 3px;
+    transition: all 0.2s;
   }
 
   .item-icon {
@@ -48,7 +48,6 @@
     font-weight: 400;
   }
 
-
   i {
     font-size: 24px;
     color: var(--ink-light);

From ea31f93cf22c236824ac453a65a03eb6e88d8a10 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:21:13 +0100
Subject: [PATCH 4/5] Update to component groupings

---
 .../ComponentSelectionList.svelte             |  2 -
 .../userInterface/temporaryPanelStructure.js  | 65 +++++++------------
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 6fc4193017..0bf848e4a8 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -52,11 +52,9 @@
 </div>
 
 <style>
-
   .panel {
     padding: 20px 0px;
     display: flex;
     flex-wrap: wrap;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index eba4c51bb1..f27b3c7788 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -10,15 +10,6 @@ export default {
       name: "Basic",
       isCategory: true,
       children: [
-        {
-          _component: "##builtin/screenslot",
-          name: "Screenslot",
-          description:
-            "This component is a placeholder for the rendering of a screen within a page.",
-          icon: "ri-crop-2-fill",
-          commonProps: {},
-          children: [],
-        },
         {
           _component: "@budibase/standard-components/container",
           name: "Container",
@@ -222,6 +213,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              
             ],
           },
         },
@@ -248,21 +240,6 @@ export default {
           children: [],
           properties: { design: { ...all } },
         },
-        {
-          name: "Nav Bar",
-          _component: "@budibase/standard-components/Navigation",
-          description:
-            "A component for handling the navigation within your app.",
-          icon: "ri-navigation-fill",
-          children: [],
-          properties: { design: { ...all } },
-        },
-      ],
-    },
-    {
-      name: "Data",
-      isCategory: true,
-      children: [
         {
           name: "Table",
           description: "A component that generates a table from your data.",
@@ -283,22 +260,6 @@ export default {
           },
           children: [],
         },
-        {
-          _component: "@budibase/standard-components/datatable",
-          name: "DataTable",
-          description: "A table for displaying data from the backend.",
-          icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
-        {
-          _component: "@budibase/standard-components/dataform",
-          name: "DataForm",
-          description: "Form stuff",
-          icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
-          children: [],
-        },
         {
           name: "Chart",
           _component: "@budibase/standard-components/datachart",
@@ -325,5 +286,29 @@ export default {
         },
       ],
     },
+    {
+      name: "Layouts",
+      isCategory: true,
+      children: [
+        {
+          _component: "##builtin/screenslot",
+          name: "Screenslot",
+          description:
+            "This component is a placeholder for the rendering of a screen within a page.",
+          icon: "ri-crop-2-fill",
+          commonProps: {},
+          children: [],
+        },
+        {
+          name: "Nav Bar",
+          _component: "@budibase/standard-components/Navigation",
+          description:
+            "A component for handling the navigation within your app.",
+          icon: "ri-navigation-fill",
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
+    },
   ],
 }

From a674094f20823e775a1880588189d6f513371322 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 27 May 2020 13:25:19 +0100
Subject: [PATCH 5/5] Update temporaryPanelStructure.js

---
 .../src/components/userInterface/temporaryPanelStructure.js      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index f27b3c7788..072bc143ac 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -213,7 +213,6 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
-              
             ],
           },
         },