From 9907b401ae1035b5ecffda38d14632be60b1f60f Mon Sep 17 00:00:00 2001
From: Kidd254 <lorenkioko@gmail.com>
Date: Tue, 25 Jul 2023 23:18:55 +0300
Subject: [PATCH 1/2] Render the correct mission button and badge using
 conditional rendering syntax

---
 src/components/MissionItem.jsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/MissionItem.jsx b/src/components/MissionItem.jsx
index 2361469..cbe5626 100644
--- a/src/components/MissionItem.jsx
+++ b/src/components/MissionItem.jsx
@@ -15,13 +15,24 @@ const MissionItem = ({ mission }) => {
   return (
     <tr>
       <td className="mission-name">{ mission.mission_name }</td>
-      <td className="mission-description">{ mission.description}</td>
+      <td className="mission-description">{ mission.description }</td>
       <td className="mission-status">
-        <span className="badge badge-gray">Not a member</span>
+        {
+          mission.reserved ? (
+            <span className="badge badge-blue active-member">Active member</span>
+          )
+            : (
+              <span className="badge badge-gray">Not a member</span>
+            )
+        }
       </td>
       <td className="mission-join-button">
-        <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
-        <button type="button" className="btn btn-pink" onClick={handleClickLeaveMission}>Leave Mission</button>
+        {mission.reserved ? (
+          <button type="button" className="btn btn-pink" onClick={handleClickLeaveMission}>Leave Mission</button>
+        )
+          : (
+            <button type="button" className="btn btn-gray" onClick={handleClickAddReservedMission}>Join Mission</button>
+          )}
       </td>
     </tr>
   );

From abdb8c9517e8183b70dc65865a100771e2b267b8 Mon Sep 17 00:00:00 2001
From: Kidd254 <lorenkioko@gmail.com>
Date: Tue, 25 Jul 2023 23:19:39 +0300
Subject: [PATCH 2/2] Update the CSS styles of the missions badges

---
 src/assets/styles/Missions.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/styles/Missions.css b/src/assets/styles/Missions.css
index 3350f94..fb1c896 100644
--- a/src/assets/styles/Missions.css
+++ b/src/assets/styles/Missions.css
@@ -50,6 +50,6 @@
   text-transform: uppercase;
 }
 
-.missions-table .active-member .mission-status {
+.missions-table .mission-status .active-member {
   text-transform: capitalize;
 }