remvoing style-guide colorsand take out of flex-box in warning

src/app/staticanalysis/staticAnalysisView.js

@@ -42,28 +42,30 @@ staticAnalysisView.prototype.render = function () {
   var self = this
   var view = yo`
     <div class="${css.analysis}">
-      <div id="staticanalysismodules">
+      <div id="staticanalysismodules" class="list-group list-group-flush">
         ${this.modulesView}
       </div>
       <div class="${css.buttons}">
-        <button class="${css.buttonRun}" onclick="${function () { self.run() }}" >Run</button>
-        <label class="${css.label}" for="autorunstaticanalysis">
-          <input id="autorunstaticanalysis"
-            type="checkbox"
-            style="vertical-align:bottom"
-            checked="true"
-          >
-          Auto run
-        </label>
-        <label class="${css.label}" for="checkAllEntries">
-          <input id="checkAllEntries"
-            type="checkbox"
-            onclick="${function (event) { self.checkAll(event) }}"
-            style="vertical-align:bottom"
-            checked="true"
-          >
-          Check/Uncheck all
-        </label>
+        <div class="${css.buttonsInner}">
+          <button class="${css.buttonRun} btn btn-sm btn-primary" onclick="${function () { self.run() }}" >Run</button>
+          <label class="${css.label}" for="autorunstaticanalysis">
+            <input id="autorunstaticanalysis"
+              type="checkbox"
+              style="vertical-align:bottom"
+              checked="true"
+            >
+            Auto run
+          </label>
+          <label class="${css.label}" for="checkAllEntries">
+            <input id="checkAllEntries"
+              type="checkbox"
+              onclick="${function (event) { self.checkAll(event) }}"
+              style="vertical-align:bottom"
+              checked="true"
+            >
+            Check/Uncheck all
+          </label>
+        </div>
       </div>
       <div class="${css.result}" "id='staticanalysisresult'></div>
     </div>
@@ -166,7 +168,7 @@ staticAnalysisView.prototype.renderModules = function () {
         </label>
             `
     })
-    return yo`<div class="${css.analysisModulesContainer}">
+    return yo`<div class="${css.analysisModulesContainer} list-group-item">
                 <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
                 ${entriesDom}
               </div>`

src/app/staticanalysis/styles/staticAnalysisView-styles.js

 var csjs = require('csjs-inject')
 
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
 var css = csjs`
   .analysis {
     display: flex;
@@ -12,20 +9,17 @@ var css = csjs`
     margin-top: 1%;
   }
   .buttons  {
-    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
+    margin: 1rem 0;
+  }
+  .buttonsInner {
     display: flex;
     align-items: center;
+    justify-content: space-around;
   }
   .buttonRun  {
-    ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
     margin-right: 1%;
   }
   .analysisModulesContainer {
-    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
-    margin-bottom: 1%;
-    line-height: 2em;
-    display: flex;
-    flex-direction: column;
   }
   .label {
     display: flex;

src/app/tabs/analysis-tab.js

@@ -25,7 +25,7 @@ class AnalysisTab {
     this.registry.put({api: staticanalysis, name: 'staticanalysis'})
 
     if (this.el) return this.el
-    this.el = yo`<div class="${css.analysisTabView} "id="staticanalysisView">${staticanalysis.render()}</div>`
+    this.el = yo`<div class="${css.analysisTabView}" id="staticanalysisView">${staticanalysis.render()}</div>`
     return this.el
   }
 }

src/app/tabs/styles/analysis-tab-styles.js

@@ -4,8 +4,6 @@ const css = csjs`
   .analysisTabView {
     padding: 2%;
     padding-bottom: 3em;
-    display: flex;
-    flex-direction: column;
   }
 `