From cda1d225bcc366be38f9d221ddeb4ab80ab97680 Mon Sep 17 00:00:00 2001
From: Khwezi Mngoma <khwezi@msn.com>
Date: Sun, 24 May 2026 11:27:59 +0200
Subject: [PATCH 1/2] Final design touches

---
 .../Components/Layout/MainLayout.razor        | 18 ++++-
 .../Components/Pages/Profile.razor            | 69 ++++++++++++++++++-
 .../Components/Pages/Profile.razor.css        | 26 +++++++
 3 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/MidrandBookshop/Components/Layout/MainLayout.razor b/MidrandBookshop/Components/Layout/MainLayout.razor
index 8eb7703..fde5e09 100644
--- a/MidrandBookshop/Components/Layout/MainLayout.razor
+++ b/MidrandBookshop/Components/Layout/MainLayout.razor
@@ -165,12 +165,28 @@
                         }
                     </button>
 
-                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
+                    @* <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                             <circle cx="12" cy="7" r="4" />
                         </svg>
                         Log In
+                    </a> *@
+                    <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                            <circle cx="12" cy="7" r="4" />
+                        </svg>
+                        LogIn
+                    </a>
+
+                    <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
+                       style="width: 32px; height: 32px;"
+                       aria-label="Log In">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                            <circle cx="12" cy="7" r="4" />
+                        </svg>
                     </a>
                 </div>
             </div>
diff --git a/MidrandBookshop/Components/Pages/Profile.razor b/MidrandBookshop/Components/Pages/Profile.razor
index 0bf0e7a..a6b1e5f 100644
--- a/MidrandBookshop/Components/Pages/Profile.razor
+++ b/MidrandBookshop/Components/Pages/Profile.razor
@@ -21,6 +21,73 @@
                         <h5 class="fw-bold m-0">Order History</h5>
                     </div>
 
+                    <div class="d-flex flex-column gap-3">
+                        @if (orderHistory != null)
+                        {
+                            @foreach (var order in orderHistory)
+                            {
+                                <div class="card p-4 shadow-sm order-history-card">
+                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
+
+                                        <div class="flex-grow-1 w-100">
+                                            <div class="order-meta-track mb-2">
+                                                <div class="meta-item-id">
+                                                    <span class="fw-bold text-dark">@order.OrderId</span>
+                                                </div>
+                                                <div class="meta-item-date">
+                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
+                                                </div>
+                                                <div class="meta-item-status">
+                                                    <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
+                                                        @order.Status
+                                                    </span>
+                                                </div>
+                                            </div>
+
+                                            <h6 class="mb-2">
+                                                <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
+                                                    @order.ProductTitle
+                                                </a>
+                                            </h6>
+
+                                            <div class="d-flex align-items-center text-secondary small">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
+                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+                                                </svg>
+                                                <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
+                                            </div>
+                                        </div>
+
+                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
+                                            <div class="text-sm-end mb-sm-2">
+                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
+                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
+                                            </div>
+
+                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
+                                                </svg>
+                                            </button>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            }
+                        }
+                        else
+                        {
+                            <div class="card p-4 text-center text-muted">
+                                Loading order history...
+                            </div>
+                        }
+                    </div>
+                </div>
+                @* <div class="tab-pane fade show active" id="orders" role="tabpanel">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <h5 class="fw-bold m-0">Order History</h5>
+                    </div>
+
                     <div class="table-container-fixed">
                         <table class="table align-middle profile-table m-0">
                             <thead>
@@ -80,7 +147,7 @@
                             </tbody>
                         </table>
                     </div>
-                </div>
+                </div> *@
 
                 <div class="tab-pane fade" id="shipping" role="tabpanel">
                     <div class="d-flex justify-content-between align-items-center mb-4">
diff --git a/MidrandBookshop/Components/Pages/Profile.razor.css b/MidrandBookshop/Components/Pages/Profile.razor.css
index d0d1268..87a100d 100644
--- a/MidrandBookshop/Components/Pages/Profile.razor.css
+++ b/MidrandBookshop/Components/Pages/Profile.razor.css
@@ -176,3 +176,29 @@
     cursor: pointer;
     user-select: none;
 }
+
+/* Shared Card Styling Unification Rules */
+.order-history-card {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    border-radius: 0; /* Matches your address card configuration */
+}
+
+    .order-history-card:hover {
+        border-color: rgba(0, 0, 0, 0.16);
+    }
+
+/* Micro Typography Alignment */
+.xx-small {
+    font-size: 0.65rem;
+}
+
+.tracking-wider {
+    letter-spacing: 0.05rem;
+}
+
+/* Responsive adjustments across layout break-points */
+@media (max-width: 575.98px) {
+    .border-sm-top-0 {
+        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
+    }
+}
\ No newline at end of file

From 2f8afc380ea19b05b055b18261e8917a390ee785 Mon Sep 17 00:00:00 2001
From: Khwezi Mngoma <khwezi@msn.com>
Date: Sun, 24 May 2026 11:29:49 +0200
Subject: [PATCH 2/2] Light refactor

---
 .../Components/Layout/MainLayout.razor        |  7 --
 .../Components/Pages/Profile.razor            | 65 -------------------
 2 files changed, 72 deletions(-)

diff --git a/MidrandBookshop/Components/Layout/MainLayout.razor b/MidrandBookshop/Components/Layout/MainLayout.razor
index fde5e09..4b58446 100644
--- a/MidrandBookshop/Components/Layout/MainLayout.razor
+++ b/MidrandBookshop/Components/Layout/MainLayout.razor
@@ -165,13 +165,6 @@
                         }
                     </button>
 
-                    @* <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                            <circle cx="12" cy="7" r="4" />
-                        </svg>
-                        Log In
-                    </a> *@
                     <a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
diff --git a/MidrandBookshop/Components/Pages/Profile.razor b/MidrandBookshop/Components/Pages/Profile.razor
index a6b1e5f..62ca532 100644
--- a/MidrandBookshop/Components/Pages/Profile.razor
+++ b/MidrandBookshop/Components/Pages/Profile.razor
@@ -83,71 +83,6 @@
                         }
                     </div>
                 </div>
-                @* <div class="tab-pane fade show active" id="orders" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Order History</h5>
-                    </div>
-
-                    <div class="table-container-fixed">
-                        <table class="table align-middle profile-table m-0">
-                            <thead>
-                                <tr>
-                                    <th class="text-uppercase text-muted col-order-id">Order ID</th>
-                                    <th class="text-uppercase text-muted col-title">Title</th>
-                                    <th class="text-uppercase text-muted col-date">Date</th>
-                                    <th class="text-uppercase text-muted col-address">Address</th>
-                                    <th class="text-uppercase text-muted col-status">Status</th>
-                                    <th class="text-uppercase text-muted text-end col-total">Total</th>
-                                    <th class="text-uppercase text-muted text-center col-invoice">Invoice</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                @if (orderHistory != null)
-                                {
-                                    @foreach (var order in orderHistory)
-                                    {
-                                        <tr>
-                                            <td class="fw-medium text-nowrap">@order.OrderId</td>
-                                            <td>
-                                                <a href="/products/@order.ProductId" class="product-link fw-medium text-nowrap" title="@order.ProductTitle">
-                                                    @order.DisplayTitle
-                                                </a>
-                                            </td>
-                                            <td class="text-muted text-nowrap">@order.OrderDate.ToString("MMM dd, yyyy")</td>
-                                            <td>
-                                                <span class="text-secondary d-inline-flex align-items-center gap-1 text-nowrap">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
-                                                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
-                                                    </svg>
-                                                    @order.ShippingAddressName
-                                                </span>
-                                            </td>
-                                            <td>
-                                                <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase text-nowrap">
-                                                    @order.Status
-                                                </span>
-                                            </td>
-                                            <td class="text-end fw-medium text-nowrap">R @order.Total.ToString("N2")</td>
-                                            <td class="text-center">
-                                                <button class="btn btn-link p-0 text-dark action-btn" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                        <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
-                                                    </svg>
-                                                </button>
-                                            </td>
-                                        </tr>
-                                    }
-                                }
-                                else
-                                {
-                                    <tr>
-                                        <td colspan="7" class="text-center text-muted py-4">Loading order history...</td>
-                                    </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </div>
-                </div> *@
 
                 <div class="tab-pane fade" id="shipping" role="tabpanel">
                     <div class="d-flex justify-content-between align-items-center mb-4">