Add notification to set trading account

Author: pseudocode88

index.css

@@ -98,6 +98,7 @@ main {
     padding: 32px;
     margin: auto;
     box-sizing: border-box;
+    position: relative;
 }
 
 section {
@@ -461,4 +462,20 @@ button {
     font-size: 10px;
     font-weight: 500;
     color: var(--content-muted);
+}
+
+.Welcome {
+    background-color: var(--int-support-info-primary-default);
+    display: none;
+}
+
+.Welcome p {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.45;
+    color: var(--content-secondary);
+}
+
+.Welcome span {
+    color: var(--content-warning)
 }

index.html

@@ -14,6 +14,11 @@
   <main class="fc f-wrap-32">
     <img src="assets/logo-1000.png" class="Logo" />
 
+    <section id="welcome-flag" class="Section Welcome">
+      <p>Setup your trading account parameters to use the position size builder. Scroll to the bottom
+        to see the account settings.</p>
+    </section>
+
     <section class="Section">
       <div class="fc f-wrap-24">
         <div class="fc f-wrap-12">

scripts/account-settings.js

@@ -70,11 +70,14 @@ var AccountSettings = ($, db) => {
     }
 
     var updateDB = () => {
+        var that = this;
         db.findOne({ exchange: 'default' }, (err, docs) => {
             if (!docs) {
-                db.insert(data)
+                db.insert(data);
+                that.observer.fire('AccountSettingsLoaded');
             } else {
                 db.update({ exchange: 'default' }, data);
+                that.observer.fire('AccountSettingsLoaded');
             }
         })
     }
@@ -118,6 +121,8 @@ var AccountSettings = ($, db) => {
             if (docs) {
                 updateLocalData(docs);
                 that.observer.fire('AccountSettingsLoaded');
+            } else {
+                that.observer.fire('AccountSettingsNotFound');
             }
             render();
         })

scripts/index.js

@@ -20,4 +20,10 @@ $(window).on('load', () => {
 
     this.observer.on('PositionSizeCalculated', this.modules.PositionSizeSuggestion.render);
     this.observer.on('AccountSettingsLoaded', this.modules.PositionSizeBuilder.sync);
+    this.observer.on('AccountSettingsNotFound', () => {
+        $('#welcome-flag').show();
+    });
+    this.observer.on('AccountSettingsLoaded', () => {
+        $('#welcome-flag').hide();
+    });
 })