← Watch feed
Containerize the server settings views into sections (#7501)
Public commit record
58/100 · Thin
What the developer wrote
Authored by dstrukt
Containerize the server settings views into sections (#7501)
✓ Specific, descriptive subject✓ Names a concrete action or component✓ Links an issue, advisory, or supporting reference! No meaningful explanatory body
What changed, and why it matters
This commit is a user-interface redesign, not a security fix. It wraps existing server settings pages into consistent visual sections and adds short explanatory subtitles. No code handling payments, authentication, permissions, or data validation was changed.
Recommended action
No security action needed; treat as a routine UI/UX refactor.
Security signals we found
No strong security signals were identified.
Evidence from the diff
The diff is a pure Razor view/CSS refactor. It replaces ad-hoc heading and spacing classes with a unified settings-section / settings-section__heading pattern across ~30 server settings views, adds descriptive <p> subtext under page titles, and introduces two small CSS rules for described headings. There are no controller, model, JavaScript, or backend logic changes, and no input handling, output encoding, authorization, or secret disclosure behavior is modified.
Changed components
BTCPayServer Razor views under Views/UIServer and Plugins/*/ViewsBTCPayServer wwwroot/main/site.css and site.rtl.cssInspect captured patch +255 / −112
### BTCPayServer/Plugins/Emails/Views/Shared/EmailSettings.cshtml
@@ -10,9 +10,8 @@
ViewData.SetLayoutModel(new LayoutModel(nameof(StoreNavPages.Emails), StringLocalizer["Email Rules"])
.SetCategory(WellKnownCategories.Store));
}
- // Containerized section styling is applied on the store settings page only.
- var sectionClass = Model.StoreId is not null ? "settings-section" : null;
- var sectionHeadingClass = Model.StoreId is not null ? "settings-section__heading" : "my-3";
+ var sectionClass = "settings-section";
+ var sectionHeadingClass = "settings-section__heading";
}
<form method="post" autocomplete="off">
@@ -161,7 +160,7 @@
</div>
</div>
</div>
- <h3 class="@sectionHeadingClass @(Model.StoreId is not null ? "settings-section__heading--spaced" : "")" text-translate="true">Testing</h3>
+ <h3 class="@sectionHeadingClass settings-section__heading--spaced" text-translate="true">Testing</h3>
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<div class="@sectionClass">
### BTCPayServer/Plugins/Maintenance/Views/Maintenance.cshtml
@@ -7,42 +7,54 @@
}
<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+ <div class="d-flex flex-column gap-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">Change your server domain, restart services, clean up Docker images, and update BTCPay Server.</p>
+ </div>
</div>
<partial name="_StatusMessage" />
<form method="post">
<div class="row mb-5">
<div class="col-xl-8 col-xxl-constrain">
+ <h3 class="settings-section__heading" text-translate="true">Domain</h3>
+ <div class="settings-section">
<div class="form-group">
<label asp-for="DNSDomain" class="form-label"></label>
<input asp-for="DNSDomain" class="form-control" disabled="@(Model.SupportedCommands.Contains(HostCommands.ChangeDomain) ? null : "disabled")" />
<div class="form-text">@ViewLocalizer["You can change the domain name of your server by following {0}.", new HtmlString($"<a href=\"https://docs.btcpayserver.org/FAQ/Deployment/#how-to-change-your-btcpay-server-domain-name\" target=\"_blank\" rel=\"noreferrer noopener\">{StringLocalizer["this guide"]}</a>")]</div>
<span asp-validation-for="DNSDomain" class="text-danger"></span>
</div>
<button name="command" type="submit" class="btn btn-secondary" value="changedomain" title="@StringLocalizer["Change domain"]" disabled="@(Model.SupportedCommands.Contains(HostCommands.ChangeDomain) ? null : "disabled")">Change Domain</button>
+ </div>
- <h4 class="mt-5 mb-2" text-translate="true">Restart</h4>
- <p text-translate="true">Restart BTCPay Server and related services.</p>
- <div class="form-group">
- <div class="input-group">
- <button name="command" type="submit" class="btn btn-secondary" value="restart" disabled="@(Model.SupportedCommands.Contains(HostCommands.Restart) ? null : "disabled")" text-translate="true">Restart</button>
+ <h3 class="settings-section__heading" text-translate="true">Restart</h3>
+ <div class="settings-section">
+ <p text-translate="true">Restart BTCPay Server and related services.</p>
+ <div class="form-group mb-0">
+ <div class="input-group">
+ <button name="command" type="submit" class="btn btn-secondary" value="restart" disabled="@(Model.SupportedCommands.Contains(HostCommands.Restart) ? null : "disabled")" text-translate="true">Restart</button>
+ </div>
</div>
</div>
- <h4 class="mt-5 mb-2" text-translate="true">Clean</h4>
- <p text-translate="true">Delete unused Docker images present on your system.</p>
- <div class="form-group">
- <div class="input-group">
- <button name="command" type="submit" class="btn btn-secondary" value="clean" disabled="@(Model.SupportedCommands.Contains(HostCommands.Clean) ? null : "disabled")" text-translate="true">Clean</button>
+ <h3 class="settings-section__heading" text-translate="true">Clean</h3>
+ <div class="settings-section">
+ <p text-translate="true">Delete unused Docker images present on your system.</p>
+ <div class="form-group mb-0">
+ <div class="input-group">
+ <button name="command" type="submit" class="btn btn-secondary" value="clean" disabled="@(Model.SupportedCommands.Contains(HostCommands.Clean) ? null : "disabled")" text-translate="true">Clean</button>
+ </div>
</div>
</div>
- <h4 class="mt-5 mb-2" text-translate="true">Update</h4>
- <p text-translate="true">Update to the latest version of BTCPay Server.</p>
- <div class="form-group">
- <div class="input-group">
- <button name="command" type="submit" class="btn btn-primary" value="update" disabled="@(Model.SupportedCommands.Contains(HostCommands.Update) ? null : "disabled")" text-translate="true">Update</button>
+ <h3 class="settings-section__heading" text-translate="true">Update</h3>
+ <div class="settings-section">
+ <p text-translate="true">Update to the latest version of BTCPay Server.</p>
+ <div class="form-group mb-0">
+ <div class="input-group">
+ <button name="command" type="submit" class="btn btn-primary" value="update" disabled="@(Model.SupportedCommands.Contains(HostCommands.Update) ? null : "disabled")" text-translate="true">Update</button>
+ </div>
</div>
</div>
</div>
### BTCPayServer/Plugins/Monetization/Views/Monetization.cshtml
@@ -37,8 +37,11 @@
}
-<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+<div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">Get paid for sharing your BTCPay Server instance with other users.</p>
+ </div>
@if (Model.DefaultPlan is null)
{
await CreateNewOffering(true);
@@ -60,10 +63,9 @@
</div>
<partial name="_StatusMessage" />
-
-<p class="mb-0" text-translate="true">Monetization allows you to get paid for sharing your BTCPay Server instance with other users.</p>
-
<div class="col-xxl-constrain col-xl-8">
+ <h3 class="settings-section__heading" text-translate="true">Setup</h3>
+ <div class="settings-section">
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="activate-header">
@@ -203,6 +205,7 @@
</div>
</div>
+ </div>
</div>
@if (Model.Offering is not null)
### BTCPayServer/Plugins/Translations/Views/ListTranslations.cshtml
@@ -5,8 +5,11 @@
.SetCategory(WellKnownCategories.Server));
}
-<div class="sticky-header">
- <vc:title-header />
+<div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0" text-translate="true">Translations</h2>
+ <p class="text-secondary mb-0" text-translate="true">Translate BTCPay Server into different languages and manage installed language packs.</p>
+ </div>
<div class="d-flex gap-2">
<a id="page-primary" asp-action="CreateTranslation" class="btn btn-primary" role="button" text-translate="true">
Create
@@ -15,21 +18,18 @@
</div>
<partial name="_StatusMessage" />
-<p class="mb-0" text-translate="true">
- Translations enable you to translate the BTCPay Server into different languages.
-</p>
-
@if (Model.ManifestFetchFailed)
{
<div class="alert alert-warning mt-3" role="alert">
<span text-translate="true">Could not fetch the community language manifest. Showing installed languages only (degraded mode).</span>
</div>
}
-<h4 class="mt-4 mb-3" text-translate="true">Installed languages</h4>
-<p class="text-muted" text-translate="true">Currently enabled on this server.</p>
-<div class="table-responsive">
- <table class="table table-hover align-middle">
+<h3 class="settings-section__heading settings-section__heading--described" text-translate="true">Installed languages</h3>
+<p class="text-muted settings-section__description" text-translate="true">Currently enabled on this server.</p>
+<div class="settings-section">
+<div class="table-responsive settings-section__table">
+ <table class="table table-hover align-middle mb-0">
<colgroup>
<col style="width: 40%;" />
<col style="width: 24%;" />
@@ -128,11 +128,13 @@
</tbody>
</table>
</div>
+</div>
-<h4 class="mt-4 mb-3" text-translate="true">Available to install</h4>
-<p class="text-muted" text-translate="true">Present in the upstream translation repository but not yet on this server.</p>
-<div class="table-responsive">
- <table class="table table-hover align-middle">
+<h3 class="settings-section__heading settings-section__heading--described" text-translate="true">Available to install</h3>
+<p class="text-muted settings-section__description" text-translate="true">Present in the upstream translation repository but not yet on this server.</p>
+<div class="settings-section">
+<div class="table-responsive settings-section__table">
+ <table class="table table-hover align-middle mb-0">
<colgroup>
<col style="width: 40%;" />
<col style="width: 24%;" />
@@ -204,5 +206,6 @@
</tbody>
</table>
</div>
+</div>
<partial name="_Confirm" model="@(new ConfirmModel(StringLocalizer["Uninstall translation"], StringLocalizer["This translation will be removed from this server."], StringLocalizer["Delete"]))" />
### BTCPayServer/Views/UIServer/Branding.cshtml
@@ -15,14 +15,19 @@
}
<form method="post" enctype="multipart/form-data">
- <div class="sticky-header">
- <vc:title-header />
+ <div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0" text-translate="true">Branding</h2>
+ <p class="text-secondary mb-0" text-translate="true">Customize your server's name, contact link, logo, and theme.</p>
+ </div>
<button id="page-primary" type="submit" class="btn btn-primary" name="command" value="Save" text-translate="true">Save</button>
</div>
<partial name="_StatusMessage" />
<div class="row">
<div class="col-xl-8 col-xxl-constrain">
+ <h3 class="settings-section__heading" text-translate="true">General</h3>
+ <div class="settings-section">
<div class="form-group">
<label asp-for="ServerName" class="form-label"></label>
<input asp-for="ServerName" class="form-control" />
@@ -75,7 +80,9 @@
}
</div>
- <h3 class="mt-5 mb-3" text-translate="true">Theme</h3>
+ </div>
+ <h3 class="settings-section__heading" text-translate="true">Theme</h3>
+ <div class="settings-section">
<p text-translate="true">Use the default Light or Dark Themes, or provide a custom CSS theme file below.</p>
<div class="d-flex align-items-center mb-3">
@@ -124,6 +131,7 @@
}
</div>
</div>
+ </div>
</div>
</div>
</form>
### BTCPayServer/Views/UIServer/CLightningRestServices.cshtml
@@ -18,15 +18,18 @@
<p text-translate="true">BTCPay exposes Core Lightning's REST service for outside consumption, you will find connection information here.</p>
</div>
-<h5 class="mb-3" text-translate="true">Compatible wallets</h5>
+<h3 class="settings-section__heading" text-translate="true">Compatible wallets</h3>
+<div class="settings-section">
<div class="services-list">
<a href="https://github.com/ZeusLN/zeus" target="_blank" class="service" rel="noreferrer noopener">
<img src="~/img/zeus.jpg" asp-append-version="true" alt="Zeus" />
<h6>Zeus</h6>
</a>
</div>
+</div>
-<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
+<h3 class="settings-section__heading" text-translate="true">QR Code connection</h3>
+<div class="settings-section">
<p>
<span text-translate="true">You can use this QR Code to connect external software to your C-Lightning instance.<br /></span>
<span text-translate="true">This QR Code is only valid for 10 minutes</span>
@@ -126,6 +129,7 @@
}
</div>
</div>
+</div>
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
### BTCPayServer/Views/UIServer/ConfiguratorService.cshtml
@@ -18,14 +18,16 @@
<div class="row">
<div class="col-md-8">
+ <div class="settings-section">
<div class="form-group">
- <p text-translate="true">This page exposes information to use the configured BTCPay Server Configurator to modify this setup.</p>
+ <p class="mb-0" text-translate="true">This page exposes information to use the configured BTCPay Server Configurator to modify this setup.</p>
</div>
- <a href="@Model.ServiceLink" target="_blank" class="form-group" rel="noreferrer noopener">
+ <a href="@Model.ServiceLink" target="_blank" class="form-group mb-0" rel="noreferrer noopener">
<label asp-for="ServiceLink" class="form-label" text-translate="true">Service</label>
<input asp-for="ServiceLink" class="form-control" readonly />
</a>
+ </div>
</div>
</div>
### BTCPayServer/Views/UIServer/CreateUser.cshtml
@@ -18,6 +18,7 @@
{
<div asp-validation-summary="ModelOnly"></div>
}
+ <div class="settings-section">
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" required="required" class="form-control"/>
@@ -73,6 +74,7 @@
}
</div>
</div>
+ </div>
</div>
</div>
</form>
### BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml
@@ -17,6 +17,7 @@
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<form method="post">
+ <div class="settings-section">
<div class="form-group">
<label asp-for="ContainerName" class="form-label"></label>
<input class="form-control" asp-for="ContainerName"/>
@@ -55,6 +56,7 @@
<button type="submit" class="btn btn-primary" name="command" value="Save" text-translate="true">Save</button>
<a asp-action="Storage" asp-route-forceChoice="true" text-translate="true">Change Storage provider</a>
+ </div>
</form>
</div>
</div>
### BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml
@@ -17,6 +17,7 @@
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<form method="post">
+ <div class="settings-section">
<div class="form-group">
<label asp-for="ContainerName" class="form-label" text-translate="true">Container Name</label>
<input asp-for="ContainerName" class="form-control" />
@@ -30,6 +31,7 @@
<button type="submit" class="btn btn-primary" name="command" value="Save" text-translate="true">Save</button>
<a asp-action="Storage" asp-route-forceChoice="true" class="ms-2" text-translate="true">Change Storage provider</a>
+ </div>
</form>
</div>
</div>
### BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml
@@ -14,10 +14,12 @@
</div>
<partial name="_StatusMessage" />
-<p text-translate="true">Any uploaded files are being saved on the same machine that hosts BTCPay; please pay attention to your storage space.</p>
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
+ <div class="settings-section">
+ <p text-translate="true">Any uploaded files are being saved on the same machine that hosts BTCPay; please pay attention to your storage space.</p>
<a asp-action="Storage" asp-route-forceChoice="true" text-translate="true">Change Storage provider</a>
+ </div>
</div>
</div>
### BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml
@@ -17,6 +17,7 @@
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<form method="post">
+ <div class="settings-section">
<div class="form-group">
<label asp-for="ContainerName" class="form-label" text-translate="true">Container Name</label>
<input asp-for="ContainerName" class="form-control" />
@@ -35,6 +36,7 @@
<button type="submit" class="btn btn-primary" name="command" value="Save" text-translate="true">Save</button>
<a asp-action="Storage" asp-route-forceChoice="true" class="ms-2" text-translate="true">Change Storage provider</a>
+ </div>
</form>
</div>
</div>
### BTCPayServer/Views/UIServer/Files.cshtml
@@ -4,8 +4,11 @@
.SetCategory(WellKnownCategories.Server));
}
-<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+<div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">Upload and manage files stored with your configured storage provider.</p>
+ </div>
<a asp-action="storage" asp-route-forceChoice="true" asp-route-returnurl="@ViewData["ReturnUrl"]" class="btn btn-secondary d-flex align-items-center">
<vc:icon symbol="settings" />
</a>
@@ -32,12 +35,15 @@ else
@if (Model.StorageConfigured)
{
+ <h3 class="settings-section__heading" text-translate="true">Upload</h3>
+ <div class="settings-section">
<form asp-action="CreateFiles" method="post" enctype="multipart/form-data">
<div class="d-flex">
- <input multiple type="file" class="form-control mb-3" name="files" id="files" required>
- <button class="btn btn-primary mb-3 ms-3" role="button" text-translate="true">Upload</button>
+ <input multiple type="file" class="form-control mb-0" name="files" id="files" required>
+ <button class="btn btn-primary mb-0 ms-3" role="button" text-translate="true">Upload</button>
</div>
</form>
+ </div>
}
@if (Model.DirectUrlByFiles is { Count: > 0 })
@@ -92,8 +98,10 @@ else
@if (Model.Files.Any())
{
- <div class="table-responsive">
- <table class="table table-hover">
+ <h3 class="settings-section__heading" text-translate="true">Files</h3>
+ <div class="settings-section">
+ <div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Name</th>
@@ -120,6 +128,7 @@ else
</tbody>
</table>
</div>
+ </div>
}
else
{
### BTCPayServer/Views/UIServer/LightningChargeServices.cshtml
@@ -16,7 +16,8 @@
{
<div asp-validation-summary="All"></div>
}
- <div class="form-group">
+ <div class="settings-section">
+ <div class="form-group mb-0">
<p text-translate="true">Lightning charge is a simple API for invoicing on lightning network, you can use it with several plugins:</p>
<ul>
<li><a href="https://github.com/ElementsProject/woocommerce-gateway-lightning" target="_blank" rel="noreferrer noopener">WooCommerce Lightning Gateway</a>: A comprehensive e-commerce application that integrates with stock-management and order-tracking systems</li>
@@ -29,11 +30,13 @@
<li><a href="https://github.com/ElementsProject/nanotip" target="_blank" rel="noreferrer noopener">Nanotip</a>: The simple tip jar, rebuilt to issue Lightning Network invoices</li>
</ul>
</div>
+ </div>
</div>
</div>
<div class="row">
<div class="col-md-8">
- <h4 text-translate="true">Credentials</h4>
+ <h3 class="settings-section__heading" text-translate="true">Credentials</h3>
+ <div class="settings-section">
@if (Model.Uri != null)
{
<div class="form-group">
@@ -55,5 +58,6 @@
<input asp-for="AuthenticatedUri" class="form-control" readonly />
</div>
}
+ </div>
</div>
</div>
### BTCPayServer/Views/UIServer/LightningWalletServices.cshtml
@@ -27,6 +27,7 @@
{
<div asp-validation-summary="All"></div>
}
+ <div class="settings-section">
<div class="form-group">
<h5 text-translate="true">Browser connection</h5>
<p>
@@ -56,6 +57,7 @@
</div>
}
</div>
+ </div>
</div>
</div>
### BTCPayServer/Views/UIServer/ListStores.cshtml
@@ -5,13 +5,18 @@
ViewData["StoreList"] = true;
}
<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+ <div class="d-flex flex-column gap-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">Every store on this server and the users who can access them.</p>
+ </div>
</div>
<partial name="_StatusMessage" />
@if (Model.Stores.Any())
{
- <table class="table table-hover">
+ <div class="settings-section">
+ <div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Store</th>
@@ -68,6 +73,8 @@
}
</tbody>
</table>
+ </div>
+ </div>
}
else
{
### BTCPayServer/Views/UIServer/ListUsers.cshtml
@@ -30,20 +30,24 @@
</script>
}
-<div class="sticky-header">
- <vc:title-header />
+<div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0" text-translate="true">Users</h2>
+ <p class="text-secondary mb-0" text-translate="true">Manage the accounts that can access this server.</p>
+ </div>
<a id="page-primary" asp-action="CreateUser" class="btn btn-primary" role="button" text-translate="true">
Add User
</a>
</div>
<partial name="_StatusMessage" />
-<form asp-action="ListUsers" asp-route-sortOrder="@(userEmailSortOrder)" style="max-width:640px" method="get">
+<form asp-action="ListUsers" asp-route-sortOrder="@(userEmailSortOrder)" style="max-width:640px" method="get" class="mb-3">
<input asp-for="SearchTerm" class="form-control" placeholder="@StringLocalizer["Search by email..."]" />
</form>
-<div class="table-responsive">
- <table class="table table-hover">
+<div class="settings-section">
+<div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th>
@@ -165,8 +169,11 @@
</tbody>
</table>
</div>
+</div>
-<vc:pager view-model="Model"></vc:pager>
+<div class="mt-3">
+ <vc:pager view-model="Model"></vc:pager>
+</div>
<partial name="_Confirm" model="@(new ConfirmModel(StringLocalizer["Send verification email"], StringLocalizer["This will send a verification email to the user."], StringLocalizer["Send"]))" />
<partial name="ShowQR" />
### BTCPayServer/Views/UIServer/LndSeedBackup.cshtml
@@ -14,6 +14,7 @@
{
<div class="row">
<div class="col-lg-8">
+ <div class="settings-section">
<div class="form-group">
<p text-translate="true">The LND seed backup is useful to recover on-chain funds of your LND wallet in case of a corruption of your server.</p>
<p>The recovering process is documented by LND on <a href="https://github.com/lightningnetwork/lnd/blob/master/docs/recovery.md" rel="noreferrer noopener">this page</a>.</p>
@@ -55,6 +56,7 @@
</form>
</div>
}
+ </div>
</div>
</div>
}
### BTCPayServer/Views/UIServer/LndServices.cshtml
@@ -13,10 +13,11 @@
BTCPay exposes LND's @Model.ConnectionType service for outside consumption, you will find connection information here.
</p>
-<h4 class="mb-3" text-translate="true">Compatible wallets</h4>
-<div class="services-list">
- @if (Model.Uri != null)
- {
+@if (Model.Uri != null)
+{
+ <h3 class="settings-section__heading" text-translate="true">Compatible wallets</h3>
+ <div class="settings-section">
+ <div class="services-list">
<a href="https://getalby.com/" target="_blank" class="service" rel="noreferrer noopener">
<img src="~/img/alby.png" asp-append-version="true" alt="Alby" />
<h6>Alby</h6>
@@ -25,10 +26,12 @@
<img src="~/img/zeus.jpg" asp-append-version="true" alt="Zeus" />
<h6>Zeus</h6>
</a>
- }
-</div>
+ </div>
+ </div>
+}
-<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
+<h3 class="settings-section__heading" text-translate="true">QR Code connection</h3>
+<div class="settings-section">
<p text-translate="true">You can use this QR Code to connect external software to your LND instance. This QR Code is only valid for 10 minutes.</p>
@if (Model.QRCode == null)
@@ -56,8 +59,10 @@ else
</p>
</div>
}
+</div>
-<h4 class="mt-5 mb-3" text-translate="true">More details</h4>
+<h3 class="settings-section__heading" text-translate="true">More details</h3>
+<div class="settings-section">
<p>Alternatively, you can see the settings by clicking <a href="#details" data-bs-toggle="collapse">here</a>.</p>
<div id="details" class="collapse">
@@ -122,6 +127,7 @@ else
</div>
}
</div>
+</div>
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
### BTCPayServer/Views/UIServer/Logs.cshtml
@@ -5,11 +5,18 @@
}
<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+ <div class="d-flex flex-column gap-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">Browse and download BTCPay Server log files.</p>
+ </div>
</div>
<partial name="_StatusMessage" />
-<ul class="list-unstyled">
+<div class="row">
+ <div class="col-xl-8 col-xxl-constrain">
+ <h3 class="settings-section__heading" text-translate="true">Log files</h3>
+ <div class="settings-section">
+<ul class="list-unstyled mb-0">
@foreach (var file in Model.LogFiles)
{
<li>
@@ -21,8 +28,8 @@
}
</ul>
-<nav aria-label="..." class="w-100">
- <ul class="pagination float-start">
+<nav aria-label="..." class="w-100 mt-3">
+ <ul class="pagination mb-0">
<li class="page-item @(Model.LogFileOffset == 0 ? "disabled" : null)">
<a class="page-link" asp-action="LogsView" asp-route-offset="@(Model.LogFileOffset - 5)">«</a>
</li>
@@ -34,6 +41,9 @@
</li>
</ul>
</nav>
+ </div>
+ </div>
+</div>
@if (!string.IsNullOrEmpty(Model.Log))
{
### BTCPayServer/Views/UIServer/P2PService.cshtml
@@ -26,10 +26,13 @@
<div asp-validation-summary="All"></div>
}
-<h4 class="mb-3" text-translate="true">Full node connection</h4>
-<p text-translate="true">This page exposes information to connect remotely to your full node via the P2P protocol.</p>
+<h3 class="settings-section__heading" text-translate="true">Full node connection</h3>
+<div class="settings-section">
+<p class="mb-0" text-translate="true">This page exposes information to connect remotely to your full node via the P2P protocol.</p>
+</div>
-<h4 class="mb-3" text-translate="true">Compatible wallets</h4>
+<h3 class="settings-section__heading" text-translate="true">Compatible wallets</h3>
+<div class="settings-section">
<div class="services-list">
<a href="https://play.google.com/store/apps/details?id=com.greenaddress.greenbits_android_wallet" target="_blank" class="service" rel="noreferrer noopener">
<img src="~/img/GreenWallet.png" asp-append-version="true" alt="Blockstream Green" />
@@ -40,8 +43,10 @@
<h6>Wasabi Wallet</h6>
</a>
</div>
+</div>
-<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
+<h3 class="settings-section__heading" text-translate="true">QR Code connection</h3>
+<div class="settings-section">
<p>@StringLocalizer["You can use QR Code to connect to {0} with compatible wallets.", Model.WalletName]</p>
<div class="form-group">
@@ -69,6 +74,7 @@
</div>
}
</div>
+</div>
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
### BTCPayServer/Views/UIServer/Policies.cshtml
@@ -21,8 +21,11 @@
}
<form method="post">
- <div class="sticky-header">
- <vc:title-header />
+ <div class="sticky-header align-items-start">
+ <div class="d-flex flex-column gap-1 flex-grow-1">
+ <h2 class="mb-0" text-translate="true">Policies</h2>
+ <p class="text-secondary mb-0" text-translate="true">Control registration, user capabilities, server behavior, and plugin sources.</p>
+ </div>
<button id="page-primary" type="submit" class="btn btn-primary" name="command" value="Save" text-translate="true">Save</button>
</div>
<partial name="_StatusMessage" />
@@ -35,8 +38,8 @@
<div class="row">
<div class="col-xl-10 col-xxl-constrain">
<div class="d-flex flex-column">
- <div class="form-group mb-5">
- <h4 class="mb-3" text-translate="true">Registration</h4>
+ <h3 class="settings-section__heading" text-translate="true">Registration</h3>
+ <div class="settings-section">
<div class="d-flex gap-3">
<input asp-for="EnableRegistration" type="checkbox" class="btcpay-toggle" />
<div>
@@ -105,8 +108,8 @@
</div>
</div>
- <div class="mb-5">
- <h4 class="mb-3" text-translate="true">Users</h4>
+ <h3 class="settings-section__heading" text-translate="true">Users</h3>
+ <div class="settings-section">
<div class="form-group">
<label asp-for="StoreQuota" class="form-label"></label>
<input asp-for="StoreQuota" type="number" min="0" class="form-control" placeholder="@StringLocalizer["Unlimited"]" />
@@ -150,8 +153,8 @@
</div>
</div>
- <div class="mb-5">
- <h4 class="mb-3" text-translate="true">Server</h4>
+ <h3 class="settings-section__heading" text-translate="true">Server</h3>
+ <div class="settings-section">
<div class="form-group">
<label asp-for="LangTranslation" class="form-label"></label>
<select asp-for="LangTranslation"
@@ -199,7 +202,8 @@
</div> *@
</div>
- <h4 class="mb-3" text-translate="true">Plugins</h4>
+ <h3 class="settings-section__heading" text-translate="true">Plugins</h3>
+ <div class="settings-section">
<div class="form-group">
<label asp-for="PluginSource" class="form-label"></label>
<input asp-for="PluginSource" placeholder="@PoliciesSettings.DefaultPluginSource" class="form-control"/>
@@ -210,7 +214,9 @@
<label asp-for="PluginPreReleases" class="form-check-label"></label>
</div>
- <h4 class="mt-5" text-translate="true">Customization</h4>
+ </div>
+ <h3 class="settings-section__heading" text-translate="true">Customization</h3>
+ <div class="settings-section">
<div class="form-group mb-3">
<label asp-for="DefaultStoreTemplate" class="form-label"></label>
@if (Model.DefaultStoreTemplate is null)
@@ -273,7 +279,9 @@
</div>
}
- <h4 text-translate="true">Block Explorers</h4>
+ </div>
+ <h3 class="settings-section__heading" text-translate="true">Block Explorers</h3>
+ <div class="settings-section">
@for (var lpi = 0; lpi < linkProviders.Length; lpi++)
{
@@ -299,6 +307,7 @@
<input type="text" class="form-control block-explorer-link" asp-for="BlockExplorerLinks[i].Link" value="@linkValue" rel="noreferrer noopener" />
</div>
}
+ </div>
</div>
</div>
</div>
### BTCPayServer/Views/UIServer/RPCService.cshtml
@@ -26,10 +26,13 @@
<div asp-validation-summary="All"></div>
}
-<h4 class="mb-3" text-translate="true">Full node connection</h4>
-<p text-translate="true">This page exposes information to connect remotely to your full node via the RPC protocol.</p>
+<h3 class="settings-section__heading" text-translate="true">Full node connection</h3>
+<div class="settings-section">
+<p class="mb-0" text-translate="true">This page exposes information to connect remotely to your full node via the RPC protocol.</p>
+</div>
-<h4 class="mb-3" text-translate="true">Compatible wallets</h4>
+<h3 class="settings-section__heading" text-translate="true">Compatible wallets</h3>
+<div class="settings-section">
<div class="services-list">
<a href="https://fullynoded.app/" target="_blank" class="service" rel="noreferrer noopener">
<img src="~/img/fullynoded.png" width="100" height="100" asp-append-version="true" alt="Fully Noded" />
@@ -40,8 +43,10 @@
<h6>Specter Desktop</h6>
</a>
</div>
+</div>
-<h4 class="mt-4 mb-3" text-translate="true">QR Code connection</h4>
+<h3 class="settings-section__heading" text-translate="true">QR Code connection</h3>
+<div class="settings-section">
<p>@StringLocalizer["You can use QR Code to connect to your {0} from your mobile.", Model.WalletName]</p>
<div class="form-group">
@@ -69,6 +74,7 @@
</div>
}
</div>
+</div>
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
### BTCPayServer/Views/UIServer/ResetUserPassword.cshtml
@@ -17,6 +17,7 @@
{
<div asp-validation-summary="ModelOnly"></div>
}
+ <div class="settings-section">
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" required="required" class="form-control" readonly />
@@ -32,6 +33,7 @@
<input asp-for="ConfirmPassword" required class="form-control" />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
+ </div>
</div>
</div>
</form>
### BTCPayServer/Views/UIServer/SSHService.cshtml
@@ -13,17 +13,19 @@
@if (Model.SSHKeyFileContent != null)
{
- <h4 text-translate="true">Authorized keys</h4>
+ <h3 class="settings-section__heading" text-translate="true">Authorized keys</h3>
<p text-translate="true">You can enter here SSH public keys authorized to connect to your server.</p>
<div class="row">
<div class="col-md-8">
+ <div class="settings-section">
<form method="post">
<div class="form-group">
<textarea asp-for="SSHKeyFileContent" rows="20" cols="80" class="form-control"></textarea>
<span asp-validation-for="SSHKeyFileContent" class="text-danger"></span>
</div>
<button name="command" id="submit" type="submit" class="btn btn-primary" value="Save" text-translate="true">Save</button>
</form>
+ </div>
</div>
</div>
}
### BTCPayServer/Views/UIServer/Services.cshtml
@@ -5,13 +5,17 @@
}
<div class="sticky-header">
- <h2 class="my-1">@ViewData["Title"]</h2>
+ <div class="d-flex flex-column gap-1">
+ <h2 class="mb-0">@ViewData["Title"]</h2>
+ <p class="text-secondary mb-0" text-translate="true">External and Tor-exposed services connected to your server.</p>
+ </div>
</div>
<partial name="_StatusMessage" />
-<div class="mb-5">
- <h4 class="mb-3" text-translate="true">Crypto services exposed by your server</h4>
- <table class="table table-hover mt-2">
+<h3 class="settings-section__heading" text-translate="true">Crypto services exposed by your server</h3>
+<div class="settings-section">
+<div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Crypto</th>
@@ -40,13 +44,14 @@
</tbody>
</table>
</div>
+</div>
@if (Model.OtherExternalServices.Count != 0 || Model.ExternalServices.Any(service => string.IsNullOrEmpty(service.CryptoCode)))
{
- <div class="mb-5">
- <h4 class="mb-3" text-translate="true">Other external services</h4>
-
- <table class="table table-hover mt-2">
+ <h3 class="settings-section__heading" text-translate="true">Other external services</h3>
+ <div class="settings-section">
+ <div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Name</th>
@@ -78,14 +83,15 @@
</tbody>
</table>
</div>
+ </div>
}
@if (Model.TorHttpServices.Count != 0)
{
- <div class="mb-5">
- <h4 class="mb-3" text-translate="true">HTTP-based Tor hidden services</h4>
-
- <table class="table table-hover mt-2">
+ <h3 class="settings-section__heading" text-translate="true">HTTP-based Tor hidden services</h3>
+ <div class="settings-section">
+ <div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Name</th>
@@ -105,14 +111,15 @@
</tbody>
</table>
</div>
+ </div>
}
@if (Model.TorOtherServices.Count != 0)
{
- <div class="mb-5">
- <h4 class="mb-3" text-translate="true">Other Tor hidden services</h4>
-
- <table class="table table-hover mt-2">
+ <h3 class="settings-section__heading" text-translate="true">Other Tor hidden services</h3>
+ <div class="settings-section">
+ <div class="table-responsive settings-section__table">
+ <table class="table table-hover mb-0">
<thead>
<tr>
<th text-translate="true">Name</th>
@@ -132,6 +139,7 @@
</tbody>
</table>
</div>
+ </div>
}
@section PageFootContent {
### BTCPayServer/Views/UIServer/Storage.cshtml
@@ -24,10 +24,12 @@
{
<div asp-validation-summary="All"></div>
}
- <div class="form-group">
+ <div class="settings-section">
+ <div class="form-group mb-0">
<label asp-for="Provider" class="form-label"></label>
<select asp-for="Provider" asp-items="@Model.ProvidersList" class="form-select w-auto"></select>
</div>
+ </div>
</div>
</div>
</form>
### BTCPayServer/Views/UIServer/User.cshtml
@@ -32,6 +32,9 @@
</div>
}
+ <div class="row">
+ <div class="col-xl-8 col-xxl-constrain">
+ <div class="settings-section">
<div class="form-group">
<label asp-for="Name" class="form-label"></label>
<input asp-for="Name" class="form-control" />
@@ -101,4 +104,7 @@
</div>
<input name="EmailConfirmed" type="hidden" value="false">
}
+ </div>
+ </div>
+ </div>
</form>
### BTCPayServer/wwwroot/main/rtl/site.rtl.css
@@ -338,6 +338,13 @@ h2 .icon.icon-info {
background: var(--btcpay-bg-tile);
padding: var(--btcpay-space-l);
}
+/* A short description under a section heading: half the usual gap above and below */
+.settings-section__heading--described {
+ margin-bottom: calc(0.5 * var(--btcpay-space-m));
+}
+.settings-section__description {
+ margin-bottom: calc(0.5 * var(--btcpay-space-m));
+}
/* Sub-heading inside a section: one ladder step below the section heading */
.settings-section__subheading {
font-size: var(--btcpay-font-size-l);
### BTCPayServer/wwwroot/main/site.css
@@ -338,6 +338,13 @@ h2 .icon.icon-info {
background: var(--btcpay-bg-tile);
padding: var(--btcpay-space-l);
}
+/* A short description under a section heading: half the usual gap above and below */
+.settings-section__heading--described {
+ margin-bottom: calc(0.5 * var(--btcpay-space-m));
+}
+.settings-section__description {
+ margin-bottom: calc(0.5 * var(--btcpay-space-m));
+}
/* Sub-heading inside a section: one ladder step below the section heading */
.settings-section__subheading {
font-size: var(--btcpay-font-size-l);Risk score
Our methodology →Why this scored 15/100
Human-validated context
Community notes
Notes can correct, qualify, or add evidence to the AI analysis. Every note shown here has been validated by a human moderator.
No validated notes yet.
The AI analysis stands alone for now. Submit a note if you can add evidence or important context.