Skip to content

Commit fe1c950

Browse files
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>
1 parent ba9d894 commit fe1c950

File tree

5 files changed

+24
-11
lines changed

5 files changed

+24
-11
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bnc-onboard",
3-
"version": "1.29.0-0.2.0",
3+
"version": "1.29.0-0.3.0",
44
"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.",
55
"keywords": [
66
"ethereum",

src/components/SelectedWallet.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@
3737
{/if}
3838

3939
<footer class="bn-onboard-custom bn-onboard-modal-selected-wallet-footer">
40+
<Button cta={false} onclick={onBack}>Back</Button>
4041
<a
4142
href={selectedWalletModule.link}
4243
rel="noreferrer noopener"
4344
target="_blank"
4445
>
4546
<Button>Open {selectedWalletModule.name}</Button>
4647
</a>
47-
<Button onclick={onBack}>Back</Button>
4848
</footer>
4949
</section>

src/elements/Button.svelte

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
export let onclick: () => void = () => {}
44
export let position: string = ''
55
export let disabled: boolean = false
6+
// If this is a CTA Button then we want to emphasize it
7+
export let cta: boolean = true
68
</script>
79

810
<style>
911
button {
12+
border: none;
1013
background: inherit;
1114
font-size: 0.889em;
1215
font-family: inherit;
13-
border: 1px solid #4a90e2;
14-
border-radius: 40px;
1516
padding: 0.55em 1.4em;
1617
cursor: pointer;
1718
color: #4a90e2;
@@ -25,9 +26,6 @@
2526
button:focus {
2627
outline: none;
2728
}
28-
button:hover {
29-
background: #ecf3fc;
30-
}
3129
3230
.bn-onboard-prepare-button-right {
3331
position: absolute;
@@ -44,12 +42,21 @@
4442
pointer-events: none;
4543
opacity: 0.4;
4644
}
45+
.cta {
46+
border: 1px solid #4a90e2;
47+
border-radius: 40px;
48+
}
49+
50+
.cta:hover {
51+
background: #ecf3fc;
52+
}
4753
</style>
4854

4955
<button
5056
on:click={onclick}
5157
{disabled}
5258
class:disabled
59+
class:cta
5360
class="bn-onboard-custom bn-onboard-prepare-button"
5461
class:bn-onboard-prepare-button-right={position === 'right'}
5562
class:bn-onboard-prepare-button-left={position === 'left'}

src/views/WalletCheck.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -349,12 +349,15 @@
349349

350350
<div class="bn-onboard-custom bn-onboard-prepare-button-container">
351351
{#if activeModal.button}
352-
<Button position="left" onclick={activeModal.button.onclick}>
352+
<Button position="right" onclick={activeModal.button.onclick}>
353353
{activeModal.button.text}
354354
</Button>
355355
{/if}
356356
{#if errorMsg}
357-
<Button position={!activeModal.button ? 'left' : ''} onclick={doAction}>
357+
<Button
358+
position={!activeModal.button ? 'right' : ''}
359+
onclick={doAction}
360+
>
358361
Try Again
359362
</Button>
360363
{:else}
@@ -363,7 +366,8 @@
363366
{#if loading}
364367
<Spinner />
365368
{/if}
366-
<Button position="right" onclick={() => handleExit(false)}>Dismiss</Button
369+
<Button position="left" onclick={() => handleExit(false)} cta={false}
370+
>Dismiss</Button
367371
>
368372
</div>
369373
</Modal>

src/views/WalletSelect.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,9 @@
328328
What is a wallet?
329329
</span>
330330
{#if mobileDevice}
331-
<Button onclick={() => finish({ completed: false })}>Dismiss</Button>
331+
<Button cta={false} onclick={() => finish({ completed: false })}
332+
>Dismiss</Button
333+
>
332334
{/if}
333335
</div>
334336
{#if showWalletDefinition}

0 commit comments

Comments
 (0)