1
0
Fork 0
mirror of synced 2024-10-02 01:56:57 +13:00

Make publish button CTA and tidy up alignment

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

View file

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

View file

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