From 182e625b1996ef6003a9de26fc4381b9f564c976 Mon Sep 17 00:00:00 2001
From: djnitehawk <djnitehawk83@gmail.com>
Date: Tue, 18 Mar 2025 16:11:57 +0530
Subject: [PATCH] improve ui and change to dark theme

---
 src/Client/Pages/BMS.razor             | 10 ++--
 src/Client/Pages/Index.razor           | 18 +++----
 src/Client/Pages/Settings.razor        | 24 ++++-----
 src/Client/Shared/Loader.razor         |  7 ++-
 src/Client/Shared/MainLayout.razor.css |  4 +-
 src/Client/wwwroot/css/app.css         | 53 ++++++++++++++++++++
 src/Client/wwwroot/index.html          | 68 +++++++++++++-------------
 src/changelog.md                       |  3 +-
 8 files changed, 120 insertions(+), 67 deletions(-)

diff --git a/src/Client/Pages/BMS.razor b/src/Client/Pages/BMS.razor
index 419baeb..ac48f7d 100644
--- a/src/Client/Pages/BMS.razor
+++ b/src/Client/Pages/BMS.razor
@@ -17,7 +17,7 @@
             JK BMS
         </h5>
         <div class="card-body p-0">
-            <div class="container m-0 p-0">
+            <div class="container m-0 p-0 jkbms">
                 <div class="row text-center m-0 p-0">
                     <div class="col">
                         <div class="fw-bold fs-1 mt-2 text-primary">
@@ -26,7 +26,7 @@
                         <div class="fs-1 my-1 mx-5 border-top">
                             @status.CapacityPct%
                         </div>
-                        <div class="fs-5 pack-capacity m-0 border-top" style="cursor: pointer;" @onclick="ToggleCapacityKwh">
+                        <div class="fs-5 pack-capacity m-0 bg-light" style="cursor: pointer;" @onclick="ToggleCapacityKwh">
                             @(GetPackCapacity())
                         </div>
                     </div>
@@ -62,7 +62,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="row text-center m-1 p-1 fw-bold" style="font-size:0.8em; background-color:aliceblue">
+                <div class="row text-center m-1 p-1 fw-bold" style="font-size:0.8em; background-color:#272f36;">
                     <div class="col">
                         <div class="fw-normal">
                             Mosfet
@@ -90,7 +90,7 @@
                         <div class="fw-bold">
                             @($"{status.MinCell.Value:0.000} V")
                         </div>
-                        <div class="border-top pt-1">
+                        <div class="pt-1">
                             Max Cell: <span>@status.MaxCell.Key</span>
                         </div>
                         <div class="fw-bold">
@@ -104,7 +104,7 @@
                         <div class="fw-bold">
                             @($"{status.CellDiff:0.000} V")
                         </div>
-                        <div class="pt-1 border-top">
+                        <div class="pt-1">
                             Cell Average:
                         </div>
                         <div class="fw-bold">
diff --git a/src/Client/Pages/Index.razor b/src/Client/Pages/Index.razor
index 2fb6536..a97befc 100644
--- a/src/Client/Pages/Index.razor
+++ b/src/Client/Pages/Index.razor
@@ -43,7 +43,7 @@
                     </h5>
                     <div class="card-body pt-0">
                         <div class="container text-center fw-bold p-0">
-                            <div class="row bg-light rounded">
+                            <div class="row rounded">
                                 <div class="progress p-0" style="height:2px;">
                                     <span class="progress-bar" role="progressbar" style="width: @status.LoadPercentage%" aria-valuenow="25"
                                           aria-valuemin="0" aria-valuemax="100"></span>
@@ -56,9 +56,7 @@
                             <div class="row">
                                 <div class="col">
                                     <div class="fs-5 text-muted">@status.OutputVoltage</div>
-                                    <span class="text-body">
-                                        V
-                                    </span>
+                                    V
                                 </div>
                                 <div class="col">
                                     <div class="row h-100 align-content-center">
@@ -85,7 +83,7 @@
                     </h5>
                     <div class="card-body pt-0">
                         <div class="container text-center fw-bold p-0">
-                            <div class="row bg-light rounded">
+                            <div class="row rounded">
                                 <div class="progress p-0" style="height:2px;">
                                     <span class="progress-bar" role="progressbar" style="width: @status.PVPotential%" aria-valuenow="25" aria-valuemin="0"
                                           aria-valuemax="100"></span>
@@ -98,9 +96,7 @@
                             <div class="row">
                                 <div class="col">
                                     <div class="fs-5 text-muted">@status.PVInputVoltage</div>
-                                    <span class="text-body">
-                                        V
-                                    </span>
+                                    V
                                 </div>
                                 <div class="col">
                                     <div class="fs-5 text-muted">@status.PVInputCurrent</div>
@@ -145,9 +141,9 @@
                                 <div class="col-4">
                                     <div class="container bg-light rounded-1 p-1 m-0 fw-bold text-muted fs-1">
                                         <div class="fs-6 voltage">@GetChargeMode()</div>
-                                        <div class="text-black charge-discharge">@status.BatteryVoltage</div>
-                                        <div class="fs-4 text-black-50">V</div>
-                                        <div class="fs-6 bg-white text-dark">@GetCRate() C</div>
+                                        <div class="charge-discharge">@status.BatteryVoltage</div>
+                                        <div class="fs-4">V</div>
+                                        <div class="fs-6 crate">@GetCRate() C</div>
                                     </div>
                                 </div>
                                 <div class="col-4">
diff --git a/src/Client/Pages/Settings.razor b/src/Client/Pages/Settings.razor
index fbcaeea..a039b6d 100644
--- a/src/Client/Pages/Settings.razor
+++ b/src/Client/Pages/Settings.razor
@@ -26,7 +26,7 @@
                     Max Combined Charge Current (A):
                 </div>
                 <div class="col-6 p-2 bg-secondary">
-                    <input @bind-value=settings.MaxCombinedChargeCurrent class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
+                    <input @bind-value=settings.MaxCombinedChargeCurrent class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
                     <button type="button" class="btn btn-light d-inline m-1"
                             @onclick="()=>SetChargeCurrent(Setting.CombinedChargeCurrent,settings.MaxCombinedChargeCurrent)">
                         <span class="@Spinner(Button.MaxCombinedChargeCurrent)"></span>
@@ -40,7 +40,7 @@
                     Max Grid Charge Current (A):
                 </div>
                 <div class="col-6 p-2 bg-secondary">
-                    <input @bind-value=settings.MaxACChargeCurrent class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
+                    <input @bind-value=settings.MaxACChargeCurrent class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
                     <button type="button" class="btn btn-light d-inline m-1"
                             @onclick="()=>SetChargeCurrent(Setting.UtilityChargeCurrent,settings.MaxACChargeCurrent)">
                         <span class="@Spinner(Button.MaxUtilityChargeCurrent)"></span>
@@ -109,7 +109,7 @@
                 <div class="col-6 bg-secondary p-1">
                     <div class="row">
                         <div>
-                            <input @bind-value=settings.BulkChargeVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
+                            <input @bind-value=settings.BulkChargeVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
                             <button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BulkVoltage)">
                                 <span class="@Spinner(Button.BulkVoltage)"></span>
                                 <span class="@Hidden(Button.BulkVoltage)">Save</span>
@@ -125,7 +125,7 @@
                 <div class="col-6 bg-secondary p-1">
                     <div class="row">
                         <div>
-                            <input @bind-value=settings.FloatChargeVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
+                            <input @bind-value=settings.FloatChargeVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
                             <button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.FloatVoltage)">
                                 <span class="@Spinner(Button.FloatVoltage)"></span>
                                 <span class="@Hidden(Button.FloatVoltage)">Save</span>
@@ -141,7 +141,7 @@
                 <div class="col-6 bg-secondary p-1">
                     <div class="row">
                         <div>
-                            <input @bind-value=settings.DischargeCuttOffVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text"
+                            <input @bind-value=settings.DischargeCuttOffVoltage class="form-control d-inline m-1" style="width:4rem;" type="text"
                                    maxlength="4">
                             <button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.DischargeCutOff)">
                                 <span class="@Spinner(Button.DischargeCutOff)"></span>
@@ -158,7 +158,7 @@
                 <div class="col-6 bg-secondary p-1">
                     <div class="row">
                         <div>
-                            <input @bind-value=settings.BackToGridVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text" maxlength="4">
+                            <input @bind-value=settings.BackToGridVoltage class="form-control d-inline m-1" style="width:4rem;" type="text" maxlength="4">
                             <button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BackToGrid)">
                                 <span class="@Spinner(Button.BackToGridVoltage)"></span>
                                 <span class="@Hidden(Button.BackToGridVoltage)">Save</span>
@@ -174,7 +174,7 @@
                 <div class="col-6 bg-secondary p-1">
                     <div class="row">
                         <div>
-                            <input @bind-value=settings.BackToBatteryVoltage class="form-control bg-light d-inline m-1" style="width:4rem;" type="text"
+                            <input @bind-value=settings.BackToBatteryVoltage class="form-control d-inline m-1" style="width:4rem;" type="text"
                                    maxlength="4">
                             <button type="button" class="btn btn-light d-inline m-1" @onclick="()=>SetVoltage(Setting.BackToBattery)">
                                 <span class="@Spinner(Button.BackToBattery)"></span>
@@ -194,7 +194,7 @@
                 <div class="col-6 p-2 bg-secondary">
                     <div class="row">
                         <div style="width:6rem;">
-                            <input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.PV_MaxCapacity>
+                            <input type="number" class="form-control" @bind-value=settings.SystemSpec.PV_MaxCapacity>
                         </div>
                         <div class="col-1 fw-bolder fs-5 m-1 text-white">Watts</div>
                     </div>
@@ -207,7 +207,7 @@
                 <div class="col-6 p-2 bg-secondary">
                     <div class="row">
                         <div style="width:6rem;">
-                            <input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.BatteryCapacity>
+                            <input type="number" class="form-control" @bind-value=settings.SystemSpec.BatteryCapacity>
                         </div>
                         <div class="col-1 fw-bolder fs-5 m-1 text-white">Ah</div>
                     </div>
@@ -220,7 +220,7 @@
                 <div class="col-6 p-2 bg-secondary">
                     <div class="row">
                         <div style="width:6rem;">
-                            <input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.BatteryNominalVoltage>
+                            <input type="number" class="form-control" @bind-value=settings.SystemSpec.BatteryNominalVoltage>
                         </div>
                         <div class="col-1 fw-bolder fs-5 m-1 text-white">V</div>
                     </div>
@@ -233,7 +233,7 @@
                 <div class="col-6 p-2 bg-secondary">
                     <div class="row">
                         <div style="width:6rem;">
-                            <input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.SunlightStartHour>
+                            <input type="number" class="form-control" @bind-value=settings.SystemSpec.SunlightStartHour>
                         </div>
                         <div class="col-1 fw-bolder fs-5 m-1 text-white">Hrs</div>
                     </div>
@@ -246,7 +246,7 @@
                 <div class="col-6 p-2 bg-secondary">
                     <div class="row">
                         <div style="width:6rem;">
-                            <input type="number" class="form-control bg-light" @bind-value=settings.SystemSpec.SunlightEndHour>
+                            <input type="number" class="form-control" @bind-value=settings.SystemSpec.SunlightEndHour>
                         </div>
                         <div class="col-1 fw-bolder fs-5 m-1 text-white">Hrs</div>
                     </div>
diff --git a/src/Client/Shared/Loader.razor b/src/Client/Shared/Loader.razor
index 74b2c82..df40835 100644
--- a/src/Client/Shared/Loader.razor
+++ b/src/Client/Shared/Loader.razor
@@ -1,7 +1,7 @@
 @if (Enabled)
 {
     <div class="container w-100 text-center">
-        <div class="my-auto p-5">
+        <div class="my-auto p-5 loader">
             <span class="spinner-border"></span>
             <div class="fw-bold">... Loading ...</div>
         </div>
@@ -9,5 +9,8 @@
 }
 
 @code{
-    [Parameter] public bool Enabled { get; set; }
+
+    [Parameter]
+    public bool Enabled { get; set; }
+
 }
\ No newline at end of file
diff --git a/src/Client/Shared/MainLayout.razor.css b/src/Client/Shared/MainLayout.razor.css
index 6917dd8..ad69d71 100644
--- a/src/Client/Shared/MainLayout.razor.css
+++ b/src/Client/Shared/MainLayout.razor.css
@@ -9,7 +9,7 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
 }
 
 .top-row {
@@ -77,4 +77,4 @@ main {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
-}
+}
\ No newline at end of file
diff --git a/src/Client/wwwroot/css/app.css b/src/Client/wwwroot/css/app.css
index 78d4eeb..48444bf 100644
--- a/src/Client/wwwroot/css/app.css
+++ b/src/Client/wwwroot/css/app.css
@@ -2,6 +2,8 @@
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-color: #191919;;
+    color: #dddddd;
 }
 
 h1:focus {
@@ -92,8 +94,13 @@ a, .btn-link {
     height: 0.75rem;
 }
 
+.card {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
+}
+
 .card-header {
     padding: 0.2rem;
+    background-color: rgb(9 50 89);
 }
 
 .card-body {
@@ -125,3 +132,49 @@ a, .btn-link {
         opacity: 0;
     }
 }
+
+.loader {
+    color: #e1e1e1;
+}
+
+.bg-light {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #160a19 70%) !important;
+}
+
+.text-muted {
+    color: #c3c3c3 !important;
+}
+
+.crate {
+    background-color: #03182c;
+}
+
+.progress {
+    background-color: #002952;
+}
+
+.text-danger {
+    color: rgb(188 36 51) !important;
+}
+
+.border-top {
+    border-top: 1px solid #3c3c3c !important;
+}
+
+.jkbms {
+    max-width: 100%;
+}
+
+.nav-tabs .nav-link.active {
+    background-color: #bbbbbb;
+    color: black;
+}
+
+.form-control {
+    background-color: #d0d0d0
+}
+
+.btn-light {
+    background-color: #7d97b1;
+    border-color: #656769;
+}
\ No newline at end of file
diff --git a/src/Client/wwwroot/index.html b/src/Client/wwwroot/index.html
index 85981cd..302b9f3 100644
--- a/src/Client/wwwroot/index.html
+++ b/src/Client/wwwroot/index.html
@@ -2,51 +2,51 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <title>InverterMon</title>
-    <base href="/" />
-    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
-    <link href="css/app.css" rel="stylesheet" />
-    <link href="InverterMon.Client.styles.css" rel="stylesheet" />
-    <link href="manifest.json" rel="manifest" />
-    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <base href="/"/>
+    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
+    <link href="css/app.css" rel="stylesheet"/>
+    <link href="InverterMon.Client.styles.css" rel="stylesheet"/>
+    <link href="manifest.json" rel="manifest"/>
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png"/>
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png"/>
     <script src="bootstrap.bundle.min.js"></script>
     <script src="https://unpkg.com/@antv/g2plot@1.1.28/dist/g2plot.js"></script>
     <script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
 </head>
 
 <body>
-    <div id="app">
-        <div class="container w-100 text-center">
-            <div class="my-auto p-5">
-                <span class="spinner-border"></span>
-                <div class="fw-bold">... Loading ...</div>
-            </div>
+<div id="app">
+    <div class="container w-100 text-center">
+        <div class="my-auto p-5 loader">
+            <span class="spinner-border"></span>
+            <div class="fw-bold">... Loading ...</div>
         </div>
     </div>
+</div>
 
-    <script src="_framework/blazor.webassembly.js"></script>
-    <script>
-        let lastVisibleTime = Date.now();
-        document.addEventListener("visibilitychange", function () {
-            if (document.hidden) {                
-                lastVisibleTime = Date.now();
-            } else {
-                if (Date.now() - lastVisibleTime > 180000) {
-                    location.reload();
-                }
+<script src="_framework/blazor.webassembly.js"></script>
+<script>
+    let lastVisibleTime = Date.now();
+    document.addEventListener("visibilitychange", function () {
+        if (document.hidden) {
+            lastVisibleTime = Date.now();
+        } else {
+            if (Date.now() - lastVisibleTime > 180000) {
+                location.reload();
             }
-        });
-    </script>
-    <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', function () {
-                navigator.serviceWorker.register('service-worker.js');
-            });
         }
-    </script>
+    });
+</script>
+<script>
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function () {
+            navigator.serviceWorker.register('service-worker.js');
+        });
+    }
+</script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/changelog.md b/src/changelog.md
index 776e294..d8bcc04 100644
--- a/src/changelog.md
+++ b/src/changelog.md
@@ -1,3 +1,4 @@
 ## changelog
 
-- fix charge mode display when not charging
\ No newline at end of file
+- change to a dark theme
+- fix ui bugs
\ No newline at end of file