Merge pull request #353 from blocknative/enhancement/modal-button-styles

Enhancement: Modal Button Styles

Author: lnbc1QWFyb24

src/components/Modal.svelte

@@ -52,7 +52,7 @@
   div {
     height: 0.66em;
     position: absolute;
-    padding: 0.8em;
+    padding: 0.25em;
     top: 1.33em;
     right: 1.33em;
     font-size: inherit;

src/elements/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { app } from '../stores'
   export let onclick: () => void = () => {}
+  export let position: string
 </script>
 
 <style>
@@ -24,11 +25,22 @@
   button:hover {
     background: #ecf3fc;
   }
+
+  .bn-onboard-prepare-button-right {
+    position: absolute;
+    right: 0;
+  }
+
+  .bn-onboard-prepare-button-left {
+    position: absolute;
+    left: 0;
+  }
 </style>
 
 <button
   on:click={onclick}
-  class="bn-onboard-custom bn-onboard-button"
+  class:bn-onboard-prepare-button-right={position === 'right'}
+  class:bn-onboard-prepare-button-left={position === 'left'}
   class:bn-onboard-dark-mode-link={$app.darkMode}
   class:bn-onboard-dark-mode-background-hover={$app.darkMode}>
   <slot />

src/views/WalletCheck.svelte

@@ -103,10 +103,11 @@
       }) => {
         // no result then user has passed all conditions
         if (!result.modal) {
-          blocknative && blocknative.event({
-            categoryCode: 'onboard',
-            eventCode: 'onboardingCompleted'
-          })
+          blocknative &&
+            blocknative.event({
+              categoryCode: 'onboard',
+              eventCode: 'onboardingCompleted'
+            })
 
           handleExit(true)
 
@@ -120,10 +121,11 @@
         currentModule = result.module
 
         // log the event code for this module
-        blocknative && blocknative.event({
-          eventCode: activeModal.eventCode,
-          categoryCode: 'onboard'
-        })
+        blocknative &&
+          blocknative.event({
+            eventCode: activeModal.eventCode,
+            categoryCode: 'onboard'
+          })
 
         // run any actions that module require as part of this step
         if (activeModal.action) {
@@ -295,7 +297,10 @@
   /* .bn-onboard-prepare-button-container */
   div {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    align-items: center;
+    min-height: 2.5rem;
+    position: relative;
   }
 
   section {
@@ -336,19 +341,23 @@
 
     <div class="bn-onboard-custom bn-onboard-prepare-button-container">
       {#if activeModal.button}
-        <Button onclick={activeModal.button.onclick}>
+        <Button position="left" onclick={activeModal.button.onclick}>
           {activeModal.button.text}
         </Button>
       {/if}
       {#if errorMsg}
-        <Button onclick={doAction}>Try Again</Button>
+        <Button position={!activeModal.button && 'left'} onclick={doAction}>
+          Try Again
+        </Button>
       {:else}
         <div />
       {/if}
       {#if loading}
         <Spinner />
       {/if}
-      <Button onclick={() => handleExit(false)}>Dismiss</Button>
+      <Button position="right" onclick={() => handleExit(false)}>
+        Dismiss
+      </Button>
     </div>
   </Modal>
 {/if}