From de288a50c6795d45d87503b81bb0f6ee4c6ba55d Mon Sep 17 00:00:00 2001
From: Jaspreet-android <jaspreet.android@gmail.com>
Date: Fri, 21 Feb 2020 16:23:27 +0530
Subject: [PATCH 1/4] contact us form css changes

---
 index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 50 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index 36dd9a9..57aebea 100644
--- a/index.html
+++ b/index.html
@@ -50,22 +50,32 @@
     <style>
 @import "https://fonts.googleapis.com/icon?family=Material+Icons";
 
+
+*{box-sizing: border-box;padding: 0;margin: 0;outline: none;}
+
+
+select {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+}
+
 .modal {
     display: none;
     position: fixed;
-    z-index: 1;
+    z-index: 100;
     left: 0;
-    top: 0;
+    top: 0; bottom: 0; right: 0;
     width: 100%;
     height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.25);
+    /*overflow: hidden;*/
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .modal-content {
-    margin: 15% auto;
-    margin-top: 25%;
-    border-radius:5px
+    position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);
+    border-radius: 5px;
 }
 
 .contact-email {
@@ -76,10 +86,39 @@
     text-align: center;
 }
 
-.mdl-card__actions { background-color: rgba(222, 222, 222, 0.25); }   
-.mdl-textfield, .mdl-textfield__input { 
+.mdl-card__actions {padding: 20px 0;}  
+.mdl-button{}
+.mdl-button.mdl-button--colored{display: block; padding: 12px 32px; border: 1px solid #1058cb; border-radius: 5px;
+font-size: 16px; line-height: 1; width: 100%;} 
+.mdl-button.mdl-button--colored:hover{background-color:#1058cb; color: #fff; }
+/*.mdl-textfield, .mdl-textfield__input { 
     padding: 10px 0;
-}                 
+} */     
+
+#contact-form .mdl-button.mdl-button--colored.mdl-js-button{height: auto;}
+
+.mdl-textfield{margin: 2px 0; width: 100%; display: block;}
+
+.mdl-card{overflow: visible;}
+textarea { height: 100px; resize: vertical; font-size: 14px; padding: 10px; width: 100%;}
+
+.mdl-card__menu{right:0px; top:-32px; position:absolute; background-color: #fff; border-radius: 5px;}
+#mdl-custom-btn{padding: 8px 0; display: inline-block;}
+.contact-email img{margin-top: -7px;}
+@media(max-width: 600px){
+    #mdl-custom-btn{border-bottom: 1px dotted #fff; }
+    .modal-content.mdl-card.mdl-shadow--2dp{width: 90%;  margin: auto; height:84vh;}
+    .mdl-card__title.mdl-card--expand{display: block; overflow: auto; height:100%;}
+}
+
+@media(min-width: 768px){
+    #mdl-custom-btn{border-bottom: 1px dotted #fff; padding: 8px 0; display: inline-block;}
+    
+}
+
+@media(min-width: 1200px){#mdl-custom-btn{border-bottom: 0; padding: 8px 0; display: inline-block;}}
+
+
 </style>
 </head>
 <body>
@@ -508,7 +547,7 @@ <h2 class="contact-title">Let’s chat</h2>
                                         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                             <input class="mdl-textfield__input" type="text" id="mdl-email" name="email" aria-controls="email-helper-text"
          aria-describedby="email-helper-text" required>
-                                            <label class="mdl-textfield__label" for="mdl-email">E-mail</label>
+                                            <label class="mdl-textfield__label" for="mdl-email">Email</label>
                                         </div>
                                         <div class="mdc-text-field-helper-line">
                                           <small id="email-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">

From 9fa560bcbc0c6e0dd1d6aca208b12e03f03e68df Mon Sep 17 00:00:00 2001
From: Jaspreet Singh Chhabra <jaspreet@scrambleapps.com>
Date: Fri, 21 Feb 2020 23:59:52 +0530
Subject: [PATCH 2/4] the X button is looks odd issue fixed.

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 57aebea..4cb0ab8 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,7 @@
 .mdl-card{overflow: visible;}
 textarea { height: 100px; resize: vertical; font-size: 14px; padding: 10px; width: 100%;}
 
-.mdl-card__menu{right:0px; top:-32px; position:absolute; background-color: #fff; border-radius: 5px;}
+.mdl-card__menu{right:5px; top:5px; position:absolute; background-color: #fff; border-radius: 5px;}
 #mdl-custom-btn{padding: 8px 0; display: inline-block;}
 .contact-email img{margin-top: -7px;}
 @media(max-width: 600px){

From 7e7c350f6d5da691d70fd800990fc148a5bd66b6 Mon Sep 17 00:00:00 2001
From: Jaspreet Singh Chhabra <jaspreet@scrambleapps.com>
Date: Sat, 22 Feb 2020 23:32:57 +0530
Subject: [PATCH 3/4] =?UTF-8?q?Email=20field=20shouldn=E2=80=99t=20default?=
 =?UTF-8?q?=20to=20red=20issue=20fixed.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 4cb0ab8..2052fb6 100644
--- a/index.html
+++ b/index.html
@@ -529,7 +529,7 @@ <h4 class="person-name">Mike Roberts<a href="https://www.linkedin.com/in/mike-ro
 
                     <div class="contact-content">
                         <h2 class="contact-title">Let’s chat</h2>
-                        
+
                         <a id="mdl-custom-btn" class="contact-email">
                             Contact CYTK
                             <img src="images/Contact-Chevron.svg" />
@@ -578,7 +578,7 @@ <h2 class="contact-title">Let’s chat</h2>
                                         <div class="mdl-textarea">
                                             <label class="mdl-textarea__label" for="mdl-message">Message</label>
                                             <textarea class="mdl-textarea__input" id="mdl-message" rows="4" cols="40" name="message"></textarea>
-                                        </div> 
+                                        </div>
 
                                         <div class="mdl-card__actions mdl-card--border">
                                             <button class="mdl-button mdl-button--colored mdl-js-button">
@@ -691,11 +691,30 @@ <h2 class="contact-title">Let’s chat</h2>
 </script>
 <!-- modal window assets -->
 <script type="text/javascript">
-        (() => {
+    function isValidEmailAddress(emailAddress) {
+        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
+        return pattern.test(emailAddress);
+        }
+       (() => {
           const form = document.querySelector('form');
           const formResponse = document.querySelector('#js-form-response');
           form.onsubmit = e => {
-            e.preventDefault();
+                 e.preventDefault();
+                 formResponse.parentElement.style.display = "none";
+              var emailVal = $('#mdl-email').val();
+              if(emailVal===""){
+                    formResponse.innerHTML = 'Email is required.';
+                    formResponse.style.color = "white";
+                    formResponse.parentElement.style.backgroundColor = "red";
+                    formResponse.parentElement.style.display = "block";
+                    return false;
+              } else if(!isValidEmailAddress(emailVal)){
+                    formResponse.innerHTML = 'Email is not valid.';
+                    formResponse.style.color = "white";
+                    formResponse.parentElement.style.backgroundColor = "red";
+                    formResponse.parentElement.style.display = "block";
+                    return false;
+                }
             // Prepare data to send
             const data = {};
             const formElements = Array.from(form);

From 3fb059e3b52429cbdc82b9a697f487f76bad75f1 Mon Sep 17 00:00:00 2001
From: Jaspreet Singh Chhabra <jaspreet@scrambleapps.com>
Date: Sat, 22 Feb 2020 23:36:29 +0530
Subject: [PATCH 4/4] =?UTF-8?q?Email=20field=20shouldn=E2=80=99t=20default?=
 =?UTF-8?q?=20to=20red=20issue=20fixed.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2052fb6..9885c3e 100644
--- a/index.html
+++ b/index.html
@@ -546,7 +546,7 @@ <h2 class="contact-title">Let’s chat</h2>
                                         </div>
                                         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                             <input class="mdl-textfield__input" type="text" id="mdl-email" name="email" aria-controls="email-helper-text"
-         aria-describedby="email-helper-text" required>
+         aria-describedby="email-helper-text">
                                             <label class="mdl-textfield__label" for="mdl-email">Email</label>
                                         </div>
                                         <div class="mdc-text-field-helper-line">
