Refactor client side scripts

Author: pseudocode88

assets/logo.icns

@@ -193,7 +193,7 @@ input[type=text]:focus {
 .Logo {
     width: 40px;
     height: 40px;
-    border-radius: 4px;
+    border-radius: 10px;
 }
 
 .Section h2 {
@@ -216,10 +216,10 @@ input[type=text]:focus {
 }
 
 .BestPostion {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
-    line-height: 1.4;
-    color: var(--content-success);
+    line-height: 1.6;
+    color: var(--content-secondary);
 }
 
 .RList {
@@ -443,15 +443,20 @@ button {
     text-align: right;
 }
 
+.Credits {
+    width: 100%;
+    opacity: 0.5;
+}
+
 .Credits-Title {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 900;
     color: var(--content-muted);
-    margin-bottom: 4px;
+    margin-bottom: 2px;
 }
 
 .Credits-Creator {
-    font-size: 12px;
+    font-size: 10px;
     font-weight: 500;
     color: var(--content-muted);
 }

assets/logo.png

@@ -23,22 +23,14 @@ <h2>Position Size Builder</h2>
         </div>
 
         <div class="PositionSize fc">
-          <!-- <div class="PositionSize-Item fr">
-            <p class="PositionSize-Item-Label">Position Size</p>
-            <p id="lbl-ps" class="PositionSize-Item-Value">0</p>
-          </div> -->
           <div class="PositionSize-Item fr">
-            <p class="PositionSize-Item-Label">Capital Risk</p>
+            <p class="PositionSize-Item-Label">Capital at Risk</p>
             <p id="lbl-risk" class="PositionSize-Item-Value">0</p>
           </div>
           <div class="PositionSize-Item fr">
             <p class="PositionSize-Item-Label">Potential Gain</p>
             <p id="lbl-gain" class="PositionSize-Item-Value">0</p>
           </div>
-          <!-- <div class="PositionSize-Item fr">
-            <p class="PositionSize-Item-Label">Leverage</p>
-            <p id="lbl-lev" class="PositionSize-Item-Value">0</p>
-          </div> -->
           <div class="PositionSize-Item fr">
             <p class="PositionSize-Item-Label">Margin</p>
             <p id="lbl-margin" class="PositionSize-Item-Value">0</p>
@@ -72,7 +64,10 @@ <h2>Position Size Builder</h2>
     <section class="Section">
       <div class="RList fc f-wrap-12">
         <h2>Position Size Suggestion</h2>
-        <p class="BestPostion">Best position size range: <span id="best-position"></span></p>
+        <p class="BestPostion">Position size range based on your risk<br /><span class="clr-danger">Stop Loss</span>
+          <span id="best-stop-loss" class="clr-danger"></span> &emsp;→&emsp; <span id="best-position"
+            class="clr-success"></span>
+        </p>
         <p class="sub-label">Below is a list of different position sizes calculated based on your risk per trade</p>
         <div>
           <div class="fr RList-Title">
@@ -199,7 +194,12 @@ <h2>Account Settings</h2>
     </div>
   </main>
 
-  <script type="text/javascript" src="calc.js"></script>
+  <script type="text/javascript" src="scripts/deps.js"></script>
+  <script type="text/javascript" src="scripts/observer.js"></script>
+  <script type="text/javascript" src="scripts/account-settings.js"></script>
+  <script type="text/javascript" src="scripts/position-size-builder.js"></script>
+  <script type="text/javascript" src="scripts/position-size-suggestion.js"></script>
+  <script type="text/javascript" src="scripts/index.js"></script>
 </body>
 
 </html>

calc.js

@@ -2,14 +2,15 @@ const { app, BrowserWindow } = require('electron');
 
 const createWindow = () => {
     const win = new BrowserWindow({
-        width: 520,
-        minWidth: 520,
+        width: 480,
+        minWidth: 480,
         height: 1000,
+        minHeight: 640,
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false
         },
-        icon: 'assets/logo-1000.png'
+        icon: 'assets/logo-1000.png',
     })
 
     win.resizable = true;