From 04f45212d968a738d235fc4c4f5e510b140916ef Mon Sep 17 00:00:00 2001
From: Daniel Martinez <danielmartinezdm@hotmail.com>
Date: Sun, 6 Sep 2020 18:52:50 -0500
Subject: [PATCH] Modal para agregar coins

---
 src/components/Modals/CoinsModal.jsx  | 22 ++++++++++++++++------
 src/components/Modals/modal.scss      | 20 ++++++++++++++++++++
 src/components/Products/products.scss |  1 +
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/Modals/CoinsModal.jsx b/src/components/Modals/CoinsModal.jsx
index c253176..f5c80a9 100644
--- a/src/components/Modals/CoinsModal.jsx
+++ b/src/components/Modals/CoinsModal.jsx
@@ -16,7 +16,7 @@ const CoinsModal = ({ isShowing, hide }) =>
             role="dialog"
           >
             <div className="modal">
-              <div className="modal-header success-header">
+              <div className="modal-header coins-header">
                 <button
                   type="button"
                   className="modal-close-button"
@@ -28,11 +28,21 @@ const CoinsModal = ({ isShowing, hide }) =>
                 </button>
               </div>
               <div className="content">
-                <img className="gif" src={success} alt="error" />
-                <div className="success">
-                  <h1>SUCCESS!</h1>
-                  <span>Everything went ok!, enjoy your coins</span>
-                </div>
+                <form className="coins-form">
+                  <div>
+                    <input type="radio" name="choice" value={1000} />
+                    <label>1000</label>
+                  </div>
+                  <div>
+                    <input type="radio" name="choice" value={5000} />
+                    <label>5000</label>
+                  </div>
+                  <div>
+                    <input type="radio" name="choice" value={7500} />
+                    <label>7500</label>
+                  </div>
+                  <button>Get Coins!</button>
+                </form>
               </div>
             </div>
           </div>
diff --git a/src/components/Modals/modal.scss b/src/components/Modals/modal.scss
index 1b4d5c1..5640c91 100644
--- a/src/components/Modals/modal.scss
+++ b/src/components/Modals/modal.scss
@@ -43,6 +43,9 @@
 .success-header {
   background: #43a764;
 }
+.coins-header {
+  background: #c7aa0a;
+}
 
 .modal-close-button {
   font-size: 1.4rem;
@@ -86,3 +89,20 @@ button {
     margin: 20px;
   }
 }
+
+.coins-form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  input {
+    margin: 10px;
+  }
+
+  label {
+    font-family: "Raleway", sans-serif;
+    font-size: 20px;
+    letter-spacing: 2px;
+    font-weight: 700;
+    color: #868686;
+  }
+}
diff --git a/src/components/Products/products.scss b/src/components/Products/products.scss
index e6a1d20..74ae507 100644
--- a/src/components/Products/products.scss
+++ b/src/components/Products/products.scss
@@ -59,6 +59,7 @@
     margin-right: 18%;
     justify-content: center;
     span {
+      padding: 15px;
       margin-right: 5px;
       color: white;
       display: inline-flex;