updated visual

index.html

@@ -12,10 +12,23 @@
     <div class="titlebar">NCOS Companion</div>
     <div class="content">
       <h1 class="centered">Latest Version: V<span id="latest">0.0.0</span></h1>
-      <h4 class="centered">Installed: V<span id="installed">0.0.0</span></h4>
-      <button class="download" id="download">Update to V<span id="latest">0.0.0</span></button>
+      <div class="row">
+        <div class="col-6">
+          <h4 class="centered">Installed: V<span id="installed">0.0.0</span></h4>
+          <button class="download" id="download">Update to V<span id="latest">0.0.0</span></button>    
+        </div>
+        <div class="col-6">
+          <h4 class="centered">Downloading...</h4>
+            <div id="myBar"><span id="progress-label">100%</span></div>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- You can also require other files to run in this process -->
     <script src="./renderer.js"></script>
+    <script>
+      var str = window.getComputedStyle(document.getElementById("progress"), ':after').getPropertyValue('width');
+      console.log(str)
+    </script>
   </body>
 </html>

index.js

@@ -9,6 +9,7 @@ const createWindow = () => {
         height: 300,
         backgroundColor: '#2f3241',
         symbolColor: '#74b1be',
+        resizable: false,
         titleBarStyle: 'hidden',
         titleBarOverlay: true,
         titleBarOverlay: {

style.css

@@ -8,6 +8,11 @@ button {
     -webkit-app-region: no-drag;
 }
 
+h4 {
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+}
 .content {
     padding-left: 20.5%;
     padding-right: 20.5%;
@@ -26,6 +31,36 @@ button {
     background-color: #74b1be;
     color: white;
     border-radius: 5px;
-    font-size: 20px;
     padding: 5px;
+    width: 90%;
+    font-size: 15px;
+    height: 33px;
+}
+
+.row {
+    width: 100%;
+    display: flex;
+}
+
+.col-6 {
+    width: 50%;
+}
+
+#myProgress {
+    width: 100%;
+    border-radius: 5px;
+    border: 1px solid #74b1be;
+}
+
+#myBar {
+    width: 100%;
+    height: 33px;
+    border-radius: 5px;
+    background-color: #74b1be;
+}
+
+#progress-label {
+    position: absolute;
+    color: white;
+    padding: 1.5%;
 }