From c9d448914e50b0d9b56b34a4ead930b0ad3e8495 Mon Sep 17 00:00:00 2001
From: Alain Kimbu <alainkimbu@gmail.com>
Date: Mon, 24 Aug 2026 15:08:30 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Phase=202:=20button=20consolidation=20(init?=
 =?UTF-8?q?ial=20set)=20=E2=80=94=20replace=20Bootstrap=20btn=20usages=20w?=
 =?UTF-8?q?ith=20design=20tokens=20on=20key=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Store.UI/Pages/BranchAdmin.cshtml       |  2 +-
 Store.UI/Pages/CommunicationLogs.cshtml |  6 +++---
 Store.UI/Pages/Pos.cshtml               | 14 +++++++-------
 Store.UI/Pages/PurchaseOrders.cshtml    | 12 +++++-------
 Store.UI/Pages/VerifyContact.cshtml     |  2 +-
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/Store.UI/Pages/BranchAdmin.cshtml b/Store.UI/Pages/BranchAdmin.cshtml
index 62cd9e0..b7738ac 100644
--- a/Store.UI/Pages/BranchAdmin.cshtml
+++ b/Store.UI/Pages/BranchAdmin.cshtml
@@ -76,7 +76,7 @@
                                 }
                             </td>
                             <td>
-                                <button type="button" class="btn btn-sm"
+                                <button type="button" class="button-secondary btn-sm"
                                         onclick="fillBranchForm(@b.BranchId, '@Html.Raw(Html.Encode(b.Code))', '@Html.Raw(Html.Encode(b.Name))', '@Html.Raw(Html.Encode(b.Address ?? ""))', @(b.IsActive ? "true" : "false"))">
                                     Edit
                                 </button>
diff --git a/Store.UI/Pages/CommunicationLogs.cshtml b/Store.UI/Pages/CommunicationLogs.cshtml
index 38cb659..5319c8e 100644
--- a/Store.UI/Pages/CommunicationLogs.cshtml
+++ b/Store.UI/Pages/CommunicationLogs.cshtml
@@ -31,7 +31,7 @@
             </div>
             <div class="col-auto">
             <button type="submit" class="button-primary">Filter</button>
-                <a asp-page="/CommunicationLogs" class="btn btn-outline-secondary">Clear</a>
+                <a asp-page="/CommunicationLogs" class="button-command">Clear</a>
             </div>
         </form>
     </div>
@@ -89,7 +89,7 @@
                                 @log.Payload
                             </td>
                             <td>
-                                <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#logModal-@log.Id">
+                                <button type="button" class="button-command btn-sm" data-bs-toggle="modal" data-bs-target="#logModal-@log.Id">
                                     Details
                                 </button>
 
@@ -119,7 +119,7 @@
                                                 </div>
                                             </div>
                                             <div class="modal-footer">
-                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                                <button type="button" class="button-secondary" data-bs-dismiss="modal">Close</button>
                                             </div>
                                         </div>
                                     </div>
diff --git a/Store.UI/Pages/Pos.cshtml b/Store.UI/Pages/Pos.cshtml
index 25256d2..11ddf1a 100644
--- a/Store.UI/Pages/Pos.cshtml
+++ b/Store.UI/Pages/Pos.cshtml
@@ -36,9 +36,9 @@
             <p>Fast checkout flow for supermarket operations.</p>
         </div>
         <div class="pos-top-actions">
-            <a class="btn btn-secondary" href="/Dashboard">Back to Dashboard</a>
+            <a class="button-secondary" href="/Dashboard">Back to Dashboard</a>
             <form method="post" asp-page-handler="Logout">
-                <button type="submit" class="btn btn-danger">Sign Out</button>
+                <button type="submit" class="danger">Sign Out</button>
             </form>
         </div>
     </header>
@@ -72,7 +72,7 @@
             <div class="panel-head">
                 <h2>Cart</h2>
                 <div class="cart-head-actions">
-                    <button type="button" class="btn btn-secondary" id="suspendSaleBtn">Suspend</button>
+                    <button type="button" class="button-secondary" id="suspendSaleBtn">Suspend</button>
                     <button type="button" class="btn btn-warning" id="clearCartBtn">Clear</button>
                 </div>
             </div>
@@ -113,7 +113,7 @@
                 <div class="field-row">
                     <div class="tender-head">
                         <label>Payment</label>
-                        <button type="button" class="btn btn-secondary tender-add-btn" id="addTenderLineBtn">+ Add</button>
+                        <button type="button" class="button-secondary tender-add-btn" id="addTenderLineBtn">+ Add</button>
                     </div>
                     <div id="tenderLinesContainer"></div>
                     <div class="tender-summary">
@@ -139,8 +139,8 @@
                         <select id="suspendedSaleSelect">
                             <option value="">No suspended sale</option>
                         </select>
-                        <button type="button" class="btn btn-secondary" id="resumeSaleBtn">Resume</button>
-                        <button type="button" class="btn btn-danger" id="deleteSuspendedBtn">Delete</button>
+                        <button type="button" class="button-secondary" id="resumeSaleBtn">Resume</button>
+                        <button type="button" class="danger" id="deleteSuspendedBtn">Delete</button>
                     </div>
                 </div>
 
@@ -151,7 +151,7 @@
 
                 <div id="offlineQueueBanner" class="offline-queue-banner" hidden>
                     <span id="offlineQueueCount"></span>
-                    <button type="button" id="syncQueueBtn" class="btn btn-secondary">Sync Now</button>
+                    <button type="button" id="syncQueueBtn" class="button-secondary">Sync Now</button>
                 </div>
 
                 <div id="checkoutMessage" class="checkout-message" role="status" aria-live="polite"></div>
diff --git a/Store.UI/Pages/PurchaseOrders.cshtml b/Store.UI/Pages/PurchaseOrders.cshtml
index 54108f3..c13bf90 100644
--- a/Store.UI/Pages/PurchaseOrders.cshtml
+++ b/Store.UI/Pages/PurchaseOrders.cshtml
@@ -28,7 +28,7 @@
         </select>
     </div>
     <div class="col-auto">
-        <button class="btn btn-secondary btn-sm" type="submit">Filter</button>
+        <button class="button-secondary btn-sm" type="submit">Filter</button>
     </div>
 </form>
 
@@ -78,13 +78,12 @@
                                 <form method="post" asp-page-handler="Submit">
                                     @Html.AntiForgeryToken()
                                     <input type="hidden" name="ActionPurchaseOrderId" value="@po.PurchaseOrderId" />
-                                    <button class="btn btn-outline-info btn-sm" type="submit">Submit</button>
+                                    <button class="button-command btn-sm" type="submit">Submit</button>
                                 </form>
                                 <form method="post" asp-page-handler="Cancel">
                                     @Html.AntiForgeryToken()
                                     <input type="hidden" name="ActionPurchaseOrderId" value="@po.PurchaseOrderId" />
-                                    <button class="btn btn-outline-danger btn-sm" type="submit"
-                                            data-confirm="Cancel this PO?" data-confirm-type="danger">Cancel</button>
+                                    <button class="button-command danger btn-sm" type="submit" data-confirm="Cancel this PO?" data-confirm-type="danger">Cancel</button>
                                 </form>
                             }
                             @if (po.Status == "Submitted")
@@ -92,13 +91,12 @@
                                 <form method="post" asp-page-handler="Approve">
                                     @Html.AntiForgeryToken()
                                     <input type="hidden" name="ActionPurchaseOrderId" value="@po.PurchaseOrderId" />
-                                    <button class="btn btn-outline-primary btn-sm" type="submit">Approve</button>
+                                    <button class="button-command btn-sm" type="submit">Approve</button>
                                 </form>
                                 <form method="post" asp-page-handler="Cancel">
                                     @Html.AntiForgeryToken()
                                     <input type="hidden" name="ActionPurchaseOrderId" value="@po.PurchaseOrderId" />
-                                    <button class="btn btn-outline-danger btn-sm" type="submit"
-                                            data-confirm="Cancel this PO?" data-confirm-type="danger">Cancel</button>
+                                    <button class="button-command danger btn-sm" type="submit" data-confirm="Cancel this PO?" data-confirm-type="danger">Cancel</button>
                                 </form>
                             }
                             @if (po.Status == "Approved" || po.Status == "PartiallyReceived")
diff --git a/Store.UI/Pages/VerifyContact.cshtml b/Store.UI/Pages/VerifyContact.cshtml
index b8334bd..425138b 100644
--- a/Store.UI/Pages/VerifyContact.cshtml
+++ b/Store.UI/Pages/VerifyContact.cshtml
@@ -31,6 +31,6 @@
             <h3>Verification Failed</h3>
             <p>@Model.ErrorMessage</p>
         </div>
-        <a href="/Profile" class="btn btn-secondary" style="display: inline-block; padding: 10px 20px; background: #f3f4f6; color: #374151; text-decoration: none; border-radius: 6px; border: 1px solid #d1d5db;">Return to Profile</a>
+        <a href="/Profile" class="button-secondary" style="display: inline-block; padding: 10px 20px; background: #f3f4f6; color: #374151; text-decoration: none; border-radius: 6px; border: 1px solid #d1d5db;">Return to Profile</a>
     }
 </div>

From 086d9d9e547e93fdbe59d404cad210bcbeba9856 Mon Sep 17 00:00:00 2001
From: Alain Kimbu <alainkimbu@gmail.com>
Date: Mon, 24 Aug 2026 15:57:14 +0100
Subject: [PATCH 2/2] Phase 2: Replace legacy btn-danger markup with design
 tokens\n\nMap destructive markup class usages to design-token classes: use
 'button-command danger' for destructive submit/inline actions and 'btn-icon
 danger' for icon delete buttons. Leave page-local CSS helper classes
 (supplier-btn-danger, crm-btn-danger) for a follow-up
 refactor.\n\nCo-authored-by: Copilot
 <223556219+Copilot@users.noreply.github.com>

---
 Store.UI/Pages/AuditLog.cshtml               |  4 ++--
 Store.UI/Pages/BatchTracking.cshtml          |  2 +-
 Store.UI/Pages/BranchAdmin.cshtml            |  2 +-
 Store.UI/Pages/Payments.cshtml               |  8 ++++----
 Store.UI/Pages/Profile.cshtml                | 12 ++++++------
 Store.UI/Pages/PromotionEffectiveness.cshtml |  2 +-
 Store.UI/Pages/Verify2FA.cshtml              |  2 +-
 Store.UI/Pages/_Host.cshtml                  |  4 ++--
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/Store.UI/Pages/AuditLog.cshtml b/Store.UI/Pages/AuditLog.cshtml
index 4cda37f..d9b1301 100644
--- a/Store.UI/Pages/AuditLog.cshtml
+++ b/Store.UI/Pages/AuditLog.cshtml
@@ -100,13 +100,13 @@
         @if (Model.CurrentPage > 1)
         {
             <a href="?page=@(Model.CurrentPage - 1)@(Model.TypeFilter.HasValue ? "&type=" + (int)Model.TypeFilter.Value : "")"
-               class="btn btn-sm btn-secondary">&#8592; Prev</a>
+               class="button-secondary btn-sm">&#8592; Prev</a>
         }
         <span class="pagination-info">Page @Model.CurrentPage</span>
         @if (Model.Movements.Count == Model.PageSize)
         {
             <a href="?page=@(Model.CurrentPage + 1)@(Model.TypeFilter.HasValue ? "&type=" + (int)Model.TypeFilter.Value : "")"
-               class="btn btn-sm btn-secondary">Next &#8594;</a>
+               class="button-secondary btn-sm">Next &#8594;</a>
         }
     </div>
 </div>
diff --git a/Store.UI/Pages/BatchTracking.cshtml b/Store.UI/Pages/BatchTracking.cshtml
index 13a1654..ced4984 100644
--- a/Store.UI/Pages/BatchTracking.cshtml
+++ b/Store.UI/Pages/BatchTracking.cshtml
@@ -92,7 +92,7 @@
                                 <td style="white-space:nowrap;">
                                     <button type="button" class="btn-icon" title="Edit"
                                         onclick="openEdit('@b.BatchId', @System.Text.Json.JsonSerializer.Serialize(b))">✏️</button>
-                                    <button type="button" class="btn-icon btn-danger" title="Delete"
+                                    <button type="button" class="btn-icon danger" title="Delete"
                                         onclick="confirmDelete('@b.BatchId', '@System.Web.HttpUtility.JavaScriptStringEncode(b.BatchNumber)')">🗑️</button>
                                 </td>
                             </tr>
diff --git a/Store.UI/Pages/BranchAdmin.cshtml b/Store.UI/Pages/BranchAdmin.cshtml
index b7738ac..7cb6c25 100644
--- a/Store.UI/Pages/BranchAdmin.cshtml
+++ b/Store.UI/Pages/BranchAdmin.cshtml
@@ -145,7 +145,7 @@
                             <td>
                                 <form method="post" asp-page-handler="Revoke" style="display:inline">
                                     <input type="hidden" name="assignmentId" value="@a.UserBranchRoleId" />
-                                    <button type="submit" class="btn btn-sm btn-danger"
+                                    <button type="submit" class="button-command danger btn-sm"
                                             data-confirm="Remove this assignment?" data-confirm-type="danger">
                                         Revoke
                                     </button>
diff --git a/Store.UI/Pages/Payments.cshtml b/Store.UI/Pages/Payments.cshtml
index 076634c..07ebd2d 100644
--- a/Store.UI/Pages/Payments.cshtml
+++ b/Store.UI/Pages/Payments.cshtml
@@ -40,7 +40,7 @@
                 <label>To <input type="date" name="to" value="@Model.ToDate?.ToString("yyyy-MM-dd")" class="form-control form-control-sm" /></label>
                 <input type="hidden" name="status" value="@((int?)Model.StatusFilter)" />
                 <input type="hidden" name="page" value="1" />
-                <button type="submit" class="btn btn-sm btn-primary">Filter</button>
+                <button type="submit" class="button-primary btn-sm">Filter</button>
             </form>
         </div>
         @if (Model.Settlement is not null)
@@ -103,7 +103,7 @@
                         <option value="@((int)s)" selected="@(Model.StatusFilter == s)">@StatusLabel(s.ToString())</option>
                     }
                 </select>
-                <button type="submit" class="btn btn-sm btn-primary">Filter</button>
+                <button type="submit" class="button-primary btn-sm">Filter</button>
             </form>
         </div>
 
@@ -148,12 +148,12 @@
             <div class="pagination">
                 @if (Model.CurrentPage > 1)
                 {
-                    <a href="?page=@(Model.CurrentPage - 1)&status=@((int?)Model.StatusFilter)&from=@Model.FromDate?.ToString("yyyy-MM-dd")&to=@Model.ToDate?.ToString("yyyy-MM-dd")" class="btn btn-sm btn-outline">Previous</a>
+                    <a href="?page=@(Model.CurrentPage - 1)&status=@((int?)Model.StatusFilter)&from=@Model.FromDate?.ToString("yyyy-MM-dd")&to=@Model.ToDate?.ToString("yyyy-MM-dd")" class="button-command btn-sm">Previous</a>
                 }
                 <span class="page-info">Page @Model.CurrentPage</span>
                 @if (Model.Transactions.Count == Model.PageSize)
                 {
-                    <a href="?page=@(Model.CurrentPage + 1)&status=@((int?)Model.StatusFilter)&from=@Model.FromDate?.ToString("yyyy-MM-dd")&to=@Model.ToDate?.ToString("yyyy-MM-dd")" class="btn btn-sm btn-outline">Next</a>
+                    <a href="?page=@(Model.CurrentPage + 1)&status=@((int?)Model.StatusFilter)&from=@Model.FromDate?.ToString("yyyy-MM-dd")&to=@Model.ToDate?.ToString("yyyy-MM-dd")" class="button-command btn-sm">Next</a>
                 }
             </div>
         }
diff --git a/Store.UI/Pages/Profile.cshtml b/Store.UI/Pages/Profile.cshtml
index e4deeb9..a4bd1ce 100644
--- a/Store.UI/Pages/Profile.cshtml
+++ b/Store.UI/Pages/Profile.cshtml
@@ -356,7 +356,7 @@
                     </div>
                     @if (Model.TwoFactorEnabled)
                     {
-                        <button type="button" class="btn-danger" data-open-blade="disable2FABlade">Disable</button>
+                        <button type="button" class="button-command danger" data-open-blade="disable2FABlade">Disable</button>
                     }
                     else
                     {
@@ -396,7 +396,7 @@
                                     </td>
                                     <td>@key.RegistrationDate.ToString("MMM dd, yyyy HH:mm")</td>
                                     <td style="text-align: right;">
-                                        <button type="button" class="btn-danger" style="padding: 6px 12px; font-size: 0.8rem;" onclick="openRemovePasskeyBlade('@key.Id')">Remove</button>
+                                        <button type="button" class="button-command danger" style="padding: 6px 12px; font-size: 0.8rem;" onclick="openRemovePasskeyBlade('@key.Id')">Remove</button>
                                     </td>
                                 </tr>
                             }
@@ -418,7 +418,7 @@
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                     Recent Activity
                 </h2>
-                <button type="button" class="btn-danger" style="padding: 6px 16px;" data-open-blade="revokeSessionsBlade">Sign Out All</button>
+                <button type="button" class="button-command danger" style="padding: 6px 16px;" data-open-blade="revokeSessionsBlade">Sign Out All</button>
             </div>
             
             <div style="overflow-x: auto; border: 1px solid var(--border); border-radius: 12px;">
@@ -597,7 +597,7 @@
     </div>
     <div class="blade-footer">
         <button type="button" class="btn-secondary" data-close-blade="disable2FABlade">Cancel</button>
-        <button type="submit" form="disable2FAForm" class="btn-danger">Yes, Disable</button>
+        <button type="submit" form="disable2FAForm" class="button-command danger">Yes, Disable</button>
     </div>
 </div>
 
@@ -618,7 +618,7 @@
     </div>
     <div class="blade-footer">
         <button type="button" class="btn-secondary" data-close-blade="revokeSessionsBlade">Cancel</button>
-        <button type="submit" form="revokeSessionsForm" class="btn-danger">Sign Out All</button>
+        <button type="submit" form="revokeSessionsForm" class="button-command danger">Sign Out All</button>
     </div>
 </div>
 
@@ -640,7 +640,7 @@
     </div>
     <div class="blade-footer">
         <button type="button" class="btn-secondary" data-close-blade="removePasskeyBlade">Cancel</button>
-        <button type="submit" form="removePasskeyForm" class="btn-danger">Yes, Remove</button>
+        <button type="submit" form="removePasskeyForm" class="button-command danger">Yes, Remove</button>
     </div>
 </div>
 
diff --git a/Store.UI/Pages/PromotionEffectiveness.cshtml b/Store.UI/Pages/PromotionEffectiveness.cshtml
index 92e6abd..3e626b6 100644
--- a/Store.UI/Pages/PromotionEffectiveness.cshtml
+++ b/Store.UI/Pages/PromotionEffectiveness.cshtml
@@ -22,7 +22,7 @@
             <form method="get" class="filter-form">
                 <label>From <input type="date" name="from" value="@Model.FromDate.ToString("yyyy-MM-dd")" class="form-control form-control-sm" /></label>
                 <label>To <input type="date" name="to" value="@Model.ToDate.ToString("yyyy-MM-dd")" class="form-control form-control-sm" /></label>
-                <button type="submit" class="btn btn-sm btn-primary">Apply</button>
+                <button type="submit" class="button-primary btn-sm">Apply</button>
             </form>
         </div>
     </section>
diff --git a/Store.UI/Pages/Verify2FA.cshtml b/Store.UI/Pages/Verify2FA.cshtml
index 05b6b8f..57f5da7 100644
--- a/Store.UI/Pages/Verify2FA.cshtml
+++ b/Store.UI/Pages/Verify2FA.cshtml
@@ -30,7 +30,7 @@
                 <input type="text" id="code" asp-for="Code" class="form-control" style="width:100%; padding:10px; border-radius:6px; border:1px solid var(--border); font-size:1.2rem; letter-spacing:4px; text-align:center;" maxlength="6" inputmode="numeric" required autofocus />
             </div>
 
-            <button type="submit" class="btn-primary" style="width:100%; padding:12px; background:var(--brand); color:white; border:none; border-radius:6px; font-weight:600; cursor:pointer;">
+            <button type="submit" class="button-primary" style="width:100%; padding:12px; background:var(--brand); color:white; border:none; border-radius:6px; font-weight:600; cursor:pointer;">
                 Verify & Log In
             </button>
         </form>
diff --git a/Store.UI/Pages/_Host.cshtml b/Store.UI/Pages/_Host.cshtml
index c609193..a4b747b 100644
--- a/Store.UI/Pages/_Host.cshtml
+++ b/Store.UI/Pages/_Host.cshtml
@@ -44,11 +44,11 @@
             <p>Efficient inventory and business management</p>
             @if (User?.Identity?.IsAuthenticated == true)
             {
-                <a href="/dashboard" class="btn btn-lg btn-light">Go to Dashboard</a>
+                <a href="/dashboard" class="button-secondary btn-lg">Go to Dashboard</a>
             }
             else
             {
-                <a href="/login" class="btn btn-lg btn-light">Login</a>
+                <a href="/login" class="button-secondary btn-lg">Login</a>
             }
         </div>
     </div>