feedback area improved

public/css/main.css

@@ -85,3 +85,40 @@ Feedback field
     border-bottom-style: off;
 }
 
+
+#feedbackoverlay{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    line-height: 30px;
+    text-align: center;
+    position: fixed;
+    top: 0;
+    z-index:9999;
+    color: black;
+    display:none;
+}
+
+#feedbackform{
+    position: relative;
+    text-align: center;
+    top:200px;
+    background:rgba(0, 0, 0, 0.4);
+    width: 550px;
+    height: 225px;
+    color: white;
+    padding-top: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin: 0 auto;
+}
+
+#closeform{
+    position: absolute;
+    right:8px;
+    top:3px;
+    cursor:pointer;
+    font-weight: bold;
+    font-size: 105%
+}
+

src/components/Feedbackfield.js

@@ -2,19 +2,50 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 var Feedbackfield = ({selected, onClick}) => (
-    <div id="feedback">
-        <a href="mailto:[email protected]?subject=Feedback%20for%20KUBAM%20&body=Thank%20you%20for%20your%20feedback.%20Please,%20write%20your%20comment%20below:"
-        target="_top">
-            <font color="black">
-                    Tell us something...
-            </font>
-        </a>
-    </div>
+    <div >
 
+        <div id="feedback">
+            <a onClick={activateLasers}>
+                      Tell us something...
+            </a>
+        </div>
+
+        <div id="feedbackoverlay">
+            <div id="feedbackform">
+                <div id="closeform">
+                    <a onClick={deactivateLasers} id="closeform">X</a>
+                 </div>
+                    <form>
+                       Tell us something...
+                                <br></br>
+                                <textarea
+                                  rows="4" cols="50">
+                            </textarea>
+                            <br></br>
+                            <input type="submit" value="Submit">
+                            </input>
+                    </form>
+            </div>
+        </div>
+     </div>
 );
+
 Feedbackfield.propTypes = {
   onClick: PropTypes.func.isRequired,
 }
 
 export default Feedbackfield
 
+function activateLasers(){
+    var feedbackoverlay=document.getElementById("feedbackoverlay");
+    feedbackoverlay.style.display = 'inline';
+    return;
+}
+
+function deactivateLasers(){
+    var feedbackoverlay=document.getElementById("feedbackoverlay");
+    feedbackoverlay.style.display = 'none';
+    return;
+}
+
+