add invite user button

This commit is contained in:
Peter Clement 2023-08-30 13:44:36 +01:00
parent adef9a17eb
commit 86c35a2266
2 changed files with 22 additions and 17 deletions

View File

@ -87,7 +87,7 @@
{selectedLabel || ""} {selectedLabel || ""}
</div> </div>
<div class="align"> <div class="align arrow-alignment">
<Icon name="ChevronDown" /> <Icon name="ChevronDown" />
</div> </div>
</FancyField> </FancyField>
@ -139,6 +139,10 @@
transition: transform 130ms ease-out, opacity 130ms ease-out; transition: transform 130ms ease-out, opacity 130ms ease-out;
transform: translateY(9px); transform: translateY(9px);
} }
.arrow-alignment {
transform: translateY(-2px);
}
.value.placeholder { .value.placeholder {
transform: translateY(0); transform: translateY(0);
opacity: 0; opacity: 0;

View File

@ -523,17 +523,22 @@
{/if} {/if}
<Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading> <Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
</div> </div>
<Icon <div class="header">
color="var(--spectrum-global-color-gray-600)" <Button on:click={() => (invitingFlow = true)} size="S" cta
name="RailRightClose" >Invite user</Button
hoverable >
on:click={() => { <Icon
store.update(state => { color="var(--spectrum-global-color-gray-600)"
state.builderSidePanel = false name="RailRightClose"
return state hoverable
}) on:click={() => {
}} store.update(state => {
/> state.builderSidePanel = false
return state
})
}}
/>
</div>
</div> </div>
{#if !invitingFlow} {#if !invitingFlow}
<div class="search" class:focused={searchFocus}> <div class="search" class:focused={searchFocus}>
@ -555,15 +560,11 @@
class="search-input-icon" class="search-input-icon"
class:searching={query || !filterByAppAccess} class:searching={query || !filterByAppAccess}
on:click={() => { on:click={() => {
if (!filterByAppAccess) {
filterByAppAccess = true
}
if (!query) { if (!query) {
return return
} }
query = null query = null
userOnboardResponse = null userOnboardResponse = null
filterByAppAccess = true
}} }}
> >
<Icon name={!filterByAppAccess || query ? "Close" : "Search"} /> <Icon name={!filterByAppAccess || query ? "Close" : "Search"} />
@ -800,7 +801,7 @@
<Button <Button
newStyles newStyles
cta cta
disabled={!query.length && !email?.length} disabled={!email?.length}
on:click={onInviteUser}>Add user</Button on:click={onInviteUser}>Add user</Button
> >
</span> </span>