From aebcf3729f07b180fe830f19fcd1ce074e0b6ffe Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 16 Mar 2026 18:14:50 +0100
Subject: [PATCH] bootstrap 5: last fixes

---
 .../calculator/calculator.component.html      | 14 ++++-----
 .../calculator/calculator.component.scss      | 31 +++++++++++++++++++
 .../rbf-list/rbf-list.component.html          |  4 +--
 .../statistics/statistics.component.html      |  2 +-
 .../closing-type/closing-type.component.html  |  2 +-
 .../testnet-alert.component.html              |  6 ++--
 .../testnet-alert.component.scss              | 23 ++++++--------
 7 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/components/calculator/calculator.component.html b/frontend/src/app/components/calculator/calculator.component.html
index 3991b17d8..fd939db86 100644
--- a/frontend/src/app/components/calculator/calculator.component.html
+++ b/frontend/src/app/components/calculator/calculator.component.html
@@ -5,8 +5,8 @@
 
   <ng-container *ngIf="(price$ | async) !== undefined; else loading">
 
-    <div class="row justify-content-center align-item-center mb-3">
-      <div class="input-group-prepend">
+    <div class="row calculator-row justify-content-center align-item-center mb-3">
+      <div class="input-group calculator-date-group">
         <input
           class="form-control flex-grow-1 disabled"
           style="max-width: 125px"
@@ -24,8 +24,8 @@
       </div>
     </div>
 
-    <div class="row justify-content-center col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
-      <form [formGroup]="form">
+    <div class="row calculator-row justify-content-center">
+      <form [formGroup]="form" class="calculator-form">
         <div class="input-group input-group-lg mb-1">
           <span class="input-group-text">{{ currency$ | async }}</span>
           <input type="text" inputmode="decimal" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
@@ -54,7 +54,7 @@
 
     <br>
 
-    <div class="row justify-content-center">
+    <div class="row calculator-inline-row justify-content-center">
       <div class="bitcoin-satoshis-text">
         ₿
          <span [innerHTML]="form.get('bitcoin').value | bitcoinsatoshis"></span> 
@@ -62,13 +62,13 @@
       </div>
     </div>
 
-    <div class="row justify-content-center">
+    <div class="row calculator-inline-row justify-content-center">
       <div class="fiat-text">
         <app-fiat [value]="form.get('satoshis').value" digitsInfo="1.2-2" [blockConversion]="blockConversion"></app-fiat>
       </div>
     </div>
 
-    <div class="row justify-content-center mt-3">
+    <div class="row calculator-inline-row justify-content-center mt-3">
       <div class="symbol" *ngIf="{ value: (price$ | async) } as priceData">
         @if (todaySelected) {
           <span>Fiat price last updated <app-time kind="since" [time]="lastFiatPrice$ | async" [fastRender]="true"></app-time>: {{ priceData.value | fiatCurrency : '1.0-0' : (currency$ | async) }}</span>
diff --git a/frontend/src/app/components/calculator/calculator.component.scss b/frontend/src/app/components/calculator/calculator.component.scss
index 4c500b187..6124e67d8 100644
--- a/frontend/src/app/components/calculator/calculator.component.scss
+++ b/frontend/src/app/components/calculator/calculator.component.scss
@@ -33,4 +33,35 @@
   pointer-events: none;
   background-color: var(--secondary);
   opacity: 0.75;
+}
+
+.calculator-date-group {
+  width: 172px;
+}
+
+.calculator-form {
+  width: 100%;
+  max-width: 373px;
+}
+
+.calculator-row > * {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.calculator-inline-row > * {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+:host ::ng-deep ngb-datepicker .ngb-dp-weekday {
+  color: #fff;
+}
+
+:host ::ng-deep ngb-datepicker .ngb-dp-weekdays,
+:host ::ng-deep ngb-datepicker .ngb-dp-header {
+  background-color: var(--bg) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.html b/frontend/src/app/components/rbf-list/rbf-list.component.html
index aace247ad..d1b018be7 100644
--- a/frontend/src/app/components/rbf-list/rbf-list.component.html
+++ b/frontend/src/app/components/rbf-list/rbf-list.component.html
@@ -6,9 +6,9 @@
     <form class="formRadioGroup">
       <div class="btn-group btn-group-toggle" name="radioBasic">
         <label class="btn btn-primary btn-sm" [class.active]="!fullRbf">
-          <input type="radio" [value]="'All'" fragment="" [routerLink]="[]"><span i18n="all">All</span></label>
+          <input type="radio" class="btn-check" [value]="'All'" fragment="" [routerLink]="[]"><span i18n="all">All</span></label>
         <label class="btn btn-primary btn-sm" [class.active]="fullRbf">
-          <input type="radio" [value]="'Full RBF'" fragment="fullrbf" [routerLink]="[]" i18n="transaction.full-rbf">Full RBF</label>
+          <input type="radio" class="btn-check" [value]="'Full RBF'" fragment="fullrbf" [routerLink]="[]" i18n="transaction.full-rbf">Full RBF</label>
       </div>
     </form>
   </div>
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 44360777e..e4898f216 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -27,7 +27,7 @@
                 <label class="btn btn-primary btn-sm" for="dateSpan-1w">1W</label>
                 <input type="radio" class="btn-check" id="dateSpan-1m" [value]="'1m'" [routerLink]="['/graphs' | relativeUrl]" fragment="1m" formControlName="dateSpan">
                 <label class="btn btn-primary btn-sm" for="dateSpan-1m">1M</label>
-                <input type="radio" class="btn-check" id="dateSpan-3m" [value]="'3m'" [routerLink]="['/graphs' | relativeUrl]"fragment="3m" formControlName="dateSpan">
+                <input type="radio" class="btn-check" id="dateSpan-3m" [value]="'3m'" [routerLink]="['/graphs' | relativeUrl]" fragment="3m" formControlName="dateSpan">
                 <label class="btn btn-primary btn-sm" for="dateSpan-3m">3M</label>
               </div>
               <div class="btn-group" role="group">
diff --git a/frontend/src/app/lightning/channel/closing-type/closing-type.component.html b/frontend/src/app/lightning/channel/closing-type/closing-type.component.html
index 8b8f84863..4db4af374 100644
--- a/frontend/src/app/lightning/channel/closing-type/closing-type.component.html
+++ b/frontend/src/app/lightning/channel/closing-type/closing-type.component.html
@@ -1 +1 @@
-<span class="badge rounded-pill badge-{{ label.class }}" >{{ label.label }}</span>
\ No newline at end of file
+<span class="badge rounded-pill text-bg-{{ label.class }}">{{ label.label }}</span>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
index 7e87e312b..93afb9701 100644
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.html
@@ -1,13 +1,11 @@
 <div class="container p-lg-0 pb-0" style="max-width: 100%; margin-top: 7px" *ngIf="storageService.getValue('hideWarning') !== 'hidden'">
-  <div class="alert alert-danger mb-0 text-center">
+  <div class="alert alert-danger alert-dismissible mb-0 text-center" role="alert">
     <div class="message-container">
       <span i18n="warning-testnet">This is a test network. Coins have no value.</span>
       @if (stateService.network === 'testnet') {
         <span i18n="testnet3-deprecated">Testnet3 is deprecated, and will soon be replaced by <a href="/testnet4">Testnet4</a></span>
       }
     </div>
-    <button type="button" class="close" (click)="dismissWarning()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close btn-close-white" aria-label="Close" i18n-aria-label (click)="dismissWarning()"></button>
   </div>
 </div>
diff --git a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
index 3042d8305..d7986ac84 100644
--- a/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
+++ b/frontend/src/app/shared/components/testnet-alert/testnet-alert.component.scss
@@ -7,27 +7,22 @@
 
   display: flex;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
+  position: relative;
 }
 
 .message-container {
   display: flex;
   flex-direction: column;
-  margin-left: auto;
+  margin: 0 auto;
 }
 
-.close {
-  display: flex;
-  color: #fff;
-  align-items: center;
+.btn-close {
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-button {
-  display: flex;
-  margin-left: auto;
-}
-
-span {
-  position: relative;
-  top: -2px;
+.btn-close:hover,
+.btn-close:focus {
+  opacity: 1;
 }
\ No newline at end of file