Make publish button CTA and tidy up alignment

This commit is contained in:
Andrew Kingston 2022-04-25 14:58:41 +01:00
parent e6f68943ba
commit b9a2d96765
2 changed files with 27 additions and 29 deletions

View File

@ -58,7 +58,7 @@
}
</script>
<Button secondary on:click={publishModal.show}>Publish</Button>
<Button cta on:click={publishModal.show}>Publish</Button>
<Modal bind:this={feedbackModal}>
<ModalContent
title="Enjoying Budibase?"
@ -96,33 +96,31 @@
</Modal>
<!-- Publish complete -->
<span class="publish-modal-wrap">
<Modal bind:this={publishCompleteModal}>
<ModalContent
confirmText="Done"
cancelText="View App"
onCancel={viewApp}
dataCy={"deploy-app-success-modal"}
>
<div slot="header" class="app-published-header">
<svg
width="26px"
height="26px"
class="spectrum-Icon success-icon"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-GlobeCheck" />
</svg>
<span class="app-published-header-text">App Published!</span>
</div>
<CopyInput
value={publishedUrl}
label="You can view your app at:"
dataCy="deployed-app-url"
/>
</ModalContent>
</Modal>
</span>
<Modal bind:this={publishCompleteModal}>
<ModalContent
confirmText="Done"
cancelText="View App"
onCancel={viewApp}
dataCy={"deploy-app-success-modal"}
>
<div slot="header" class="app-published-header">
<svg
width="26px"
height="26px"
class="spectrum-Icon success-icon"
focusable="false"
>
<use xlink:href="#spectrum-icon-18-GlobeCheck" />
</svg>
<span class="app-published-header-text">App Published!</span>
</div>
<CopyInput
value={publishedUrl}
label="You can view your app at:"
dataCy="deployed-app-url"
/>
</ModalContent>
</Modal>
<style>
.app-published-header {

View File

@ -35,7 +35,7 @@
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
padding: var(--spacing-l) 24px;
padding: var(--spacing-l) var(--spacing-xl);
}
.header {
display: flex;