Improve styling

webui/index.html

@@ -12,6 +12,7 @@
     <link data-trunk rel="css" href="src/pages/results/results.css" />
     <link data-trunk rel="css" href="src/components/search_bar/search_bar.css" />
     <link data-trunk rel="css" href="src/components/connection_status/connection_status.css" />
+    <link data-trunk rel="css" href="src/components/indexing_status/indexing_status.css" />
     <link data-trunk rel="css" href="src/components/result/result.css" />
     <link data-trunk rel="copy-dir" href="assets" />
     <meta property="og:site_name" content="Admarus" />

webui/src/components/indexing_status/indexing_status.css

@@ -0,0 +1,28 @@
+#indexing-status {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 2rem 1rem 0 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#indexing-status-message {
+    margin: 0 0 .25rem 0;
+}
+
+#indexing-status-progress {
+    width: min(100%, 20rem);
+    height: 1rem;
+    border-radius: .5rem;
+    overflow: hidden;
+    background-color: #eaeaea;
+    /* border: 2px solid #ccc; */
+    border: 2px solid #2ecc71;
+}
+
+#indexing-status-inner {
+    background-color: #2ecc71;
+    height: 100%;
+    transition: width 1s linear;
+}

webui/src/components/indexing_status/indexing_status.html

@@ -1,16 +1,22 @@
 <div id="indexing-status">
     <virtual present-if={{exploring}}>
-        <div id="indexing-status-message">Your daemon is exploring your folders ({{progress_value}} / {{progress_max}}).</div>
-        <progress id="indexing-status-progress" value={{progress_value}} max={{progress_max}}></progress>
+        <p id="indexing-status-message">Your daemon is discovering files ({{progress_value}} / {{progress_max}}).</p>
+        <div id="indexing-status-progress">
+            <div id="indexing-status-inner" style="width: calc(100% * {{progress_value}} / {{progress_max}});"></div>
+        </div>
     </virtual>
 
     <virtual present-if={{indexing}}>
-        <div id="indexing-status-message">Your daemon is indexing your files ({{progress_value}} / {{progress_max}}).</div>
-        <progress id="indexing-status-progress" value={{progress_value}} max={{progress_max}}></progress>
+        <p id="indexing-status-message">Your daemon is indexing files ({{progress_value}} / {{progress_max}}).</p>
+        <div id="indexing-status-progress">
+            <div id="indexing-status-inner" style="width: calc(100% * {{progress_value}} / {{progress_max}});"></div>
+        </div>
     </virtual>
 
     <virtual present-if={{building_filter}}>
-        <div id="indexing-status-message">Your daemon is compiling its index.</div>
-        <progress id="indexing-status-progress" max={{progress_max}}></progress>
+        <p id="indexing-status-message">Your daemon is compiling its index.</p>
+        <div id="indexing-status-progress">
+            <div id="indexing-status-inner" style="width: 100%;"></div>
+        </div>
     </virtual>
 </div>

webui/src/pages/search/search.css

@@ -64,12 +64,12 @@ h1~p {
 #below-bar {
     justify-content: flex-start;
     align-items: center;
-    padding-top: 2rem;
 }
 
 #buttons {
     display: flex;
     flex-direction: row;
+    padding-top: 2rem;
 }
 
 #buttons>* {