From 93ea76078698d9aac5f6c47e8546780677085f50 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 4 Apr 2019 15:17:41 +0200
Subject: [PATCH 1/5] decreasing the height of the line for list items

---
 src/app/components/plugin-manager-component.js | 2 +-
 src/app/staticanalysis/staticAnalysisView.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/plugin-manager-component.js b/src/app/components/plugin-manager-component.js
index add33bcc27..f8bf6d0689 100644
--- a/src/app/components/plugin-manager-component.js
+++ b/src/app/components/plugin-manager-component.js
@@ -88,7 +88,7 @@ class PluginManagerComponent extends ApiFactory {
       </button>`
 
     return yo`
-      <article class="list-group-item" title="${name}" >
+      <article class="list-group-item py-1" title="${name}" >
         <div class="${css.row} justify-content-between align-items-center">
           <h6 class="${css.displayName}">${displayName}</h6>
           ${activationButton}
diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index d8ce2c2fb5..beace33ca6 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/src/app/staticanalysis/staticAnalysisView.js
@@ -172,7 +172,7 @@ staticAnalysisView.prototype.renderModules = function () {
         </label>
             `
     })
-    return yo`<div class="${css.analysisModulesContainer} list-group-item">
+    return yo`<div class="${css.analysisModulesContainer} list-group-item py-1">
                 <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
                 ${entriesDom}
               </div>`

From 7fc9b844090d386235025f279673c48436b7e090 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 4 Apr 2019 18:28:35 +0200
Subject: [PATCH 2/5] Landing page new style -removed some links

-added get started
---
 src/app/ui/landing-page/landing-page.js | 58 +++++++++++++++----------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 02e7871512..a72613fe96 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -13,7 +13,7 @@ let css = csjs`
     align-content   : space-around;
     padding         : 20px;
     max-width       : 340px;
-    min-height      : 300px;
+    min-height      : 200px;
     background-color: var(--light);
     font-family     : "Lucida Console", Monaco, monospace;
   }
@@ -36,6 +36,10 @@ let css = csjs`
   }
   .im:hover {
   }
+  .getStarted {
+    min-width       : 600px;
+    font-size       : xx-large;
+  }
 }
 `
 
@@ -69,18 +73,27 @@ export class LandingPage extends ApiFactory {
         }
       })
     }
+    let fileExplorer = globalRegistry.get('fileexplorer/browser').api
     var actionsStart = [
       { label: 'New file',
         type: 'callback',
         payload: () => {
-          let fileExplorer = globalRegistry.get('fileexplorer/browser').api
           fileExplorer.createNewFile()
         }
       },
-      { label: 'Open file',
+      { label: yo`
+          <span>
+            <input type="file" onchange=${
+              (event) => {
+                event.stopPropagation()
+                fileExplorer.uploadFile(event)
+              }
+            } multiple />
+          </span>
+        `,
         type: `callback`,
         description: ``,
-        payload: () => { this.alert(`-imported from gist-`) }
+        payload: () => {}
       },
       { label: 'Import from Gist',
         type: `callback`,
@@ -118,20 +131,15 @@ export class LandingPage extends ApiFactory {
 
     var actionsHelp = [
       { label: 'Remix documentation', type: `link`, description: ``, payload: `https://remix.readthedocs.io/en/latest/#` },
-      { label: 'Access local file system. remixd', description: ``, type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html` },
       { label: 'Medium posts', type: `link`, description: ``, payload: `https://medium.com/remix-ide` },
-      { label: 'Plugins & modules', type: `link`, description: ``, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md` },
-      { label: 'GitHub repo', type: `link`, description: ``, payload: `https://github.com/ethereum/remix-ide` },
       { label: 'Gitter channel', type: `link`, description: ``, payload: `https://gitter.im/ethereum/remix` },
-      { label: 'Stack Overflow', type: `link`, description: ``, payload: `https://stackoverflow.com/questions/tagged/remix` },
-      { label: 'Reddit', type: `link`, description: ``, payload: `https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1` }
     ]
 
     var sectionStart = new Section('Start', actionsStart)
     let sectionHelp = new Section('Help', actionsHelp)
 
     this.sectionWorkspaceMain = []
-    this.sectionWorkspaceOthers = []
+    //this.sectionWorkspaceOthers = []
     defaultWorkspaces(appManager).forEach((workspace) => {
       if (workspace.isMain) {
         this.sectionWorkspaceMain.push({
@@ -141,12 +149,12 @@ export class LandingPage extends ApiFactory {
           payload: () => { workspace.activate() }
         })
       } else {
-        this.sectionWorkspaceOthers.push({
+        /* this.sectionWorkspaceOthers.push({
           label: workspace.title,
           type: 'callback',
           description: workspace.description,
           payload: () => { workspace.activate() }
-        })
+        }) */
       }
     })
 
@@ -169,27 +177,27 @@ export class LandingPage extends ApiFactory {
   render () {
     let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
     let totalLook = yo`
-      <div class="${css.landingPage}">
+      <div class="border ${css.landingPage}">
       </div>
     `
 
     let main = yo`<div class="container m-4"></div>`
     for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
       main.appendChild(yo`
-        <span class="btn btn-secondary btn-lg m-2" onclick="${this.sectionWorkspaceMain[i].payload}">
+        <span class="btn btn-secondary btn-lg m-2" style=" font-size: x-large;" onclick="${this.sectionWorkspaceMain[i].payload}">
           ${this.sectionWorkspaceMain[i].label}
         </span>
       `)
     }
 
-    let others = yo`<div class="container m-4"></div>`
+     /*let others = yo`<div class="container m-4"></div>`
     for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {
       others.appendChild(yo`
         <span class="btn btn-secondary btn-sm m-2" onclick="${this.sectionWorkspaceOthers[i].payload}">
           ${this.sectionWorkspaceOthers[i].label}
         </span>
       `)
-    }
+    }*/
 
     let docs = yo`<div class="container m-4"></div>`
     for (let i = 0; i < this.sections.length; i++) {
@@ -203,15 +211,17 @@ export class LandingPage extends ApiFactory {
     totalLook.appendChild(yo`
       <div class="container-fluid">
         <div class="row">
-          <div class="card m-4 p-4" style="min-width: 50%;">
-            <img class="card-img-top ${css.im}" src="${logo}" />
-            <div class="card-body-fluid m-4">
-              <h5 class="card-header m-4">Workspaces</h5>
-              <h6>Create, compile and execute smart contracts</h6>
-              <p>${main}</p>
-              <h6> Most used plugins</h6>
-              <p>${others}</p>
+          <div class="column" style="50%;">
+            <div class="card m-4 p-4">
+              <img class="card-img-top ${css.im}" src="${logo}" />
+              <div class="card-body-fluid m-4">
+                <h5 class="card-header m-4">Workspaces</h5>
+                <p>${main}</p>
+              </div>
             </div>
+            <div>
+              <span class="btn btn-secondary m-4 p-4 ${css.getStarted}">Get Started</span>
+             </div>
           </div>
           <div>
             ${docs}

From 9d9a4e6e2f77997e56c73fd1771155c9f243c704 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Fri, 5 Apr 2019 01:29:26 +0200
Subject: [PATCH 3/5] terminal bg and landing page restyling

---
 src/app/panels/styles/terminal-styles.js |  2 -
 src/app/panels/terminal.js               | 10 +++-
 src/app/ui/landing-page/landing-page.js  | 59 +++++++++++++++---------
 src/app/ui/landing-page/section.js       |  8 ++--
 4 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js
index 58d91cc8fc..22a8a18bf4 100644
--- a/src/app/panels/styles/terminal-styles.js
+++ b/src/app/panels/styles/terminal-styles.js
@@ -20,7 +20,6 @@ var css = csjs`
     display              : flex;
     align-items          : center;
     width                : 100%;
-    border-bottom-style  : ridge;
     max-height           : 35px;
   }
   .clear           {
@@ -148,7 +147,6 @@ var css = csjs`
     left              : 0;
     cursor            : ns-resize;
     z-index           : 999;
-    border-top        : 2px solid var(--primary);
   }
   .ghostbar           {
     position          : absolute;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 23a07de478..c20f7b30e9 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -156,6 +156,14 @@ class Terminal {
     `
     self._view.term = yo`
       <div class="${css.terminal_container}" onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
+        <div style="
+          background-color: grey;
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          opacity: 0.1;
+          z-index: -1;
+        "></div>
         <div class=${css.terminal}>
             ${self._view.journal}
             ${self._view.cli}
@@ -163,7 +171,7 @@ class Terminal {
       </div>
     `
     self._view.el = yo`
-      <div class="border ${css.panel}" style="height: 180px;">
+      <div class="${css.panel}" style="height: 180px;">
         ${self._view.bar}
         ${self._view.term}
       </div>
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index a72613fe96..de7840a06e 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -12,7 +12,7 @@ let css = csjs`
     flex-wrap       : wrap;
     align-content   : space-around;
     padding         : 20px;
-    max-width       : 340px;
+    max-width       : 300px;
     min-height      : 200px;
     background-color: var(--light);
     font-family     : "Lucida Console", Monaco, monospace;
@@ -37,8 +37,20 @@ let css = csjs`
   .im:hover {
   }
   .getStarted {
-    min-width       : 600px;
+    margin-top      : 50px;
+    width           : 100%;
     font-size       : xx-large;
+    align-self      : center;
+
+  }
+  .text {
+    cursor: pointer;
+    font-weight: normal;
+    max-width: 300px;
+    user-select: none;
+  }
+  .text:hover {
+    font-weight: bold;
   }
 }
 `
@@ -81,15 +93,18 @@ export class LandingPage extends ApiFactory {
           fileExplorer.createNewFile()
         }
       },
-      { label: yo`
-          <span>
-            <input type="file" onchange=${
+      {
+        // Open a file
+        label: yo`
+          <label class="${css.text} m-0 h6 text-dark">
+            Open file
+            <input title="open file" type="file" onchange="${
               (event) => {
                 event.stopPropagation()
                 fileExplorer.uploadFile(event)
               }
-            } multiple />
-          </span>
+            }" multiple />
+          </label>
         `,
         type: `callback`,
         description: ``,
@@ -129,17 +144,17 @@ export class LandingPage extends ApiFactory {
       }
     ]
 
-    var actionsHelp = [
+    var actionsResources = [
       { label: 'Remix documentation', type: `link`, description: ``, payload: `https://remix.readthedocs.io/en/latest/#` },
       { label: 'Medium posts', type: `link`, description: ``, payload: `https://medium.com/remix-ide` },
-      { label: 'Gitter channel', type: `link`, description: ``, payload: `https://gitter.im/ethereum/remix` },
+      { label: 'Gitter channel', type: `link`, description: ``, payload: `https://gitter.im/ethereum/remix` }
     ]
 
     var sectionStart = new Section('Start', actionsStart)
-    let sectionHelp = new Section('Help', actionsHelp)
+    let sectionResources = new Section('Resources', actionsResources)
 
     this.sectionWorkspaceMain = []
-    //this.sectionWorkspaceOthers = []
+    // this.sectionWorkspaceOthers = []
     defaultWorkspaces(appManager).forEach((workspace) => {
       if (workspace.isMain) {
         this.sectionWorkspaceMain.push({
@@ -159,7 +174,7 @@ export class LandingPage extends ApiFactory {
     })
 
     this.sections.push(sectionStart)
-    this.sections.push(sectionHelp)
+    this.sections.push(sectionResources)
   }
 
   get profile () {
@@ -177,11 +192,11 @@ export class LandingPage extends ApiFactory {
   render () {
     let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
     let totalLook = yo`
-      <div class="border ${css.landingPage}">
+      <div class="border-left ${css.landingPage}">
       </div>
     `
 
-    let main = yo`<div class="container m-4"></div>`
+    let main = yo`<div class="container"></div>`
     for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
       main.appendChild(yo`
         <span class="btn btn-secondary btn-lg m-2" style=" font-size: x-large;" onclick="${this.sectionWorkspaceMain[i].payload}">
@@ -190,16 +205,16 @@ export class LandingPage extends ApiFactory {
       `)
     }
 
-     /*let others = yo`<div class="container m-4"></div>`
+     /* let others = yo`<div class="container m-4"></div>`
     for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {
       others.appendChild(yo`
         <span class="btn btn-secondary btn-sm m-2" onclick="${this.sectionWorkspaceOthers[i].payload}">
           ${this.sectionWorkspaceOthers[i].label}
         </span>
       `)
-    }*/
+    } */
 
-    let docs = yo`<div class="container m-4"></div>`
+    let docs = yo`<div class="container m-5"></div>`
     for (let i = 0; i < this.sections.length; i++) {
       docs.appendChild(yo`
         <div class="${css.sectionContainer} p-2">
@@ -210,17 +225,17 @@ export class LandingPage extends ApiFactory {
 
     totalLook.appendChild(yo`
       <div class="container-fluid">
-        <div class="row">
-          <div class="column" style="50%;">
-            <div class="card m-4 p-4">
+        <div class="row" style="flex-wrap: nowrap;">
+          <div class="column m-5" style="min-width: 50%;">
+            <div class="card p-4">
               <img class="card-img-top ${css.im}" src="${logo}" />
-              <div class="card-body-fluid m-4">
+              <div class="card-body-fluid">
                 <h5 class="card-header m-4">Workspaces</h5>
                 <p>${main}</p>
               </div>
             </div>
             <div>
-              <span class="btn btn-secondary m-4 p-4 ${css.getStarted}">Get Started</span>
+              <span class="btn btn-secondary ${css.getStarted}" onclick=${() => { tooltip('  not implemented yet :P   ') }}>Get Started</span>
              </div>
           </div>
           <div>
diff --git a/src/app/ui/landing-page/section.js b/src/app/ui/landing-page/section.js
index 4cb1ee4c5b..2adc6a6c39 100644
--- a/src/app/ui/landing-page/section.js
+++ b/src/app/ui/landing-page/section.js
@@ -31,8 +31,8 @@ class Section {
 
   render () {
     let sectionLook = yo`
-      <div class="card border-0 bg-light bd-light text-dark p-1" style="min-width: 300px; min-height: 210px;">
-        <div class="card-header font-weight-bold" style="user-select: none;">${this.title}</div>
+      <div class="card border-0 bg-light text-dark p-1" style="min-width: 300px; min-height: 180px;">
+        <div class="card-header h5 font-weight-bold" style="user-select: none;">${this.title}</div>
         <p></p>
       </div>
     `
@@ -40,7 +40,7 @@ class Section {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
           <div>
-            <span class="${css.text} text-dark" onclick=${this.actions[i].payload} >
+            <span class="${css.text} p-3 h6 text-dark" onclick=${this.actions[i].payload} >
               ${this.actions[i].label}
             </span>
           </div>
@@ -48,7 +48,7 @@ class Section {
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
           <div >
-            <a class="${css.link} text-dark text-decoration-none" href=${this.actions[i].payload} target="_blank" >
+            <a class="${css.link} text-dark p-3 h6 text-decoration-none" href=${this.actions[i].payload} target="_blank" >
               ${this.actions[i].label}
             </a>
           </div>

From 6da84814a69ecda85982405958ab8ba91ac6018b Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Fri, 5 Apr 2019 11:25:35 +0200
Subject: [PATCH 4/5] temp

---
 src/app/ui/landing-page/landing-page.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index de7840a06e..8640649f85 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -63,6 +63,7 @@ export class LandingPage extends ApiFactory {
 
   constructor (appManager, appStore) {
     super()
+    this.appStore = appStore
     this.sections = []
     let load = function (item) {
       let compilerImport = new CompilerImport()
@@ -204,6 +205,13 @@ export class LandingPage extends ApiFactory {
         </span>
       `)
     }
+    let icon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzU1IDQ1M3EzNyAzOCAzNyA5MC41dC0zNyA5MC41bC00MDEgNDAwIDE1MCAxNTAtMTYwIDE2MHEtMTYzIDE2My0zODkuNSAxODYuNXQtNDExLjUtMTAwLjVsLTM2MiAzNjJoLTE4MXYtMTgxbDM2Mi0zNjJxLTEyNC0xODUtMTAwLjUtNDExLjV0MTg2LjUtMzg5LjVsMTYwLTE2MCAxNTAgMTUwIDQwMC00MDFxMzgtMzcgOTEtMzd0OTAgMzcgMzcgOTAuNS0zNyA5MC41bC00MDAgNDAxIDIzNCAyMzQgNDAxLTQwMHEzOC0zNyA5MS0zN3Q5MCAzN3oiLz48L3N2Zz4='
+
+    main.appendChild(yo`
+      <span onclick="${()=>{ globalRegistry.get("verticalicon").api.select("pluginManager") }}">
+        <img class="btn btn-secondary btn-lg m-2" style="max-width: 53px; max-height: 53px" src="${icon}" />
+      </span>
+    `)
 
      /* let others = yo`<div class="container m-4"></div>`
     for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {

From b18bc86ac1343a6cde41a4732d323e4bee6543cd Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Fri, 5 Apr 2019 11:39:38 +0200
Subject: [PATCH 5/5] plugions button

---
 src/app/ui/landing-page/landing-page.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 8640649f85..6569a7bcee 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -208,7 +208,8 @@ export class LandingPage extends ApiFactory {
     let icon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzU1IDQ1M3EzNyAzOCAzNyA5MC41dC0zNyA5MC41bC00MDEgNDAwIDE1MCAxNTAtMTYwIDE2MHEtMTYzIDE2My0zODkuNSAxODYuNXQtNDExLjUtMTAwLjVsLTM2MiAzNjJoLTE4MXYtMTgxbDM2Mi0zNjJxLTEyNC0xODUtMTAwLjUtNDExLjV0MTg2LjUtMzg5LjVsMTYwLTE2MCAxNTAgMTUwIDQwMC00MDFxMzgtMzcgOTEtMzd0OTAgMzcgMzcgOTAuNS0zNyA5MC41bC00MDAgNDAxIDIzNCAyMzQgNDAxLTQwMHEzOC0zNyA5MS0zN3Q5MCAzN3oiLz48L3N2Zz4='
 
     main.appendChild(yo`
-      <span onclick="${()=>{ globalRegistry.get("verticalicon").api.select("pluginManager") }}">
+      <span style="padding-left: 60px; "onclick="${() => { globalRegistry.get('verticalicon').api.select('pluginManager') }}">
+        Check out all plugins here 
         <img class="btn btn-secondary btn-lg m-2" style="max-width: 53px; max-height: 53px" src="${icon}" />
       </span>
     `)