From 52d43c07812b774707cb770582af367ad97455c8 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 25 Mar 2022 09:43:28 +0000
Subject: [PATCH] UI/UX code review changes

---
 packages/bbui/src/Button/Button.svelte        |  2 +
 .../src/components/common/TemplateCard.svelte | 14 ++++--
 .../components/common/TemplateDisplay.svelte  | 50 ++++++++++---------
 .../pages/builder/portal/apps/create.svelte   | 20 +++++---
 .../pages/builder/portal/apps/index.svelte    |  9 +++-
 .../builder/portal/apps/templates.svelte      |  9 ++--
 6 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index a3d2df069a..e8f6b4500e 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -13,6 +13,7 @@
   export let icon = undefined
   export let active = false
   export let tooltip = undefined
+  export let dataCy
 
   let showTooltip = false
 </script>
@@ -27,6 +28,7 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
+  data-cy={dataCy}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
index dc8cdc9610..ab2e874b55 100644
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -37,7 +37,11 @@
         <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
     </div>
-    <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
+    <div
+      class={overlayEnabled && imageLoaded
+        ? "template-thumbnail-action-overlay"
+        : ""}
+    >
       <slot />
     </div>
   </div>
@@ -52,8 +56,7 @@
   }
 
   .template-card:hover .template-thumbnail-action-overlay {
-    display: flex;
-    flex-direction: column;
+    opacity: 1;
   }
 
   .template-thumbnail-action-overlay {
@@ -62,10 +65,13 @@
     left: 0px;
     width: 100%;
     height: 70%;
-    display: none;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: opacity var(--spectrum-global-animation-duration-100) ease;
     border-top-right-radius: inherit;
     border-top-left-radius: inherit;
   }
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
index f7954788b6..facefd1cbc 100644
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -1,5 +1,13 @@
 <script>
-  import { Layout, Detail, Heading, Button, Modal } from "@budibase/bbui"
+  import {
+    Layout,
+    Detail,
+    Heading,
+    Button,
+    Modal,
+    ActionGroup,
+    ActionButton,
+  } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
 
@@ -46,34 +54,30 @@
   }
 </script>
 
-<div class="template-category-filters">
+<div class="template-header">
   <Layout noPadding gap="S">
     <Heading size="S">Templates</Heading>
-
     <div class="template-category-filters spectrum-ActionGroup">
-      <button
-        on:click={() => {
-          selectedTemplateCategory = null
-        }}
-        class="template-category-filter-all template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
-            spectrum-ActionGroup-item {!selectedTemplateCategory ||
-          'is-selected'}"
-      >
-        <span class="spectrum-ActionButton-label">All</span>
-      </button>
-
-      {#each templateCategories as templateCategoryKey}
-        <button
+      <ActionGroup>
+        <ActionButton
+          selected={!selectedTemplateCategory}
           on:click={() => {
-            selectedTemplateCategory = templateCategoryKey
+            selectedTemplateCategory = null
           }}
-          class="template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
-            spectrum-ActionGroup-item {templateCategoryKey ==
-            selectedTemplateCategory || 'is-selected'}"
         >
-          <span class="spectrum-ActionButton-label">{templateCategoryKey}</span>
-        </button>
-      {/each}
+          All
+        </ActionButton>
+        {#each templateCategories as templateCategoryKey}
+          <ActionButton
+            selected={templateCategoryKey == selectedTemplateCategory}
+            on:click={() => {
+              selectedTemplateCategory = templateCategoryKey
+            }}
+          >
+            {templateCategoryKey}
+          </ActionButton>
+        {/each}
+      </ActionGroup>
     </div>
   </Layout>
 </div>
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index f866aae267..697af7cb2b 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -9,7 +9,6 @@
     Body,
     Modal,
     Divider,
-    Link,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
@@ -61,15 +60,16 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Link
+      <Button
         quiet
         secondary
+        icon={"ChevronLeft"}
         on:click={() => {
           $goto("../")
         }}
       >
-        &lt;&nbsp;Back
-      </Link>
+        Back
+      </Button>
     </span>
 
     <div class="title">
@@ -82,10 +82,17 @@
         </Layout>
 
         <div class="buttons">
-          <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+          <Button
+            dataCy="create-app-btn"
+            size="L"
+            icon="Add"
+            cta
+            on:click={initiateAppCreation}
+          >
             {createAppButtonText}
           </Button>
           <Button
+            dataCy="import-app-btn"
             icon="Import"
             size="L"
             quiet
@@ -96,9 +103,10 @@
           </Button>
         </div>
       </div>
-      <Divider size="S" />
     </div>
 
+    <Divider size="S" />
+
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />
     {/if}
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 58a86acc65..b024afa1c7 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -299,7 +299,13 @@
           </Layout>
 
           <div class="buttons">
-            <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+            <Button
+              dataCy="create-app-btn"
+              size="L"
+              icon="Add"
+              cta
+              on:click={initiateAppCreation}
+            >
               {createAppButtonText}
             </Button>
             {#if $apps?.length > 0}
@@ -315,6 +321,7 @@
             {/if}
             {#if !$apps?.length}
               <Button
+                dataCy="import-app-btn"
                 icon="Import"
                 size="L"
                 quiet
diff --git a/packages/builder/src/pages/builder/portal/apps/templates.svelte b/packages/builder/src/pages/builder/portal/apps/templates.svelte
index cfcd2d6354..93b4a6d257 100644
--- a/packages/builder/src/pages/builder/portal/apps/templates.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, Link } from "@budibase/bbui"
+  import { Layout, Page, notifications, Button } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
@@ -25,15 +25,16 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Link
+      <Button
         quiet
         secondary
+        icon={"ChevronLeft"}
         on:click={() => {
           $goto("../")
         }}
       >
-        &lt;&nbsp;Back
-      </Link>
+        Back
+      </Button>
     </span>
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />