Begun work on responsive modal

package.json

@@ -8,6 +8,7 @@
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-ga": "^2.7.0",
+		"react-responsive-modal": "^6.2.0",
 		"react-router-dom": "^5.1.2",
 		"react-scripts": "^3.4.1",
 		"sass": "^1.49.7"

src/components/elements/Modal.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../../src/assets/scss/theme/elements/_modal.scss";
+import "../../../src/assets/scss/core/elements/_modal.scss";
 
 window.addEventListener("click", function (e) {
 	if (e.target.hasAttribute("data-copy")) {

src/components/layout/Header.js

@@ -2,7 +2,12 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Logo from './partials/Logo';
-import Modal from '../elements/Modal';
+import { Modal } from 'react-responsive-modal';
+import 'react-responsive-modal/styles.css';
+
+
+
+
 
 const propTypes = {
 	navPosition: PropTypes.string,
@@ -73,7 +78,25 @@ const Header = ({
 		bottomOuterDivider && 'has-bottom-divider',
 		className
 	);
-	const [modalOpen, setModalOpen] = useState(false);
+	// Modal 
+const [open, setOpen] = useState(false);
+
+const onOpenModal = () => setOpen(true);
+const onCloseModal = () => setOpen(false);
+//copy listener 
+window.addEventListener("click", function (e) {
+	if (e.target.hasAttribute("data-copy")) {
+	console.log(e.target.getAttribute("data-copy"));
+		var textarea = document.createElement("textarea");
+		textarea.value = e.target.getAttribute("data-copy");
+		document.body.appendChild(textarea);
+		textarea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textarea);
+		e.preventDefault();
+		this.alert("Copied successfully")
+	}
+});
 
 	return (
 		<header
@@ -104,10 +127,27 @@ const Header = ({
 									)}>
 								<div className="header-nav-inner">
 									<ul className="list-reset header-nav-right">
-										<button className="button button-primary button-wide-mobile button-sm" onClick={() => setModalOpen(true)}>
-											Donate
-										</button>
-										{modalOpen && <Modal setOpenModal={setModalOpen} />}
+									<button className="button button-primary button-wide-mobile button-sm" onClick={onOpenModal}>Donate</button>
+      <Modal open={open} onClose={onCloseModal} center>
+	  <div className="title">
+					<h1 className="text-color-primary">Donate</h1>
+				</div>
+
+				<div>
+					<p>~ Ergo: 9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho</p><a href="https://explorer.ergoplatform.com/en/addresses/9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho"> Explorer </a>
+					<a href={() => false} data-copy="9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho">copy</a>
+				</div>
+
+				<div>
+					<p>~ Monero: 82pTXa9pXyee7Ft81sGnK8c6XK3qKf2FzWbgUFrPJGdART4krBcsXkCKeBX5TQRxBr9ryhdPyHa5wGBr37Em2SSgP4u9MmH </p><a href={() => false} data-copy="82pTXa9pXyee7Ft81sGnK8c6XK3qKf2FzWbgUFrPJGdART4krBcsXkCKeBX5TQRxBr9ryhdPyHa5wGBr37Em2SSgP4u9MmH"> copy </a>
+				</div>
+
+				<div>
+					<p>~ Bitcoin: bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us</p> <a href="https://mempool.space/address/bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us"> Explorer </a><a href={() => false} data-copy="bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us">copy</a>
+
+				</div>
+
+      </Modal>
 									</ul>
 								</div>
 							</nav>