From 91ccf7589e929be785aa383714267eceb5ba6ee8 Mon Sep 17 00:00:00 2001
From: Yaros <thedj.launchpadder.dmx512@gmail.com>
Date: Sat, 17 Aug 2024 21:20:25 +0200
Subject: [PATCH] Fixed dataflash indicator in the top row (#4135)

---
 src/css/main.less                 | 23 +++++++++++++----------
 src/index.html                    |  9 ++++-----
 src/js/update_dataflash_global.js |  4 ++--
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/css/main.less b/src/css/main.less
index 376a5899a3..73524cc36d 100644
--- a/src/css/main.less
+++ b/src/css/main.less
@@ -455,22 +455,25 @@ input[type="number"] {
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.5rem;
-    background-color: var(--surface-300);
     border-radius: 0.5rem;
-    li {
-        background-color: var(--surface-600);
-        height: 0.35rem;
-        position: relative;
-        border-radius: 999px;
-        width: 100% !important;
-    }
+    background-color: var(--surface-300);
+
     .notsupported_global {
         display: none;
     }
+
     progress {
+        height: 0.35rem;
+        border-radius: 12px;
+        appearance: none;
+        -webkit-appearance: none;
+        overflow: hidden;
         &::-webkit-progress-bar {
-            height: 8px;
-            background-color: var(--surface-300);
+            background-color: var(--surface-500);
+        }
+        &::-webkit-progress-value {
+            background-color: var(--primary-500);
+            border-radius: 0 12px 12px 0;
         }
     }
 }
diff --git a/src/index.html b/src/index.html
index 23481d49c7..c338fe68ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -79,13 +79,12 @@
                 </ul>
             </div>
             <div id="dataflash_wrapper_global">
-                <div class="noflash_global" align="center" i18n="sensorDataFlashNotFound"></div>
+                <div class="noflash_global" i18n="sensorDataFlashNotFound"></div>
                 <ul class="dataflash-contents_global">
-                    <li class="dataflash-free_global">
-                        <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
-                    </li>
+                    <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
+                    <progress class="dataflash-progress_global" value="32" max="100"></progress>
                 </ul>
-                <div id="expertMode" align="center">
+                <div id="expertMode">
                     <label>
                         <input name="expertModeCheckbox" class="togglesmall" type="checkbox"/>
                         <span i18n="expertMode" class="expertModeText"></span>
diff --git a/src/js/update_dataflash_global.js b/src/js/update_dataflash_global.js
index 090a4b5531..fd58d1eeaf 100644
--- a/src/js/update_dataflash_global.js
+++ b/src/js/update_dataflash_global.js
@@ -28,11 +28,11 @@ export function update_dataflash_global() {
            display: 'block',
         });
 
-        $(".dataflash-free_global").css({
+        $(".progress-bar__fill").css({
            width: `${100-(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize) / FC.DATAFLASH.totalSize * 100}%`,
            display: 'block',
         });
-        $(".dataflash-free_global div").text(`Dataflash: free ${formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize)}`);
+        $(".dataflash-contents_global div").text(`Dataflash: free ${formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize)}`);
      } else {
         $(".noflash_global").css({
            display: 'block',