From 776da949c10c9528c9325c880f36c4c7639284f5 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 6 May 2019 12:55:29 +0200
Subject: [PATCH] add more description to "import from" modal

---
 src/app/ui/landing-page/landing-page.js | 9 ++++++---
 src/app/ui/modaldialog.js               | 2 +-
 src/app/ui/styles/modaldialog-styles.js | 3 +++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 8d7f15b760..2973ebadbc 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -90,11 +90,12 @@ export class LandingPage extends BaseApi {
   }
 
   render () {
-    let load = function (service, item, examples) {
+    let load = function (service, item, examples, info) {
       let compilerImport = new CompilerImport()
       let fileProviders = globalRegistry.get('fileproviders').api
       const msg = yo`<div class="p-2"><span>Enter the ${item} you would like to load.</span>
-      <div>e.g ${examples.map((url) => { return yo`<div><a>${url}</a></div>` })}</div></div>`
+      <div>${info}</div>
+      <div>e.g ${examples.map((url) => { return yo`<div class="p-1"><a>${url}</a></div>` })}</div></div>`
 
       modalDialogCustom.prompt(`Import from ${service}`, msg, null, (target) => {
         if (target !== '') {
@@ -216,9 +217,11 @@ export class LandingPage extends BaseApi {
             <p class="mb-1">Import From:</p>
             <div class="btn-group">
               <button class="btn btn-sm btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
-              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Github', 'Github URL', ['https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/crowdsale/Crowdsale.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('Github', 'github URL', ['https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/crowdsale/Crowdsale.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>
             </div><!-- end of btn-group -->
           </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 61c644f38d..929a4875e0 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -135,7 +135,7 @@ function html (opts) {
             <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
           </span>
         </div>
-        <div class="modal-body"> - </div>
+        <div class="modal-body ${css.modalBody}"> - </div>
         <div class="modal-footer" autofocus>
           <span id="modal-footer-ok" class="${css['modalFooterOk']} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
           <span id="modal-footer-cancel" class="${css['modalFooterCancel']} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
diff --git a/src/app/ui/styles/modaldialog-styles.js b/src/app/ui/styles/modaldialog-styles.js
index a2be01fd6d..146918e280 100644
--- a/src/app/ui/styles/modaldialog-styles.js
+++ b/src/app/ui/styles/modaldialog-styles.js
@@ -11,6 +11,9 @@ var css = csjs`
     animation-name: animatetop;
     animation-duration: 0.4s
   }
+  .modalBody {
+    word-break: break-word;
+  }
   .modalFooterOk {
   }
   .modalFooterCancel {