home page restyling

src/app/panels/terminal.js

@@ -197,7 +197,7 @@ class Terminal extends Plugin {
     self._view.term = yo`
       <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
         ${self._components.autoCompletePopup.render()}
-        <div class="bg-secondary" data-id="terminalContainerDisplay" style="
+        <div data-id="terminalContainerDisplay" style="
           position: absolute;
           height: 100%;
           width: 100%;
@@ -752,6 +752,6 @@ function domTerminalFeatures (self, scopedCommands, blockchain) {
   }
 }
 
-function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
+function blockify (el) { return yo`<div class="px-4 ${css.block}">${el}</div>` }
 
 module.exports = Terminal

src/app/tabs/runTab/contractDropdown.js

@@ -101,7 +101,7 @@ class ContractDropdownUI {
         ${ipfsCheckbox}
         <label
           for="deployAndRunPublishToIPFS"
-          class="text-dark p-0 m-0"
+          class="p-0 m-0"
           title="Publishing the source code and ABI to IPFS facilitates source code verification and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
         >
           PUBLISH TO IPFS
@@ -176,7 +176,8 @@ class ContractDropdownUI {
       clickCallback,
       selectedContract.getConstructorInputs(),
       'Deploy',
-      selectedContract.bytecodeObject
+      selectedContract.bytecodeObject,
+      true
     )
     this.createPanel.appendChild(createConstructorInstance.render())
     this.createPanel.appendChild(this.deployCheckBox)

src/app/udapp/run-tab.js

@@ -154,7 +154,7 @@ export class RunTab extends LibraryPlugin {
         </div>
       </div>`
 
-    this.recorderCard = new Card({}, {}, { title: 'Transactions recorded:', collapsedView: collapsedView })
+    this.recorderCard = new Card({}, {}, { title: 'Transactions recorded', collapsedView: collapsedView })
     this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
       body.innerHTML = ''
       status.innerHTML = ''

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

@@ -15,7 +15,6 @@ let css = csjs`
     font-weight: normal;
     max-width: 300px;
     user-select: none;
-    color: var(--primary);
   }
   .text:hover {
     text-decoration: underline;
@@ -40,7 +39,6 @@ let css = csjs`
   }
   .hpSections {
     min-width: 640px;
-    margin: 0 60px;
   }
   .labelIt {
     margin-bottom: 0;
@@ -62,6 +60,16 @@ let css = csjs`
   .enviroments {
     display: flex;
   }
+  .envLogo {
+    height: 24px;
+  }
+  .envLabel {
+    cursor: pointer;
+  }
+  .envButton {
+    width: 120px;
+    height: 70px;
+  }
 }
 `
 
@@ -165,8 +173,39 @@ export class LandingPage extends ViewPlugin {
 
     globalRegistry.get('themeModule').api.events.on('themeChanged', () => {
       globalRegistry.get('themeModule').api.fixInvert(document.getElementById('remixLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('solidityLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('vyperLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('pipelineLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('debuggerLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('workshopLogo'))
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('moreLogo'))
     })
 
+    const creatEnvButton = (imgPath, envID, envText, callback) => {
+      return yo`
+        <button class="btn btn-lg border-secondary d-flex mr-3 justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
+          <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
+          <label class="h4 text-dark ${css.envLabel}">${envText}</label>
+        </button>
+      `
+    }
+    // main
+    const solEnv = creatEnvButton('/assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
+    const vyperEnv = creatEnvButton('/assets/img/vyperLogo.webp', 'vyperLogo', 'Vyper', startVyper)
+    // Featured
+    const pipelineEnv = creatEnvButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
+    const debuggerEnv = creatEnvButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
+    const workshopEnv = creatEnvButton('assets/img/workshopLogo.webp', 'workshopLogo', 'Workshop', startWorkshop)
+    const moreEnv = creatEnvButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
+
+    const invertNum = (globalRegistry.get('themeModule').api.currentTheme().quality === 'dark') ? 1 : 0
+    solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    vyperEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    pipelineEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    workshopEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    moreEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+
     let switchToPreviousVersion = () => {
       const query = new QueryParams()
       query.update({appVersion: '0.7.7'})
@@ -175,7 +214,7 @@ export class LandingPage extends ViewPlugin {
     const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>`
     const container = yo`<div class="${css.homeContainer} bg-light" data-id="landingPageHomeContainer">
       <div>
-        <div class="alert alert-info clearfix ${css.thisJumboton}">
+        <div class="alert alert-info clearfix py-3 ${css.thisJumboton}">
           <div class="${css.headlineContainer}">
             <div class="${css.logoContainer}">${img}</div>
           </div>
@@ -185,20 +224,20 @@ export class LandingPage extends ViewPlugin {
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->
-      <div class="row ${css.hpSections}" data-id="landingPageHpSections">
-        <div id="col1" class="col-sm-7">
+      <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
+        <div id="col1" class="col-sm-5">
           <div class="mb-5">
             <h4>Environments</h4>
             <div class="${css.enviroments} pt-2">
-              <button class="btn btn-lg btn-secondary mr-3" data-id="landingPageStartSolidity" onclick=${() => startSolidity()}>Solidity</button>
-              <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startVyper()}>Vyper</button>
+              ${solEnv}
+              ${vyperEnv}        
             </div>
           </div>
           <div class="file">
             <h4>File</h4>
             <p class="mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</p>
             <p class="mb-1">
-              <label class="${css.labelIt} ${css.text}">
+              <p class="${css.labelIt} ${css.text}">
                 Open Files
                 <input title="open file" type="file" onchange="${
                   (event) => {
@@ -207,32 +246,29 @@ export class LandingPage extends ViewPlugin {
                     fileExplorer.uploadFile(event)
                   }
                 }" multiple />
-              </label>
+              </p>
             </p>
             <p class="mb-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</p>
-            <p class="mb-1">Import From:</p>
+            <p class="mt-3 mb-0"><label>IMPORT FROM:</label></p>
             <div class="btn-group">
-              <button class="btn btn-sm btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
-              <button class="btn btn-sm btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
-              <button class="btn btn-sm btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
-              <button class="btn btn-sm btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
-              <button class="btn btn-sm btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
-              <button class="btn btn-sm btn-secondary" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
+              <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
+              <button class="btn mx-1 btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
+              <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
+              <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
+              <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
+              <button class="btn mx-1 btn-secondary" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
             </div><!-- end of btn-group -->
           </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
         <div id="col2" class="col-sm-5">
           <div class="plugins mb-5">
             <h4>Featured Plugins</h4>
-            <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
-            <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
-            <p class="mb-1 ${css.text}" onclick=${() => startWorkshop()}>Workshops</p>
-            <p class="mb-1">
-              <button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">
-                See all Plugins
-                <i class="fas fa-plug p-1" ></i>
-              </button>
-            </p>
+            <div class="d-flex flex-row">
+              ${pipelineEnv}
+              ${debuggerEnv}
+              ${workshopEnv}
+              ${moreEnv}
+            </div>
           </div>
           <div class="resources">
             <h4>Resources</h4>

src/app/ui/multiParamManager.js

@@ -18,7 +18,7 @@ class MultiParamManager {
     * @param {string} evmBC
     *
     */
-  constructor (lookupOnly, funABI, clickCallBack, inputs, title, evmBC) {
+  constructor (lookupOnly, funABI, clickCallBack, inputs, title, evmBC, isDeploy) {
     this.lookupOnly = lookupOnly
     this.funABI = funABI
     this.clickCallBack = clickCallBack
@@ -27,6 +27,7 @@ class MultiParamManager {
     this.evmBC = evmBC
     this.basicInputField
     this.multiFields
+    this.isDeploy = isDeploy
   }
 
   switchMethodViewOn () {
@@ -124,7 +125,8 @@ class MultiParamManager {
     var onClick = () => {
       this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
     }
-    let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>`
+    const width = this.isDeploy ? '' : 'w-50'
+    let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} ${width} btn btn-sm">${title}</button>`
     this.contractActionsContainerSingle = yo`
     <div class="${css.contractActionsContainerSingle} pt-2">
       ${funcButton}

src/app/ui/universal-dapp-ui.js

@@ -78,7 +78,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
 
   var close = yo`
     <button
-      class="${css.udappClose} p-1 btn btn-secondary"
+      class="${css.udappClose} mr-2 p-1 btn btn-secondary"
       data-id="universalDappUiUdappClose"
       onclick=${remove}
       title="Remove from the list"
@@ -145,7 +145,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
         <label class="">CALLDATA</label>
         <div class="d-flex justify-content-end w-100 align-items-center">
           ${calldataInput}
-          <button id="deployAndRunLLTxSendTransaction" class="btn btn-sm btn-secondary" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
+          <button id="deployAndRunLLTxSendTransaction" class="${css.instanceButton} btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
         </div>
       </div>
       <div>