Modal para agregar coins

hendaniel · Sep 6, 2020 · 04f4521 · 04f4521
1 parent 56aa4c0
commit 04f4521
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git 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
@@ -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
@@ -59,6 +59,7 @@
     margin-right: 18%;
     justify-content: center;
     span {
+      padding: 15px;
       margin-right: 5px;
       color: white;
       display: inline-flex;