Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design system and icon updates for 2.0 #5938

Merged
merged 8 commits into from
May 19, 2024
Merged

Design system and icon updates for 2.0 #5938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
23116dd
Design system updates
dennisreimann May 14, 2024
d6ab267
Icon fix
dennisreimann May 14, 2024
4f4c7bb
Add new icons, replace show/hide
dennisreimann May 16, 2024
20c0d3c
Icon replacements
dennisreimann May 16, 2024
1113c33
Test fix
dennisreimann May 16, 2024
13e12c0
Icon replacements in Vault
dennisreimann May 16, 2024
5d7c95d
More icon replacements
dennisreimann May 16, 2024
a92cca6
Final icon replacements, remove Font Awesome
dennisreimann May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions BTCPayServer.Tests/SeleniumTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ public async Task CanUseLndSeedBackup()
s.Driver.FindElement(By.Id("details")).Click();
var seedEl = s.Driver.FindElement(By.Id("Seed"));
Assert.True(seedEl.Displayed);
Assert.Contains("about over million", seedEl.Text, StringComparison.OrdinalIgnoreCase);
Assert.Contains("about over million", seedEl.GetAttribute("value"), StringComparison.OrdinalIgnoreCase);
var passEl = s.Driver.FindElement(By.Id("WalletPassword"));
Assert.True(passEl.Displayed);
Assert.Contains(passEl.Text, "hellorockstar", StringComparison.OrdinalIgnoreCase);
Expand Down Expand Up @@ -1672,8 +1672,8 @@ public async Task CanUseWebhooks()
var elements = s.Driver.FindElements(By.ClassName("redeliver"));

// One worked, one failed
s.Driver.FindElement(By.ClassName("fa-times"));
s.Driver.FindElement(By.ClassName("fa-check"));
s.Driver.FindElement(By.ClassName("icon-cross"));
s.Driver.FindElement(By.ClassName("icon-checkmark"));
elements[0].Click();

s.FindAlertMessage();
Expand Down
30 changes: 0 additions & 30 deletions BTCPayServer/BTCPayServer.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,36 +83,6 @@

<ItemGroup>
<None Include="Views\UIReports\StoreReports.cshtml" />
<None Include="wwwroot\vendor\font-awesome\fonts\fontawesome-webfont.svg" />
<None Include="wwwroot\vendor\font-awesome\fonts\fontawesome-webfont.woff2" />
<None Include="wwwroot\vendor\font-awesome\less\animated.less" />
<None Include="wwwroot\vendor\font-awesome\less\bordered-pulled.less" />
<None Include="wwwroot\vendor\font-awesome\less\core.less" />
<None Include="wwwroot\vendor\font-awesome\less\fixed-width.less" />
<None Include="wwwroot\vendor\font-awesome\less\font-awesome.less" />
<None Include="wwwroot\vendor\font-awesome\less\icons.less" />
<None Include="wwwroot\vendor\font-awesome\less\larger.less" />
<None Include="wwwroot\vendor\font-awesome\less\list.less" />
<None Include="wwwroot\vendor\font-awesome\less\mixins.less" />
<None Include="wwwroot\vendor\font-awesome\less\path.less" />
<None Include="wwwroot\vendor\font-awesome\less\rotated-flipped.less" />
<None Include="wwwroot\vendor\font-awesome\less\screen-reader.less" />
<None Include="wwwroot\vendor\font-awesome\less\stacked.less" />
<None Include="wwwroot\vendor\font-awesome\less\variables.less" />
<None Include="wwwroot\vendor\font-awesome\scss\font-awesome.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_animated.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_bordered-pulled.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_core.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_fixed-width.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_icons.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_larger.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_list.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_mixins.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_path.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_rotated-flipped.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_screen-reader.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_stacked.scss" />
<None Include="wwwroot\vendor\font-awesome\scss\_variables.scss" />
<None Include="wwwroot\vendor\jquery\jquery.js" />
<None Include="wwwroot\vendor\jquery\jquery.min.js" />
</ItemGroup>
Expand Down
8 changes: 5 additions & 3 deletions BTCPayServer/Blazor/NotificationsDropDown.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
@if (UnseenCount == "0")
{
<a href="@NotificationsUrl" id="NotificationsHandle" class="mainMenuButton" title="Notifications">
<Icon Symbol="notifications" />
<Icon Symbol="nav-notifications" />
</a>
}
else
{
<button id="NotificationsHandle" class="mainMenuButton" title="Notifications" type="button" data-bs-toggle="dropdown">
<Icon Symbol="notifications" />
<Icon Symbol="nav-notifications" />
<span class="badge rounded-pill bg-danger p-1 ms-1" id="NotificationsBadge">@UnseenCount</span>
</button>
}
Expand Down Expand Up @@ -149,7 +149,9 @@
"external-payout-transaction" => "notifications-payout",
"payout_awaitingapproval" => "notifications-payout",
"payout_awaitingpayment" => "notifications-payout-approved",
"newversion" => "notifications-new-version",
"inviteaccepted" => "notifications-account",
"newuserrequiresapproval" => "notifications-account",
"newversion" => "notifications-new-version",
_ => "note"
};
}
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Components/Icon/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@model BTCPayServer.Components.Icon.IconViewModel

<svg role="img" class="icon icon-@Model.Symbol">
<svg role="img" class="icon icon-@Model.Symbol @Model.CssClass">
<use href="~/img/icon-sprite.svg#@Model.Symbol"></use>
</svg>
18 changes: 9 additions & 9 deletions BTCPayServer/Components/Icon/Icon.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
using Microsoft.AspNetCore.Mvc;

namespace BTCPayServer.Components.Icon
namespace BTCPayServer.Components.Icon;

public class Icon : ViewComponent
{
public class Icon : ViewComponent
public IViewComponentResult Invoke(string symbol, string cssClass = null)
{
public IViewComponentResult Invoke(string symbol)
var vm = new IconViewModel
{
var vm = new IconViewModel
{
Symbol = symbol
};
return View(vm);
}
Symbol = symbol,
CssClass = cssClass
};
return View(vm);
}
}
10 changes: 4 additions & 6 deletions BTCPayServer/Components/Icon/IconViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
using System.Collections.Generic;
namespace BTCPayServer.Components.Icon;

namespace BTCPayServer.Components.Icon
public class IconViewModel
{
public class IconViewModel
{
public string Symbol { get; set; }
}
public string Symbol { get; set; }
public string CssClass { get; set; }
}
22 changes: 11 additions & 11 deletions BTCPayServer/Components/MainNav/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@
<ul class="navbar-nav">
<li class="nav-item" permission="@Policies.CanModifyStoreSettings">
<a asp-area="" asp-controller="UIStores" asp-action="Dashboard" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Dashboard)" id="StoreNav-Dashboard">
<vc:icon symbol="home"/>
<vc:icon symbol="nav-dashboard"/>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item" permission="@Policies.CanViewStoreSettings">
<a asp-area="" asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(new [] {StoreNavPages.Rates, StoreNavPages.CheckoutAppearance, StoreNavPages.General, StoreNavPages.Tokens, StoreNavPages.Users, StoreNavPages.Webhooks, StoreNavPages.PayoutProcessors, StoreNavPages.Emails})" id="StoreNav-StoreSettings">
<vc:icon symbol="settings"/>
<vc:icon symbol="nav-store-settings"/>
<span>Settings</span>
</a>
</li>
Expand Down Expand Up @@ -113,25 +113,25 @@
<ul class="navbar-nav">
<li class="nav-item" permission="@Policies.CanViewInvoices">
<a asp-area="" asp-controller="UIInvoice" asp-action="ListInvoices" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="StoreNav-Invoices">
<vc:icon symbol="invoice"/>
<vc:icon symbol="nav-invoices"/>
<span>Invoices</span>
</a>
</li>
<li class="nav-item" permission="@Policies.CanViewReports">
<a asp-area="" asp-controller="UIReports" asp-action="StoreReports" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Reporting)" id="SectionNav-Reporting">
<vc:icon symbol="invoice" />
<vc:icon symbol="nav-reporting" />
<span>Reporting</span>
</a>
</li>
<li class="nav-item" permission="@Policies.CanViewPaymentRequests">
<a asp-area="" asp-controller="UIPaymentRequest" asp-action="GetPaymentRequests" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="StoreNav-PaymentRequests">
<vc:icon symbol="payment-requests"/>
<vc:icon symbol="nav-payment-requests"/>
<span>Requests</span>
</a>
</li>
<li class="nav-item" permission="@Policies.CanViewPullPayments">
<a asp-area="" asp-controller="UIStorePullPayments" asp-action="PullPayments" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.PullPayments)" id="StoreNav-PullPayments">
<vc:icon symbol="pull-payments"/>
<vc:icon symbol="nav-pull-payments"/>
<span>Pull Payments</span>
</a>
</li>
Expand All @@ -140,7 +140,7 @@
asp-controller="UIStorePullPayments" asp-action="Payouts"
asp-route-pullPaymentId=""
asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Payouts)" id="StoreNav-Payouts">
<vc:icon symbol="payouts"/>
<vc:icon symbol="nav-payouts"/>
<span>Payouts</span>
</a>
</li>
Expand Down Expand Up @@ -175,7 +175,7 @@
}
else
{
<vc:icon symbol="manage-plugins" />
<vc:icon symbol="nav-plugins-manage" />
}
<span>Manage Plugins</span>
</a>
Expand Down Expand Up @@ -235,13 +235,13 @@
<ul id="mainNavSettings" class="navbar-nav border-top p-3 px-lg-4">
<li class="nav-item" permission="@Policies.CanModifyServerSettings">
<a asp-area="" asp-controller="UIServer" asp-action="ListUsers" class="nav-link @ViewData.IsActivePage(ServerNavPages.Users) @ViewData.IsActivePage(ServerNavPages.Emails) @ViewData.IsActivePage(ServerNavPages.Policies) @ViewData.IsActivePage(ServerNavPages.Services) @ViewData.IsActivePage(ServerNavPages.Branding) @ViewData.IsActivePage(ServerNavPages.Maintenance) @ViewData.IsActivePage(ServerNavPages.Logs) @ViewData.IsActivePage(ServerNavPages.Files)" id="Nav-ServerSettings">
<vc:icon symbol="server-settings"/>
<vc:icon symbol="nav-server-settings"/>
<span>Server Settings</span>
</a>
</li>
<li class="nav-item dropup">
<a class="nav-link @ViewData.IsActiveCategory(typeof(ManageNavPages))" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="Nav-Account">
<vc:icon symbol="account"/>
<vc:icon symbol="nav-account"/>
<span>Account</span>
</a>
<ul class="dropdown-menu py-0 w-100" aria-labelledby="Nav-Account">
Expand Down Expand Up @@ -283,7 +283,7 @@
{
<li class="nav-item">
<a href="@Model.ContactUrl" class="nav-link" id="Nav-ContactUs">
<vc:icon symbol="contact"/>
<vc:icon symbol="nav-contact"/>
<span>Contact Us</span>
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Components/StoreSelector/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ else
}
else
{
<vc:icon symbol="store"/>
<vc:icon symbol="nav-store"/>
}
<span>@(Model.CurrentStoreId == null ? "Select Store" : Model.CurrentDisplayName)</span>
<vc:icon symbol="caret-down"/>
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Components/TruncateCenter/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@if (Model.Copy)
{
<button type="button" class="btn btn-link p-0" @(Model.IsVue ? ":" : string.Empty)data-clipboard=@Safe.Json(Model.Text)>
<vc:icon symbol="copy" />
<vc:icon symbol="actions-copy" />
</button>
}
@if (!string.IsNullOrEmpty(Model.Link))
Expand Down
1 change: 0 additions & 1 deletion BTCPayServer/Components/WalletNav/Default.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@using BTCPayServer.Views.Stores
@using BTCPayServer.Client
@using BTCPayServer.Views.Wallets
@using BTCPayServer.Abstractions.Extensions
@inject DisplayFormatter DisplayFormatter
@model BTCPayServer.Components.WalletNav.WalletNavViewModel

Expand Down
4 changes: 2 additions & 2 deletions BTCPayServer/Controllers/UIAppsController.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ public async Task<IActionResult> RedirectToApp(string appId)
switch (sortOrder)
{
case "desc":
ViewData[$"{sortOrderColumn}SortOrder"] = "asc";
ViewData[$"{sortOrderColumn}NextSortOrder"] = "asc";
break;
case "asc":
apps = apps.Reverse();
ViewData[$"{sortOrderColumn}SortOrder"] = "desc";
ViewData[$"{sortOrderColumn}NextSortOrder"] = "desc";
break;
}
}
Expand Down
4 changes: 2 additions & 2 deletions BTCPayServer/Views/Shared/Crowdfund/NavExtension.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
var apps = Model.Apps.Where(app => app.AppType == appType.Type).ToList();
<li class="nav-item" permission="@Policies.CanModifyStoreSettings">
<a asp-area="" asp-controller="UIApps" asp-action="CreateApp" asp-route-storeId="@store.Id" asp-route-appType="@appType.Type" class="nav-link @ViewData.IsActivePage(AppsNavPages.Create, appType.Type)" id="@($"StoreNav-Create{appType.Type}")">
<vc:icon symbol="crowdfund" />
<vc:icon symbol="nav-crowdfund" />
<span>@appType.Description</span>
</a>
</li>
@if (apps.Any())
{
<li class="nav-item" not-permission="@Policies.CanModifyStoreSettings" permission="@Policies.CanViewStoreSettings">
<span class="nav-link">
<vc:icon symbol="crowdfund" />
<vc:icon symbol="nav-crowdfund" />
<span>@appType.Description</span>
</span>
</li>
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Views/Shared/Crowdfund/Public/ViewCrowdfund.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
<b-tooltip target="crowdfund-body-raised-amount" v-if="paymentStats && paymentStats.length > 0" class="only-for-js">
<ul class="p-0 text-uppercase">
<li v-for="stat of paymentStats" class="list-unstyled">
{{stat.label}} <span v-if="stat.lightning" class="fa fa-bolt"></span> {{stat.value}}
{{stat.label}} <span v-if="stat.lightning"><vc:icon symbol="lightning" /></span> {{stat.value}}
</li>
</ul>
</b-tooltip>
Expand Down
3 changes: 1 addition & 2 deletions BTCPayServer/Views/Shared/LNURL/LightningAddressNav.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@using BTCPayServer.Views.Stores
@using BTCPayServer.Abstractions.Extensions
@using BTCPayServer.Client
@{
const string cryptoCode = "BTC";
Expand All @@ -10,7 +9,7 @@
{
<li class="nav-item" permission="@Policies.CanModifyStoreSettings">
<a asp-area="" asp-controller="UILNURL" asp-action="EditLightningAddress" asp-route-storeId="@store.Id" class="nav-link @ViewData.IsActivePage("LightningAddress", nameof(StoreNavPages))" id="StoreNav-LightningAddress">
<vc:icon symbol="wallet-lightning"/>
<vc:icon symbol="nav-lightning-address "/>
<span>Lightning Address</span>
</a>
</li>
Expand Down
1 change: 0 additions & 1 deletion BTCPayServer/Views/Shared/LayoutHead.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<title>@ViewData["Title"]</title>
@* CSS *@
<link href="~/main/bootstrap/bootstrap.css" asp-append-version="true" rel="stylesheet" />
<link href="~/vendor/font-awesome/css/font-awesome.css" asp-append-version="true" rel="stylesheet" />
<link href="~/vendor/flatpickr/flatpickr.css" asp-append-version="true" rel="stylesheet" />
<link href="~/main/fonts/OpenSans.css" asp-append-version="true" rel="stylesheet" />
<link href="~/main/layout.css" asp-append-version="true" rel="stylesheet" />
Expand Down
16 changes: 5 additions & 11 deletions BTCPayServer/Views/Shared/ListRoles.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,8 @@
_ => null
};

var sortIconClass = "fa-sort";
if (roleSortOrder != null)
{
sortIconClass = $"fa-sort-alpha-{roleSortOrder}";
}

var sortByDesc = "Sort by descending...";
var sortByAsc = "Sort by ascending...";
const string sortByDesc = "Sort by name descending...";
const string sortByAsc = "Sort by name ascending...";
var showInUseColumn = !Model.Roles.Any(r => r.IsUsed is null);
}

Expand All @@ -49,7 +43,7 @@
class="text-nowrap"
title="@(nextRoleSortOrder == "desc" ? sortByAsc : sortByDesc)">
Role
<i class="fa @(sortIconClass)"></i>
<vc:icon symbol="actions-sort-alpha-@(roleSortOrder ?? nextRoleSortOrder ?? "desc")" />
</a>
</th>
<th>Scope</th>
Expand Down Expand Up @@ -111,11 +105,11 @@
<td class="text-center">
@if (role.IsUsed is true)
{
<span class="text-success fa fa-check"></span>
<vc:icon symbol="checkmark" css-class="text-success"/>
}
else
{
<span class="text-danger fa fa-times"></span>
<vc:icon symbol="cross" css-class="text-danger"/>
}
</td>
}
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Views/Shared/PayButton/NavExtension.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{
<li class="nav-item" permission="@Policies.CanModifyStoreSettings">
<a asp-area="" asp-controller="UIPayButton" asp-action="PayButton" asp-route-storeId="@store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.PayButton)" id="StoreNav-PayButton">
<vc:icon symbol="pay-button"/>
<vc:icon symbol="nav-pay-button"/>
<span>Pay Button</span>
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Views/Shared/PayButton/PayButton.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@
<div class="col-xxl-8">
<pre><code id="mainCode" class="html"></code></pre>
<button class="btn btn-outline-secondary" data-clipboard-target="#mainCode">
<vc:icon symbol="copy"/>&nbsp;Copy Code
<vc:icon symbol="actions-copy"/>&nbsp;Copy Code
</button>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions BTCPayServer/Views/Shared/PointOfSale/NavExtension.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
var apps = Model.Apps.Where(app => app.AppType == appType.Type).ToList();
<li class="nav-item" permission="@Policies.CanModifyStoreSettings">
<a asp-area="" asp-controller="UIApps" asp-action="CreateApp" asp-route-storeId="@store.Id" asp-route-appType="@appType.Type" class="nav-link @ViewData.IsActivePage(AppsNavPages.Create, appType.Type)" id="@($"StoreNav-Create{appType.Type}")">
<vc:icon symbol="pointofsale" />
<vc:icon symbol="nav-pointofsale" />
<span>@appType.Description</span>
</a>
</li>
@if (apps.Any())
{
<li class="nav-item" not-permission="@Policies.CanModifyStoreSettings" permission="@Policies.CanViewStoreSettings">
<span class="nav-link">
<vc:icon symbol="pointofsale" />
<vc:icon symbol="nav-pointofsale" />
<span>@appType.Description</span>
</span>
</li>
Expand Down