Finished modal, dependency updates

package.json

@@ -3,15 +3,14 @@
 	"version": "1.0.0",
 	"private": true,
 	"dependencies": {
-		"classnames": "^2.2.6",
-		"lodash": "^4.17.15",
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1",
-		"react-ga": "^2.7.0",
+		"classnames": "^2.3.1",
+		"lodash": "^4.17.21",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
 		"react-responsive-modal": "^6.2.0",
-		"react-router-dom": "^5.1.2",
-		"react-scripts": "^3.4.1",
-		"sass": "^1.49.7"
+		"react-router-dom": "^5.3.3",
+		"react-scripts": "^5.0.1",
+		"sass": "^1.53.0"
 	},
 	"repository": {
 		"type": "git",

src/assets/scss/core/layout/_header.scss

@@ -150,3 +150,28 @@
 		height: $header-height__desktop;
 	}
 }
+
+.title > h1 {
+  margin-top: 0;
+}
+
+.donation-row {
+	margin: 0.4em 0;
+}
+
+.donation-row:first-of-type {
+	margin-top: 0;
+}
+
+.donation-row:last-of-type {
+	margin-bottom: 0;
+}
+
+.donation-address {
+	display: inline-block;
+	max-width: 30vw;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}

src/assets/scss/style.scss

@@ -57,11 +57,6 @@
 --------------------------------------------------------------*/
 @import "core/elements/hamburger";
 
-/*--------------------------------------------------------------
-# Modal
---------------------------------------------------------------*/
-@import "core/elements/modal";
-
 /*--------------------------------------------------------------
 # Split pattern
 --------------------------------------------------------------*/

src/assets/scss/theme/_theme.scss

@@ -43,11 +43,6 @@
 --------------------------------------------------------------*/
 @import "elements/hamburger";
 
-/*--------------------------------------------------------------
-# Modal
---------------------------------------------------------------*/
-@import "elements/modal";
-
 /*--------------------------------------------------------------
 # Split pattern
 --------------------------------------------------------------*/

src/components/layout/Footer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Logo from './partials/Logo';
-import FooterNav from './partials/FooterNav';
+// import FooterNav from './partials/FooterNav';
 import FooterSocial from './partials/FooterSocial';
 
 const propTypes = {

src/components/layout/Header.js

@@ -5,9 +5,16 @@ import Logo from './partials/Logo';
 import { Modal } from 'react-responsive-modal';
 import 'react-responsive-modal/styles.css';
 
-
-
-
+window.addEventListener("click", function (e) {
+	if (e.target.hasAttribute("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);
+	}
+});
 
 const propTypes = {
 	navPosition: PropTypes.string,
@@ -78,25 +85,12 @@ const Header = ({
 		bottomOuterDivider && 'has-bottom-divider',
 		className
 	);
-	// 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")
-	}
-});
+	// Modal
+	const [open, setOpen] = useState(false);
+
+	const onOpenModal = () => setOpen(true);
+	const onCloseModal = () => setOpen(false);
 
 	return (
 		<header
@@ -127,27 +121,24 @@ window.addEventListener("click", function (e) {
 									)}>
 								<div className="header-nav-inner">
 									<ul className="list-reset header-nav-right">
-									<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>
+										<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 className="donation-row">
+												<div className="donation-address invert-color"><b>Ergo:</b> 9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho</div> <a className="button button-sm" href="https://explorer.ergoplatform.com/en/addresses/9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho">explorer</a> <button className="button button-sm" data-copy="9gMnqf29LPxos2Lk5Lt6SkTmbWYL1d5QFHygbf6zRXDgL4KtAho">copy</button>
+											</div>
+
+											<div className="donation-row">
+												<div className="donation-address invert-color"><b>Monero:</b> 82pTXa9pXyee7Ft81sGnK8c6XK3qKf2FzWbgUFrPJGdART4krBcsXkCKeBX5TQRxBr9ryhdPyHa5wGBr37Em2SSgP4u9MmH</div> <button className="button button-sm" data-copy="82pTXa9pXyee7Ft81sGnK8c6XK3qKf2FzWbgUFrPJGdART4krBcsXkCKeBX5TQRxBr9ryhdPyHa5wGBr37Em2SSgP4u9MmH">copy</button>
+											</div>
+
+											<div className="donation-row">
+												<div className="donation-address invert-color"><b>Bitcoin:</b> bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us</div> <a className="button button-sm" href="https://mempool.space/address/bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us">explorer</a> <button className="button button-sm" data-copy="bc1qcn833ty7fhp84ed22kvateckq08ffhp627q3us">copy</button>
+											</div>
+										</Modal>
 									</ul>
 								</div>
 							</nav>

src/components/layout/partials/Logo.js

@@ -22,7 +22,6 @@ const Logo = ({
 				<Link to="/">
 					<Image
 						src={require('./../../../assets/images/logo.png')}
-						alt="Open"
 						width={32}
 						height={32} />
 				</Link>

src/components/sections/DownloadsTiles.js

@@ -2,7 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { SectionTilesProps } from '../../utils/SectionProps';
 import SectionHeader from './partials/SectionHeader';
-import Image from '../elements/Image';
+
+import { ReactComponent as WindowsLogo } from '../../assets/images/windows.svg';
+import { ReactComponent as LinuxLogo } from '../../assets/images/linux.svg';
+import { ReactComponent as AppleLogo } from '../../assets/images/apple.svg';
 
 const propTypes = {
 	...SectionTilesProps.types
@@ -62,8 +65,7 @@ const DownloadsTiles = ({
 							<div className="tiles-item-inner">
 								<div className="downloads-tiles-item-header mb-16">
 									<div>
-										<Image
-											src={require('./../../assets/images/windows.svg')}
+										<WindowsLogo
 											alt="Windows logo"
 											width={64}
 											height={64} />
@@ -82,8 +84,7 @@ const DownloadsTiles = ({
 							<div className="tiles-item-inner">
 								<div className="downloads-tiles-item-header">
 									<div className="downloads-tiles-item-image mb-16">
-										<Image
-											src={require('./../../assets/images/linux.svg')}
+										<LinuxLogo
 											alt="Linux logo"
 											width={64}
 											height={64} />
@@ -102,8 +103,7 @@ const DownloadsTiles = ({
 							<div className="tiles-item-inner">
 								<div className="downloads-tiles-item-header">
 									<div className="downloads-tiles-item-image mb-16">
-										<Image
-											src={require('./../../assets/images/linux.svg')}
+										<LinuxLogo
 											alt="Linux logo"
 											width={64}
 											height={64} />
@@ -122,8 +122,7 @@ const DownloadsTiles = ({
 							<div className="tiles-item-inner">
 								<div className="downloads-tiles-item-header mb-16">
 									<div>
-										<Image
-											src={require('./../../assets/images/apple.svg')}
+										<AppleLogo
 											alt="Apple logo"
 											width={64}
 											height={64} />