UI/UX code review changes

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

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;
+    opacity: 1;
-    flex-direction: column;
   }
 
   .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;
   }

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
+      <ActionGroup>
-        on:click={() => {
+        <ActionButton
-          selectedTemplateCategory = null
+          selected={!selectedTemplateCategory}
-        }}
-        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
           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>
+          All
-        </button>
+        </ActionButton>
-      {/each}
+        {#each templateCategories as templateCategoryKey}
+          <ActionButton
+            selected={templateCategoryKey == selectedTemplateCategory}
+            on:click={() => {
+              selectedTemplateCategory = templateCategoryKey
+            }}
+          >
+            {templateCategoryKey}
+          </ActionButton>
+        {/each}
+      </ActionGroup>
     </div>
   </Layout>
 </div>

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
+        Back
-      </Link>
+      </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}

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

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
+        Back
-      </Link>
+      </Button>
     </span>
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />