From f417c2d8a4d96cc958ecb3a35281030cfe6c1f2c Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:28:35 +0000
Subject: [PATCH] Joe's lab day minor updates (#12944)

* Change default button type to CTA

- change default button type to CTA
- change ordering of types/variants

* Fix layout shift within portal

Within the portal, when navigating from screen to screen, there's a slight layout shift caused by the scrollbar. This is a small fix.

* row/column icons change

The current row/column icons for positioning components are confusing. I believe these icons are easier to understand.

* Fix for horizontal scrollbar showing

When adding/removing actions within automations, the horizontal scrollbar flashes. Fix.

* Title change for Upload data

Upload data is not wrong, but it's best to be explicit.

* Increase size of upgrade button

* small fix for the styling inconsistency

* Dianostics padding fix

* lint fix

* update account-portal

* update icons

---------

Co-authored-by: melohagan <101575380+melohagan@users.noreply.github.com>
Co-authored-by: Mel O'Hagan <mel@budibase.com>
---
 packages/bbui/src/Layout/Page.svelte          |  1 +
 packages/bbui/src/Typography/Body.svelte      |  6 +++++
 packages/bbui/src/Typography/Heading.svelte   |  4 +++
 .../FlowChart/FlowChart.svelte                |  1 +
 .../builder/app/[application]/data/new.svelte |  2 +-
 .../portal/_components/UpgradeButton.svelte   |  4 +--
 .../portal/settings/diagnostics.svelte        |  9 ++++---
 packages/client/manifest.json                 | 26 +++++++++----------
 .../client/src/components/app/Button.svelte   |  2 +-
 9 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index 57c264231b..2169a12459 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -43,6 +43,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: stretch;
+    overflow-y: scroll !important;
     flex: 1 1 auto;
     overflow-x: hidden;
   }
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
index 71b4dca248..2123eeee95 100644
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -20,3 +20,9 @@
 >
   <slot />
 </p>
+
+<style>
+  p {
+    text-wrap: pretty;
+  }
+</style>
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index c0d0571143..50522fffc3 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -21,4 +21,8 @@
   h1 {
     font-family: var(--font-accent);
   }
+
+  h1 {
+    text-wrap: balance;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 4c458a5627..1ace6c0f00 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -130,6 +130,7 @@
     flex-grow: 1;
     padding: 23px 23px 80px;
     box-sizing: border-box;
+    overflow-x: hidden;
   }
 
   .header.scrolling {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index c07a9f563d..20efd3667b 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -77,7 +77,7 @@
     </DatasourceOption>
     <DatasourceOption
       on:click={() => internalTableModal.show({ promptUpload: true })}
-      title="Upload data"
+      title="Upload CSV / JSON"
       description="Non-relational"
       {disabled}
     >
diff --git a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
index b12efd6f03..59a791538a 100644
--- a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte
@@ -10,7 +10,7 @@
   {#if $admin.cloud && $auth?.user?.accountPortalAccess}
     <Button
       cta
-      size="S"
+      size="M"
       on:click
       on:click={() => {
         window.open($admin.accountPortalUrl + "/portal/upgrade", "_blank")
@@ -21,7 +21,7 @@
   {:else if !$admin.cloud && sdk.users.isAdmin($auth.user)}
     <Button
       cta
-      size="S"
+      size="M"
       on:click={() => $goto("/builder/portal/account/upgrade")}
       on:click
     >
diff --git a/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte b/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
index 3442d39a68..8cc35903e1 100644
--- a/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/diagnostics.svelte
@@ -49,10 +49,13 @@
 
 {#if sdk.users.isAdmin($auth.user) && diagnosticInfo}
   <Layout noPadding>
-    <Layout gap="XS">
+    <Layout gap="XS" noPadding>
       <Heading size="M">Diagnostics</Heading>
-      Please include this diagnostic information in support requests and github issues
-      by clicking the button on the top right to copy to clipboard.
+      <Body>
+        Please include this diagnostic information in support requests and
+        github issues by clicking the button on the top right to copy to
+        clipboard.
+      </Body>
       <Divider />
       <Body size="M">
         <section>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7faf7a02e2..43b75ebe26 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -89,13 +89,13 @@
           {
             "label": "Column",
             "value": "column",
-            "barIcon": "ViewColumn",
+            "barIcon": "TableSelectColumn",
             "barTitle": "Column layout"
           },
           {
             "label": "Row",
             "value": "row",
-            "barIcon": "ViewRow",
+            "barIcon": "TableSelectRow",
             "barTitle": "Row layout"
           }
         ],
@@ -298,13 +298,13 @@
               {
                 "label": "Column",
                 "value": "column",
-                "barIcon": "ViewColumn",
+                "barIcon": "TableSelectColumn",
                 "barTitle": "Column layout"
               },
               {
                 "label": "Row",
                 "value": "row",
-                "barIcon": "ViewRow",
+                "barIcon": "TableSelectRow",
                 "barTitle": "Row layout"
               }
             ],
@@ -460,6 +460,10 @@
         "label": "Variant",
         "key": "type",
         "options": [
+          {
+            "label": "Action",
+            "value": "cta"
+          },
           {
             "label": "Primary",
             "value": "primary"
@@ -468,10 +472,6 @@
             "label": "Secondary",
             "value": "secondary"
           },
-          {
-            "label": "Action",
-            "value": "cta"
-          },
           {
             "label": "Warning",
             "value": "warning"
@@ -481,7 +481,7 @@
             "value": "overBackground"
           }
         ],
-        "defaultValue": "primary"
+        "defaultValue": "cta"
       },
       {
         "type": "select",
@@ -602,13 +602,13 @@
           {
             "label": "Column",
             "value": "column",
-            "barIcon": "ViewColumn",
+            "barIcon": "TableSelectColumn",
             "barTitle": "Column layout"
           },
           {
             "label": "Row",
             "value": "row",
-            "barIcon": "ViewRow",
+            "barIcon": "TableSelectRow",
             "barTitle": "Row layout"
           }
         ],
@@ -5917,13 +5917,13 @@
               {
                 "label": "Column",
                 "value": "column",
-                "barIcon": "ViewRow",
+                "barIcon": "TableSelectColumn",
                 "barTitle": "Column layout"
               },
               {
                 "label": "Row",
                 "value": "row",
-                "barIcon": "ViewColumn",
+                "barIcon": "TableSelectRow",
                 "barTitle": "Row layout"
               }
             ],
diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index a074986342..361e64a983 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -11,7 +11,7 @@
   export let text = ""
   export let onClick
   export let size = "M"
-  export let type = "primary"
+  export let type = "cta"
   export let quiet = false
 
   // For internal use only for now - not defined in the manifest