Merge pull request #264 from ethereum/ipfsStyle

apps/remix-ide/src/app/tabs/runTab/contractDropdown.js

@@ -92,19 +92,27 @@ class ContractDropdownUI {
     const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
     this.ipfsCheckedState = savedConfig === 'true' ? true : false // eslint-disable-line
 
-    this.ipfsCheckbox = this.ipfsCheckedState === true
-    ? yo`<input id="deployAndRunPublishToIPFS" data-id="contractDropdownIpfsCheckbox" class="mr-2" checked type="checkbox" onchange=${this.toggleCheckedState.bind(this)} >`
-    : yo`<input id="deployAndRunPublishToIPFS" data-id="contractDropdownIpfsCheckbox" class="mr-2" type="checkbox" onchange=${this.toggleCheckedState.bind(this)} >`
+    this.ipfsCheckbox = yo`
+      <input
+        id="deployAndRunPublishToIPFS"
+        data-id="contractDropdownIpfsCheckbox"
+        class="form-check-input custom-control-input"
+        type="checkbox"
+        onchange=${() => this.toggleCheckedState()}
+      >
+    `
+    if (this.ipfsCheckedState) this.ipfsCheckbox.checked = true
 
     this.deployCheckBox = yo`
-      <div class="mt-2 d-flex align-items-start">
+      <div class="d-flex py-1 align-items-center custom-control custom-checkbox">
         ${this.ipfsCheckbox}
         <label
           for="deployAndRunPublishToIPFS"
-          class="p-0 m-0"
+          data-id="contractDropdownIpfsCheckboxLabel"
+          class="m-0 form-check-label custom-control-label ${css.checkboxAlign}"
           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
+          Publish to IPFS
         </label>
       </div>
       `

apps/remix-ide/src/app/tabs/styles/run-tab-styles.js

@@ -216,6 +216,9 @@ var css = csjs`
     text-align: center;
     text-transform: uppercase;
   }
+  .checkboxAlign {
+    padding-top: 2px;
+  }
 `
 
 module.exports = css

apps/remix-ide/test-browser/tests/publishContract.test.js

@@ -39,8 +39,8 @@ module.exports = {
     .clickLaunchIcon('fileExplorers')
     .openFile('browser/1_Storage.sol')
     .clickLaunchIcon('udapp')
-    .waitForElementVisible('*[data-id="contractDropdownIpfsCheckbox"]')
-    .click('*[data-id="contractDropdownIpfsCheckbox"]')
+    .waitForElementVisible('*[data-id="contractDropdownIpfsCheckboxLabel"]')
+    .click('*[data-id="contractDropdownIpfsCheckboxLabel"]')
     .click('*[data-id="Deploy - transact (not payable)"]')
     .pause(5000)
     .assert.containsText('*[data-id="modalDialogModalBody"]', 'Metadata of "storage" was published successfully.')
@@ -51,7 +51,7 @@ module.exports = {
     .refresh()
     .openFile('browser/1_Storage.sol')
     .clickLaunchIcon('udapp')
-    .waitForElementVisible('*[data-id="contractDropdownIpfsCheckbox"]')
+    .waitForElementVisible('*[data-id="contractDropdownIpfsCheckboxLabel"]')
     .verify.elementPresent('*[data-id="contractDropdownIpfsCheckbox"]:checked')
     .end()
   },

package-lock.json

@@ -8560,7 +8560,6 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -8627,7 +8626,6 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -8644,7 +8642,6 @@
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -8681,8 +8678,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "string_decoder": {
           "version": "1.1.1",
@@ -24636,8 +24632,7 @@
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "cliui": {
           "version": "5.0.0",
@@ -24681,7 +24676,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
           "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
           "dev": true,
-          "optional": true,
           "requires": {
             "locate-path": "^3.0.0"
           }
@@ -24724,7 +24718,6 @@
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
           "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "dev": true,
-          "optional": true,
           "requires": {
             "p-locate": "^3.0.0",
             "path-exists": "^3.0.0"
@@ -24794,7 +24787,6 @@
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
           "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "dev": true,
-          "optional": true,
           "requires": {
             "p-try": "^2.0.0"
           }
@@ -24804,7 +24796,6 @@
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
           "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "p-limit": "^2.0.0"
           }
@@ -24813,8 +24804,7 @@
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
           "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "require-main-filename": {
           "version": "2.0.0",
@@ -24828,7 +24818,6 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
-          "optional": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -24840,7 +24829,6 @@
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
               "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^4.1.0"
               }
@@ -24922,7 +24910,6 @@
           "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
           "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
-          "optional": true,
           "requires": {
             "camelcase": "^5.0.0",
             "decamelize": "^1.2.0"
@@ -38136,7 +38123,6 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -38203,7 +38189,6 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -38220,7 +38205,6 @@
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -38257,8 +38241,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "string_decoder": {
           "version": "1.1.1",