From 3af5498a0f8ac037132fc6ae49aa1f2dec372642 Mon Sep 17 00:00:00 2001
From: grodis <grodiscostas@hotmail.com>
Date: Mon, 18 Sep 2023 17:03:40 +0300
Subject: [PATCH] #128 make labels less visible

---
 subtrack.MAUI/Pages/SubscriptionDetails.razor | 28 +++++++++++--------
 subtrack.MAUI/wwwroot/css/app.css             |  4 +++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/subtrack.MAUI/Pages/SubscriptionDetails.razor b/subtrack.MAUI/Pages/SubscriptionDetails.razor
index 01f043a..ff1fffd 100644
--- a/subtrack.MAUI/Pages/SubscriptionDetails.razor
+++ b/subtrack.MAUI/Pages/SubscriptionDetails.razor
@@ -15,7 +15,7 @@
 else
 {
     <div class="container">
-        <div class="d-flex justify-content-between border-bottom py-2">
+        <div class="d-flex justify-content-between py-2">
             <div>
                 <BackButton Url="@ReturnUrl"></BackButton>
             </div>
@@ -26,8 +26,9 @@ else
                 <EditButton Url="@EditUrl"></EditButton>
             </div>
         </div>
-        <div class="row border-bottom py-2">
-            <label>Billing</label>
+        <div class="row py-2">
+            <hr />
+            <label class="opacity-50 detail-label-fs">Billing</label>
             <div class="col-12 d-flex justify-content-center">
                 <h5 class="d-inline-block">@($"{_subscription.Cost:C}")</h5>&nbsp;&nbsp;
                 @if (_subscription.IsAutoPaid)
@@ -36,15 +37,17 @@ else
                 }
             </div>
             <label class="col-12 d-flex justify-content-center">@GetOccurrenceText()</label>
+            <hr />
         </div>
-        <div class="row border-bottom py-2 @CssUtil.GetDueClass(_nextPaymentDate.TimeRemainingFromToday(dateTimeProvider).Days)">
+        <div class="row py-2 @CssUtil.GetDueClass(_nextPaymentDate.TimeRemainingFromToday(dateTimeProvider).Days)">
             <div class="col-12 d-flex flex-column justify-content-center">
-                <label>Next payment</label>
+                <label class="detail-label-fs opacity-50">Next payment</label>
                 <div class="text-center">@_nextPaymentDate.ToString("MMMM dd, yyyy", _usCulture)</div>
                 <div class="text-center">@_dueTimeText</div>
             </div>
         </div>
-        <div class="row border-bottom py-2">
+        <div class="row py-2">
+
             <div class="col-12 d-flex justify-content-center">
                 <button aria-label="Mark as paid" type="button" class="btn btn-primary" onclick="@(() => MarkSubscriptionAsPaid())">
                     <i class="fa-solid fa-check"></i>&nbsp;
@@ -52,14 +55,16 @@ else
                 </button>
             </div>
         </div>
-        <div class="row border-bottom py-2">
-            <label>Latest payment</label>
+        <div class="row py-2">
+            <hr />
+            <label class="opacity-50 detail-label-fs">Latest payment</label>
             <div class="col-12 d-flex justify-content-center">
                 @_subscription.LastPayment.ToString("MMMM dd, yyyy", _usCulture)
             </div>
         </div>
-        <div class="row border-bottom py-2">
-            <label>Annually</label>
+        <div class="row py-2">
+            <hr/>
+            <label class="opacity-50 detail-label-fs">Annually</label>
             <div class="col-12 d-flex justify-content-center">
                 @($"~{Math.Round(_subscriptionsCost, 2):C}")
             </div>
@@ -70,7 +75,8 @@ else
                 @_subscription.Description
             </div>
         }
-        <div class="row border-bottom py-2">
+        <div class="row py-2">
+            <hr />
             <div class="col-12 d-flex justify-content-center">
                 <button onclick="@(() => OnDelete())" aria-label="Delete subscription" type="button" class="btn btn-danger">
                     <i class="fa-sharp fa-solid fa-trash"></i>&nbsp;
diff --git a/subtrack.MAUI/wwwroot/css/app.css b/subtrack.MAUI/wwwroot/css/app.css
index 7f0966c..5be0001 100644
--- a/subtrack.MAUI/wwwroot/css/app.css
+++ b/subtrack.MAUI/wwwroot/css/app.css
@@ -38,6 +38,10 @@ a, .btn-link {
     color: red;
 }
 
+.detail-label-fs {
+    font-size: 0.875em;
+}
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;