Design system updates

btcpayserver · May 14, 2024 · 2ae0779 · 2ae0779
1 parent d96b066
commit 2ae0779
Show file tree

Hide file tree

Showing 42 changed files with 191 additions and 211 deletions.
diff --git a/BTCPayServer/Components/MainNav/Default.cshtml b/BTCPayServer/Components/MainNav/Default.cshtml
@@ -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>
@@ -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>
@@ -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>
@@ -175,7 +175,7 @@
                                     }
                                     else
                                     {
-                                        <vc:icon symbol="manage-plugins" />
+                                        <vc:icon symbol="nav-plugins-manage" />
                                     }
                                     <span>Manage Plugins</span>
                                 </a>
@@ -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">
@@ -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>

diff --git a/BTCPayServer/Components/StoreSelector/Default.cshtml b/BTCPayServer/Components/StoreSelector/Default.cshtml
@@ -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"/>

diff --git a/BTCPayServer/Components/TruncateCenter/Default.cshtml b/BTCPayServer/Components/TruncateCenter/Default.cshtml
@@ -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))

diff --git a/BTCPayServer/Components/WalletNav/Default.cshtml b/BTCPayServer/Components/WalletNav/Default.cshtml
@@ -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
 

diff --git a/BTCPayServer/Views/Shared/Crowdfund/NavExtension.cshtml b/BTCPayServer/Views/Shared/Crowdfund/NavExtension.cshtml
@@ -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>

diff --git a/BTCPayServer/Views/Shared/LNURL/LightningAddressNav.cshtml b/BTCPayServer/Views/Shared/LNURL/LightningAddressNav.cshtml
@@ -1,5 +1,4 @@
 @using BTCPayServer.Views.Stores
-@using BTCPayServer.Abstractions.Extensions
 @using BTCPayServer.Client
 @{
     const string cryptoCode = "BTC";
@@ -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>

diff --git a/BTCPayServer/Views/Shared/PayButton/NavExtension.cshtml b/BTCPayServer/Views/Shared/PayButton/NavExtension.cshtml
@@ -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>

diff --git a/BTCPayServer/Views/Shared/PayButton/PayButton.cshtml b/BTCPayServer/Views/Shared/PayButton/PayButton.cshtml
@@ -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>

diff --git a/BTCPayServer/Views/Shared/PointOfSale/NavExtension.cshtml b/BTCPayServer/Views/Shared/PointOfSale/NavExtension.cshtml
@@ -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>

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
@@ -41,7 +41,7 @@
                         <span id="CartBadge" class="badge rounded-pill bg-danger p-1 ms-1" v-text="cartCount" v-if="cartCount !== 0"></span>
                     </button>
                     <button type="button" class="btn btn-link p-1" data-bs-toggle="modal" data-bs-target="#RecentTransactions" id="RecentTransactionsToggle" permission="@Policies.CanViewInvoices">
-                        <vc:icon symbol="invoice-2 "/>
+                        <vc:icon symbol="nav-invoice"/>
                     </button>
                 </div>
                 @if (Model.ShowSearch)

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/RecentTransactions.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/RecentTransactions.cshtml
@@ -7,7 +7,7 @@
             <div class="modal-header">
                 <h5 class="modal-title">Recent Transactions</h5>
                 <button type="button" class="btn btn-link px-3 py-0" aria-label="Refresh" v-on:click="loadRecentTransactions" :disabled="recentTransactionsLoading" id="RecentTransactionsRefresh">
-                    <vc:icon symbol="refresh"/>
+                    <vc:icon symbol="actions-refresh"/>
                     <span v-if="recentTransactionsLoading" class="visually-hidden">Loading...</span>
                 </button>
                 <button type="button" class="btn-close py-3" aria-label="Close" v-on:click="hideRecentTransactions">

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
@@ -75,10 +75,10 @@
     </button>
     <partial name="PointOfSale/Public/RecentTransactions" model="Model"/>
     <button type="button" class="btn btn-link p-1" data-bs-toggle="modal" data-bs-target="#RecentTransactions" id="RecentTransactionsToggle" permission="@Policies.CanViewInvoices">
-        <vc:icon symbol="invoice-2 "/>
+        <vc:icon symbol="nav-invoice"/>
     </button>
     <button type="button" class="btn btn-link p-1" data-bs-toggle="offcanvas" data-bs-target="#ItemsListOffcanvas" id="ItemsListToggle" aria-controls="ItemsList" v-if="showItems">
-        <vc:icon symbol="menu"/>
+        <vc:icon symbol="nav-mobile-menu"/>
     </button>
     <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1"  id="ItemsListOffcanvas" aria-labelledby="ItemsListToggle" v-if="showItems">
         <div class="offcanvas-header flex-wrap p-3">

diff --git a/BTCPayServer/Views/Shared/ShowQR.cshtml b/BTCPayServer/Views/Shared/ShowQR.cshtml
@@ -22,7 +22,7 @@
                     <div class="input-group input-group-sm mt-3" v-if="currentFragment && currentMode.showData">
                         <input type="text" class="form-control" readonly :value="currentFragment" id="qr-code-data-input">
                         <button type="button" class="btn btn-outline-secondary px-3" data-clipboard-target="#qr-code-data-input">
-                            <vc:icon symbol="copy" />
+                            <vc:icon symbol="actions-copy" />
                         </button>
                     </div>
                     <div v-if="note" v-html="note" class="text-muted mt-3" id="scan-qr-modal-note"></div>

diff --git a/BTCPayServer/Views/Shared/TemplateEditor.cshtml b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
@@ -88,7 +88,7 @@
         <div class="items list-group list-group-flush" v-sortable="{ handle: '.drag', onUpdate (event) { $emit('sort-items', event) } }">
             <div v-for="(item, index) of items" class="d-inline-flex align-items-center gap-3 list-group-item" :key="item.id" :class="{ active: item === selectedItem }" v-on:click.stop="$emit('select-item', $event, index)">
                 <button type="button" class="btn b-0 control drag" :disabled="items.length === 1">
-                    <vc:icon symbol="drag" />
+                    <vc:icon symbol="actions-drag" />
                 </button>
                 <div class="template-item d-flex align-items-start w-100 gap-3">
                     <div class="img">
@@ -106,12 +106,12 @@
                     </div>
                 </div>
                 <button type="button" class="btn b-0 control remove" v-on:click="$emit('remove-item', $event, index)">
-                    <vc:icon symbol="remove" />
+                    <vc:icon symbol="actions-remove" />
                 </button>
             </div>
         </div>
         <button type="button" id="btAddItem" class="btn btn-link py-0 px-2 mt-2 mb-2 gap-1 add fw-semibold d-inline-flex align-items-center" v-on:click.stop="$emit('add-item', $event)">
-            <vc:icon symbol="new" />
+            <vc:icon symbol="actions-add" />
             Add Item
         </button>
     </div>

diff --git a/BTCPayServer/Views/Shared/_Footer.cshtml b/BTCPayServer/Views/Shared/_Footer.cshtml
@@ -35,7 +35,7 @@
             @if (!string.IsNullOrEmpty(_env.OnionUrl) && !Context.Request.IsOnion())
             {
                 <button type="button" class="d-flex align-items-center btn btn-link" data-clipboard="@_env.OnionUrl" data-clipboard-hover>
-                    <vc:icon symbol="onion"/>
+                    <vc:icon symbol="logo-tor"/>
                     <span>Copy Tor URL</span>
                 </button>
             }

diff --git a/BTCPayServer/Views/UIForms/Modify.cshtml b/BTCPayServer/Views/UIForms/Modify.cshtml
@@ -71,7 +71,7 @@
                     </div>
                 </div>
                 <button type="button" class="btn btn-link px-1 py-2 gap-1 add fw-semibold d-inline-flex align-items-center" v-on:click.stop="addOption($event)">
-                    <vc:icon symbol="new" />
+                    <vc:icon symbol="actions-add" />
                     Add Option
                 </button>
             </div>
@@ -108,7 +108,7 @@
                     </div>
                 </div>
                 <button type="button" class="btn btn-link px-1 py-2 gap-1 add fw-semibold d-inline-flex align-items-center" v-on:click.stop="addValueMap($event)">
-                    <vc:icon symbol="new" />
+                    <vc:icon symbol="actions-add" />
                     Add mapped value
                 </button>
             </div>
@@ -134,18 +134,18 @@
             <div class="fields list-group" :class="{ 'list-group-flush': path.length }" :data-path="path.join(',')" v-sortable="{ handle: '.drag', onUpdate (event) { const { path } = this.el.dataset; $emit('sort-fields', event, (path.indexOf(',') !== -1 ? path.split(',') : [])) } }">
                 <div v-for="(field, index) in fields" :key="field.name" class="d-flex align-items-start gap-2 list-group-item" :class="{ active: field === selectedField }" v-on:click.stop="$emit('select-field', $event, path, index)">
                     <button type="button" class="btn b-0 control drag" :disabled="fields.length === 1">
-                        <vc:icon symbol="drag" />
+                        <vc:icon symbol="actions-drag" />
                     </button>
                     <div class="field flex-grow-1">
                         <component :is="getFieldComponent(field.type)" v-bind="field" :path="path.concat(field.name)" :selected-field="selectedField" v-on="$listeners" />
                     </div>
                     <button type="button" class="btn b-0 control remove" v-on:click="$emit('remove-field', $event, path, index)">
-                        <vc:icon symbol="remove" />
+                        <vc:icon symbol="actions-remove" />
                     </button>
                 </div>
             </div>
             <button type="button" class="btn btn-link py-0 px-2 mt-2 mb-2 gap-1 add fw-semibold d-inline-flex align-items-center" v-on:click.stop="$emit('add-field', $event, path)">
-                <vc:icon symbol="new" />
+                <vc:icon symbol="actions-add" />
                 Add Form Field
             </button>
         </div>

diff --git a/BTCPayServer/Views/UIHome/Home.cshtml b/BTCPayServer/Views/UIHome/Home.cshtml
@@ -17,7 +17,7 @@
 
     <div class="list-group mt-4" id="SetupGuide">
         <a asp-controller="UIUserStores" asp-action="CreateStore" id="SetupGuide-Store" class="list-group-item list-group-item-action d-flex align-items-center">
-            <vc:icon symbol="new-store"/>
+            <vc:icon symbol="wallet-new"/>
             <div class="content">
                 <h5 class="mb-0">Create your store</h5>
             </div>

diff --git a/BTCPayServer/Views/UIHome/RecoverySeedBackup.cshtml b/BTCPayServer/Views/UIHome/RecoverySeedBackup.cshtml
@@ -13,9 +13,8 @@
         form#RecoveryConfirmation input:checked ~ button[disabled] { display: none; }
         form#RecoveryConfirmation input:checked + button:not([disabled]) { display: inline-block; }
 
-        svg.icon.icon-warning {
-            width: 2.5rem;
-            height: 2.5rem;
+        .icon.icon-warning {
+            --icon-size: 2.5rem;
         }
     </style>
 }