From 9f9d9dbf1a33d8244f84f9bd40bf8bd33bce46c7 Mon Sep 17 00:00:00 2001
From: Max Gerber <mgerber94@gmail.com>
Date: Thu, 12 Oct 2017 17:41:35 +0100
Subject: [PATCH] Took the information button out of the line of text Relates
 #19

---
 src/components/ModalInfograph.js |  2 +-
 src/css/Modal.css                | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ModalInfograph.js b/src/components/ModalInfograph.js
index 3ceadd9..d585d9a 100644
--- a/src/components/ModalInfograph.js
+++ b/src/components/ModalInfograph.js
@@ -22,7 +22,7 @@ class ModalInfograph extends React.Component {
   render() {
     return (
       <div className="infograph-container">
-        <button className="modal-button pointer ba b--white bg-white b h2 pink" onClick={this.handleOpenModal}>i</button>
+        <button className="modal-button bn modal-info pointer" onClick={this.handleOpenModal}>i</button>
         <ReactModal
           isOpen={this.state.showModal}
           contentLabel="onRequestClose Example"
diff --git a/src/css/Modal.css b/src/css/Modal.css
index 3058ad2..edf5299 100644
--- a/src/css/Modal.css
+++ b/src/css/Modal.css
@@ -6,6 +6,16 @@
   height: 0;
   width: 0;
 }
+.modal-info {
+  position: absolute;
+  right: 6rem;
+  bottom: 3rem;
+  background-color: hotpink;
+  color: white;
+  border-radius: 5px;
+  padding: 0rem 0.5rem;
+  font-size: 2rem;
+}
 
 .modal-button:focus {
   outline: none;