#128 make labels less visible

Code2Gether-Discord · Sep 18, 2023 · 3af5498 · 3af5498
1 parent 3d8fb39
commit 3af5498
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git 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,30 +37,34 @@ 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;
                     Mark paid
                 </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
@@ -38,6 +38,10 @@ a, .btn-link {
     color: red;
 }
 
+.detail-label-fs {
+    font-size: 0.875em;
+}
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;