From 86c35a2266ad79e6eb6916fbcb78eb34c25c2b0c Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 30 Aug 2023 13:44:36 +0100
Subject: [PATCH] add invite user button

---
 .../bbui/src/FancyForm/FancySelect.svelte     |  6 +++-
 .../_components/BuilderSidePanel.svelte       | 33 ++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
index 811b53c2be..e015f51570 100644
--- a/packages/bbui/src/FancyForm/FancySelect.svelte
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -87,7 +87,7 @@
     {selectedLabel || ""}
   </div>
 
-  <div class="align">
+  <div class="align arrow-alignment">
     <Icon name="ChevronDown" />
   </div>
 </FancyField>
@@ -139,6 +139,10 @@
     transition: transform 130ms ease-out, opacity 130ms ease-out;
     transform: translateY(9px);
   }
+
+  .arrow-alignment {
+    transform: translateY(-2px);
+  }
   .value.placeholder {
     transform: translateY(0);
     opacity: 0;
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index b9993b4653..a832be83f6 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -523,17 +523,22 @@
       {/if}
       <Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
     </div>
-    <Icon
-      color="var(--spectrum-global-color-gray-600)"
-      name="RailRightClose"
-      hoverable
-      on:click={() => {
-        store.update(state => {
-          state.builderSidePanel = false
-          return state
-        })
-      }}
-    />
+    <div class="header">
+      <Button on:click={() => (invitingFlow = true)} size="S" cta
+        >Invite user</Button
+      >
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={() => {
+          store.update(state => {
+            state.builderSidePanel = false
+            return state
+          })
+        }}
+      />
+    </div>
   </div>
   {#if !invitingFlow}
     <div class="search" class:focused={searchFocus}>
@@ -555,15 +560,11 @@
         class="search-input-icon"
         class:searching={query || !filterByAppAccess}
         on:click={() => {
-          if (!filterByAppAccess) {
-            filterByAppAccess = true
-          }
           if (!query) {
             return
           }
           query = null
           userOnboardResponse = null
-          filterByAppAccess = true
         }}
       >
         <Icon name={!filterByAppAccess || query ? "Close" : "Search"} />
@@ -800,7 +801,7 @@
             <Button
               newStyles
               cta
-              disabled={!query.length && !email?.length}
+              disabled={!email?.length}
               on:click={onInviteUser}>Add user</Button
             >
           </span>