From aae77715eab14a6683a49b6ee757ac5fafb2e6c7 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 17 Sep 2020 09:14:24 +0200
Subject: [PATCH 1/3] fadeing the bg for modals

---
 apps/remix-ide/src/app/ui/styles/modaldialog-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js b/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
index da028aafb9..8ba81a6184 100644
--- a/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
+++ b/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
@@ -5,7 +5,7 @@ var css = csjs`
   .modalFooter {
   }
   .modalContent {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    box-shadow: 0 4px 8px 1000px rgba(0,0,0,0.4),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;

From 41fba4f998832c8c8efaea5e717a3a2741aae9a1 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 17 Sep 2020 11:28:51 +0200
Subject: [PATCH 2/3] some style changes in modal

---
 .../src/app/ui/modal-dialog-custom.js         | 20 ++++++++++++++++++-
 apps/remix-ide/src/app/ui/modaldialog.js      |  2 +-
 .../src/app/ui/styles/modaldialog-styles.js   |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/ui/modal-dialog-custom.js b/apps/remix-ide/src/app/ui/modal-dialog-custom.js
index ec4535ecc6..a0cf78bdbb 100644
--- a/apps/remix-ide/src/app/ui/modal-dialog-custom.js
+++ b/apps/remix-ide/src/app/ui/modal-dialog-custom.js
@@ -67,7 +67,25 @@ module.exports = {
 function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
   if (!inputValue) inputValue = ''
   var type = hidden ? 'password' : 'text'
-  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']} form-control" value='${inputValue}' data-id="modalDialogCustomPromptText">`
+  var input = yo`
+    <input
+      type=${type}
+      name='prompt_text'
+      id='prompt_text'
+      class="${css['prompt_text']} form-control"
+      value='${inputValue}'
+      data-id="modalDialogCustomPromptText"
+      oninput="${(e) => validateInput(e)}"
+    >
+  `
+  const validateInput = (e) => {
+    if (e.target.value === '') {
+      document.getElementById('modal-footer-ok').classList.add('disabled')
+    } else {
+      document.getElementById('modal-footer-ok').classList.remove('disabled')
+    }
+  }
+
   modal(title, yo`<div>${text}<div>${input}</div></div>`,
     {
       fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }
diff --git a/apps/remix-ide/src/app/ui/modaldialog.js b/apps/remix-ide/src/app/ui/modaldialog.js
index a72b4a0941..90d938323a 100644
--- a/apps/remix-ide/src/app/ui/modaldialog.js
+++ b/apps/remix-ide/src/app/ui/modaldialog.js
@@ -130,7 +130,7 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
 
 function html (opts) {
   return yo`
-  <div id="modal-dialog" data-id="modalDialogContainer" class="modal" tabindex="-1" role="dialog">
+  <div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog">
     <div id="modal-background" class="modal-dialog" role="document">
       <div class="modal-content ${css.modalContent} ${opts.class}">
         <div class="modal-header">
diff --git a/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js b/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
index 8ba81a6184..b651d951e4 100644
--- a/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
+++ b/apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
@@ -5,7 +5,7 @@ var css = csjs`
   .modalFooter {
   }
   .modalContent {
-    box-shadow: 0 4px 8px 1000px rgba(0,0,0,0.4),0 6px 20px 0 rgba(0,0,0,0.19);
+    box-shadow: 0 0 8px 1000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;

From cf2af4f6d90db95a72ea875f4b5f616c4a456166 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Wed, 30 Sep 2020 11:14:08 +0200
Subject: [PATCH 3/3] added validation and disable ok for empty fields

---
 .../src/app/ui/modal-dialog-custom.js         | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/apps/remix-ide/src/app/ui/modal-dialog-custom.js b/apps/remix-ide/src/app/ui/modal-dialog-custom.js
index a0cf78bdbb..bbd42fd62b 100644
--- a/apps/remix-ide/src/app/ui/modal-dialog-custom.js
+++ b/apps/remix-ide/src/app/ui/modal-dialog-custom.js
@@ -15,12 +15,14 @@ module.exports = {
   },
   promptPassphraseCreation: function (ok, cancel) {
     var text = 'Please provide a Passphrase for the account creation'
-    var input = yo`<div>
-      <input id="prompt1" type="password" name='prompt_text' class="${css['prompt_text']}" >
-      <br>
-      <br>
-      <input id="prompt2" type="password" name='prompt_text' class="${css['prompt_text']}" >
-    </div>`
+    var input = yo`
+      <div>
+        <input id="prompt1" type="password" name='prompt_text' class="${css['prompt_text']}" oninput="${(e) => validateInput(e)}">
+        <br>
+        <br>
+        <input id="prompt2" type="password" name='prompt_text' class="${css['prompt_text']}" oninput="${(e) => validateInput(e)}">
+      </div>
+    `
     return modal(null, yo`<div>${text}<div>${input}</div></div>`,
       {
         fn: () => {
@@ -42,7 +44,16 @@ module.exports = {
   },
   promptMulti: function ({ title, text, inputValue }, ok, cancel) {
     if (!inputValue) inputValue = ''
-    var input = yo`<textarea id="prompt_text" data-id="modalDialogCustomPromptText" class=${css.prompt_text} rows="4" cols="50"></textarea>`
+    const input = yo`
+      <textarea
+        id="prompt_text"
+        data-id="modalDialogCustomPromptText"
+        class=${css.prompt_text}
+        rows="4"
+        cols="50"
+        oninput="${(e) => validateInput(e)}"
+      ></textarea>
+    `
     return modal(title, yo`<div>${text}<div>${input}</div></div>`,
       {
         fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }
@@ -64,6 +75,19 @@ module.exports = {
   }
 }
 
+const validateInput = (e) => {
+  console.log('validation from ', e)
+  if (!document.getElementById('modal-footer-ok')) return
+
+  if (e.target.value === '') {
+    document.getElementById('modal-footer-ok').classList.add('disabled')
+    document.getElementById('modal-footer-ok').style.pointerEvents = 'none'
+  } else {
+    document.getElementById('modal-footer-ok').classList.remove('disabled')
+    document.getElementById('modal-footer-ok').style.pointerEvents = 'auto'
+  }
+}
+
 function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
   if (!inputValue) inputValue = ''
   var type = hidden ? 'password' : 'text'
@@ -78,13 +102,6 @@ function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
       oninput="${(e) => validateInput(e)}"
     >
   `
-  const validateInput = (e) => {
-    if (e.target.value === '') {
-      document.getElementById('modal-footer-ok').classList.add('disabled')
-    } else {
-      document.getElementById('modal-footer-ok').classList.remove('disabled')
-    }
-  }
 
   modal(title, yo`<div>${text}<div>${input}</div></div>`,
     {