btcpayserver/app
btcpayserver/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Onboarding carousel updates

Browse Source
This commit is contained in:
Dennis Reimann 2023-08-23 17:47:06 +02:00
parent 1571455393
commit 5ccbf51d7d
No known key found for this signature in database
GPG Key ID: 5009E1797F03F8D0
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
BTCPayApp.UI/Shared/Onboarding.razor
View File

@ -1,30 +1,30 @@
@using BTCPayApp.UI.Pages
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
<MudCarousel Class="mx-auto" Style="height:400px;max-width:400px" ShowArrows="@false" ShowBullets="@true" EnableSwipeGesture="@true" AutoCycle="@false" @bind-SelectedIndex="@Step" TData="object">
<MudCarousel Class="mx-auto" ShowArrows="@false" AutoCycle="@false" @bind-SelectedIndex="@Step" TData="object" id="OnboardingCarousel">
<MudCarouselItem Transition="@Transition.Slide">
<div class="d-flex flex-column gap-4" style="height:calc(100% - 4rem)">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Material.Filled.Wallet" Color="@Color.Primary" Size="@Size.Large" />
<MudContainer MaxWidth="MaxWidth.ExtraSmall" Class="d-flex flex-column gap-4" Style="height:calc(100% - 4rem)">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Material.Filled.Wallet" Color="@Color.Primary" Size="@Size.Large"/>
<MudText Typo="Typo.h5" Align="Align.Center">Welcome To BTCPay Server</MudText>
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="flex-grow-1">
No fees, no third-party.
All payments go through your node, running on your phone!
</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => GoToStep(1))">Next</MudButton>
</div>
<MudButton Size="Size.Large" Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => GoToStep(1))">Next</MudButton>
</MudContainer>
</MudCarouselItem>
<MudCarouselItem Transition="@Transition.Slide">
<div class="d-flex flex-column gap-4" style="height:calc(100% - 4rem)">
<MudContainer MaxWidth="MaxWidth.ExtraSmall" Class="d-flex flex-column gap-4" Style="height:calc(100% - 4rem)">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Material.Filled.Lock" Color="@Color.Primary" Size="@Size.Large" />
<MudText Typo="Typo.h5" Align="Align.Center">Keep your wallet and bitcoin secure, accounting and refunding</MudText>
<MudText Typo="Typo.h5" Align="Align.Center">Keep your wallet and bitcoin secure</MudText>
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="flex-grow-1">
Cloud backups, enhanced accounting functionality and ability to easily refund your customers
</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => GoToStep(2))">Next</MudButton>
</div>
<MudButton Size="Size.Large" Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => GoToStep(2))">Next</MudButton>
</MudContainer>
</MudCarouselItem>
<MudCarouselItem Transition="@Transition.Slide">
<div class="d-flex flex-column gap-4" style="height:calc(100% - 4rem)">
<MudContainer MaxWidth="MaxWidth.ExtraSmall" Class="d-flex flex-column gap-4" Style="height:calc(100% - 4rem)">
<MudIcon Class="mx-auto my-auto" Icon="@Icons.Material.Filled.AutoAwesome" Color="@Color.Primary" Size="@Size.Large" />
<MudText Typo="Typo.h5" Align="Align.Center">Start Accepting Bitcoin Payments</MudText>
<MudText Typo="Typo.subtitle1" Align="Align.Center" Class="flex-grow-1">
@ -32,7 +32,7 @@
</MudText>
<MudButton Size="Size.Large" Variant="Variant.Filled" Color="Color.Primary" Href="@Routes.Pair" id="btn-pair">Pair with BTCPay Server</MudButton>
<MudButton Size="Size.Large" Variant="Variant.Filled" Color="Color.Primary" Href="@Routes.Standalone" Disabled="true" id="btn-standalone">Use standalone</MudButton>
</div>
</MudContainer>
</MudCarouselItem>
</MudCarousel>

16
BTCPayApp.UI/wwwroot/css/site.css
View File

@ -26,3 +26,19 @@
.blazor-error-boundary::after {
content: "An error has occurred."
}
@media (min-width: 0px) {
#OnboardingCarousel {
min-height: 430px;
}
}
@media (min-width: 320px) {
#OnboardingCarousel {
min-height: 410px;
}
}
@media (min-width: 480px) {
#OnboardingCarousel {
min-height: 350px;
}
}