1.29.0-0.3.0: [refactor] Move cta buttons (#609)

* 1.29.0-0.2.0: Move CTA, Enter btn, Preferred

* version bump

* Fix formatting

* Refactors CTA buttons

* Verion bump + revert prettier config chang

* Remove test file

Co-authored-by: Aaron Barnard <abarnard@protonmail.com>

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.29.0-0.2.0",
+  "version": "1.29.0-0.3.0",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",

src/components/SelectedWallet.svelte

@@ -37,13 +37,13 @@
   {/if}
 
   <footer class="bn-onboard-custom bn-onboard-modal-selected-wallet-footer">
+    <Button cta={false} onclick={onBack}>Back</Button>
     <a
       href={selectedWalletModule.link}
       rel="noreferrer noopener"
       target="_blank"
     >
       <Button>Open {selectedWalletModule.name}</Button>
     </a>
-    <Button onclick={onBack}>Back</Button>
   </footer>
 </section>

src/elements/Button.svelte

@@ -3,15 +3,16 @@
   export let onclick: () => void = () => {}
   export let position: string = ''
   export let disabled: boolean = false
+  // If this is a CTA Button then we want to emphasize it
+  export let cta: boolean = true
 </script>
 
 <style>
   button {
+    border: none;
     background: inherit;
     font-size: 0.889em;
     font-family: inherit;
-    border: 1px solid #4a90e2;
-    border-radius: 40px;
     padding: 0.55em 1.4em;
     cursor: pointer;
     color: #4a90e2;
@@ -25,9 +26,6 @@
   button:focus {
     outline: none;
   }
-  button:hover {
-    background: #ecf3fc;
-  }
 
   .bn-onboard-prepare-button-right {
     position: absolute;
@@ -44,12 +42,21 @@
     pointer-events: none;
     opacity: 0.4;
   }
+  .cta {
+    border: 1px solid #4a90e2;
+    border-radius: 40px;
+  }
+
+  .cta:hover {
+    background: #ecf3fc;
+  }
 </style>
 
 <button
   on:click={onclick}
   {disabled}
   class:disabled
+  class:cta
   class="bn-onboard-custom bn-onboard-prepare-button"
   class:bn-onboard-prepare-button-right={position === 'right'}
   class:bn-onboard-prepare-button-left={position === 'left'}

src/views/WalletCheck.svelte

@@ -349,12 +349,15 @@
 
     <div class="bn-onboard-custom bn-onboard-prepare-button-container">
       {#if activeModal.button}
-        <Button position="left" onclick={activeModal.button.onclick}>
+        <Button position="right" onclick={activeModal.button.onclick}>
           {activeModal.button.text}
         </Button>
       {/if}
       {#if errorMsg}
-        <Button position={!activeModal.button ? 'left' : ''} onclick={doAction}>
+        <Button
+          position={!activeModal.button ? 'right' : ''}
+          onclick={doAction}
+        >
           Try Again
         </Button>
       {:else}
@@ -363,7 +366,8 @@
       {#if loading}
         <Spinner />
       {/if}
-      <Button position="right" onclick={() => handleExit(false)}>Dismiss</Button
+      <Button position="left" onclick={() => handleExit(false)} cta={false}
+        >Dismiss</Button
       >
     </div>
   </Modal>

src/views/WalletSelect.svelte

@@ -328,7 +328,9 @@
           What is a wallet?
         </span>
         {#if mobileDevice}
-          <Button onclick={() => finish({ completed: false })}>Dismiss</Button>
+          <Button cta={false} onclick={() => finish({ completed: false })}
+            >Dismiss</Button
+          >
         {/if}
       </div>
       {#if showWalletDefinition}