feat(CSS): sytle button with class send-to-user-inbox-btn

Author: josueJURE

public/index.css

@@ -80,13 +80,15 @@ main {
   transform: translate(-50%,-50%);
 }
 
-.fa-paper-plane {
+
+
+/* .fa-paper-plane {
   background-color: white;
   border-radius: 5%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
+} */
 
 .fa-microphone {
   height: 30px;
@@ -151,6 +153,16 @@ button {
   transition: background-color 0.5s ease;
 }
 
+.send-to-user-inbox-btn {
+  text-transform: uppercase;
+  height: 40px;
+  margin-right: 10px;
+  margin-left: 0px;
+  border-radius: 5px;
+  background-color: var(--green);
+  transition: background-color 0.5s ease;
+}
+
 .send-recipe-to-user-inbox,
 .want-another-recipe {
   width: 170px;
@@ -162,9 +174,7 @@ button {
   width: 170px;
   display: none;
   grid-template-columns: 2fr 1fr;
-  gap: 1rem;
-  margin:auto
- 
+  margin:auto;
 }
 
 

public/index.html

@@ -123,7 +123,8 @@ <h3 id="loading-text">Creating Recipe...</h3>
             name="user_email_address"
             placeholder="sophie@example.com"
           />
-          <i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
+          <button class="send-to-user-inbox-btn">send</button>
+          <!-- <i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i> -->
           <!-- <button class="send-email-btn">send</button> -->
         </section>
       </div>

public/index.js

@@ -18,6 +18,9 @@ const userEmail = document.querySelector("#user-email");
 const sendEmailButton = document.querySelector(".send-email-btn");
 const emailSection = document.querySelector(".email-section");
 const paperPlane = document.querySelector(".fa-paper-plane");
+const sendToUserInboxBtn = document.querySelector(".send-to-user-inbox-btn");
+console.log(sendToUserInboxBtn);
+
 const dietaryRequirements = Array.from(
   document.querySelectorAll(".dietary-requirements")
 );
@@ -171,7 +174,7 @@ darkLightButton.addEventListener("change", () => {
   });
 });
 
-paperPlane.addEventListener("click", () => {
+sendToUserInboxBtn.addEventListener("click", () => {
   let emailOBject = {
     [userEmail.name]: userEmail.value,
   };