- restyleing

- added Start section(todo: add cbs after rebase)

.gitignore

@@ -11,3 +11,4 @@ remix
 contracts
 TODO
 .tern-port
+.history

src/app/ui/landing-page/section.js

@@ -2,33 +2,26 @@ let yo = require('yo-yo')
 let csjs = require('csjs-inject')
 
 var css = csjs`
-  .item {
-    display         : flex;
-    flex-direction  : column;
-    align-items     : center;
-    width           : 400px;
-    height          : 160px;
-    padding         : 20px;
-    background-color: var(--primary);
-    font-family     : "Lucida Console", Monaco, monospace;
-    font-size       : 12px;
-    cursor          : default;
-  }
-  span {
+  .text {
+    background-color : var(--success);
     cursor: pointer;
-    font-size: 100%;
+    color: var(--primary);
+    font-weight: normal;
   }
-  span:hover {
-    font-size: 120%;
+  .text:hover {
+    font-weight: bold;
   }
-  a:link {
+  .link {
+    cursor: pointer;
+    background-color : var(--primary);
+    color: var(--success);
+    font-weight: normal;
     text-decoration : none;
-    color: white
-    font-size: 100%;
   }
-  a:hover {
-    color: var(--bg-warning);
-    font-size: 120%;
+  .link:hover {
+    color: var(--success);
+    font-weight: bold;
+    text-decoration : none;
   }
 `
 
@@ -36,22 +29,21 @@ class Section {
   constructor (title, actions) {
     this.title = title
     this.actions = actions
-    this.cardStyle = (this.title === 'Workspaces') ? 'bg-success' : 'border-success'
+    this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-primary' : 'bg-primary text-success border-success'
   }
 
   render () {
     let sectionLook = yo`
-      <div class="card ${this.cardStyle} bg-primary mb-3">
+      <div class="card ${this.cardStyle} p-2" style="min-width: 300px;">
         <div class="card-header">${this.title}</div>
-        <div class="card-body" style="min-width: 350px;">
-        </div>
+        <p></p>
       </div>
     `
     for (var i = 0; i < this.actions.length; i++) {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
           <div>
-            <span class="card-text" onclick=${this.actions[i].payload} >
+            <span class ="${css.text}" onclick=${this.actions[i].payload} >
               ${this.actions[i].label}
             </span>
           </div>
@@ -59,13 +51,14 @@ class Section {
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
           <div >
-            <a  href=${this.actions[i].payload} target="_blank" >
+            <a class="${css.link} text-decoration-none" href=${this.actions[i].payload} target="_blank" >
               ${this.actions[i].label}
             </a>
           </div>
         `)
       }
     }
+    sectionLook.appendChild(yo`<p></p>`)
 
     if (!this._view) {
       this._view = sectionLook