Merge pull request #260 from Budibase/WIP---Frontend-Components-Blocks-UI

Component items ui updated

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) {

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -52,32 +52,9 @@
 </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/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 {

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -8,59 +8,48 @@
   </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: 120px;
+    height: 80px;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+    background-color: var(--grey-light);
+    border-radius: 3px;
   }
 
   .item-item:hover {
-    background: #fbfbfb;
+    background: var(--grey);
-    border-radius: 5px;
+    border-radius: 3px;
+    transition: all 0.2s;
   }
 
   .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

@@ -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-line",
-          commonProps: {},
-          children: [],
-        },
         {
           _component: "@budibase/standard-components/container",
           name: "Container",
@@ -119,7 +110,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 +118,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 +136,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 +157,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 +227,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 } },
         },
@@ -248,21 +239,6 @@ export default {
           children: [],
           properties: { design: { ...all } },
         },
-        {
-          name: "Navigation 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,27 +259,11 @@ 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",
           description: "Shiny chart",
-          icon: "ri-bar-chart-line",
+          icon: "ri-bar-chart-fill",
           properties: { design: { ...all } },
           children: [],
         },
@@ -311,7 +271,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,11 +279,35 @@ 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: [],
         },
       ],
     },
+    {
+      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 } },
+        },
+      ],
+    },
   ],
 }

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;
   }