From dce8784b41e1af7fed6e415f3dfd88aeab8e3a1f Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Wed, 27 Dec 2023 20:12:00 +0100
Subject: [PATCH 01/17] Add general style

---
 src/App.css        | 39 ---------------------------------------
 src/App.js         |  1 -
 src/styles/app.css |  7 +++++++
 3 files changed, 7 insertions(+), 40 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/styles/app.css

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 10e4996..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 7709575..ae3d294 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Nav from './components/Nav';
-import './App.css';
 import MyProfile from './components/MyProfile';
 import Mission from './components/Mission';
 import Rockets from './components/Rockets';
diff --git a/src/styles/app.css b/src/styles/app.css
new file mode 100644
index 0000000..86eabcc
--- /dev/null
+++ b/src/styles/app.css
@@ -0,0 +1,7 @@
+@media (max-width: 768px) {
+  table {
+    font-size: 12px;
+    width: 10rem;
+  }
+}
+

From 0631ae9d214c15b6c612865485a582dc183dc0a8 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Wed, 27 Dec 2023 20:12:46 +0100
Subject: [PATCH 02/17] Add styles from app.css

---
 src/components/Mission.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index c921c7b..929754c 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchMissions, joinMission, leaveMission } from '../redux/mission/missionsSlice';
+import '../styles/app.css';
 
 const Mission = () => {
   const dispatch = useDispatch();
@@ -56,7 +57,7 @@ const Mission = () => {
   ));
 
   return (
-    <section className="m-3 mt-0 p-3 pt-0 table-responsive">
+    <section className="m-3 mt-0 p-3 pt-0 table-responsive-md">
       <table className="table table-striped table-bordered">
         <thead>
           <tr>

From 57f79fa00a9028423098c69001d96a93d22279b0 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Wed, 27 Dec 2023 20:13:59 +0100
Subject: [PATCH 03/17] Add nav styles from nav.css

---
 src/components/Nav.jsx |  1 +
 src/styles/nav.css     | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/styles/nav.css

diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index f25092c..9ca6f18 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import { Container } from 'react-bootstrap';
+import '../styles/nav.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
 const links = [
diff --git a/src/styles/nav.css b/src/styles/nav.css
new file mode 100644
index 0000000..8badeea
--- /dev/null
+++ b/src/styles/nav.css
@@ -0,0 +1,20 @@
+.active {
+  color: red;
+}
+
+.m-2 {
+  text-decoration: none;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.active-link {
+  text-decoration: underline;
+}
+
+.Logo {
+  width: 50px;
+}
+

From a493e0fca2aac7bfa1456361bc048f97dfe66818 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Wed, 27 Dec 2023 20:16:15 +0100
Subject: [PATCH 04/17] Modify styles on rocket page

---
 src/components/Rockets.jsx |  5 ++-
 src/styles/rockets.css     | 69 ++++++++++++++++++--------------------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/Rockets.jsx b/src/components/Rockets.jsx
index 7cdaf64..aee9c30 100644
--- a/src/components/Rockets.jsx
+++ b/src/components/Rockets.jsx
@@ -45,7 +45,9 @@ const Rocket = ({ item, reservationAction }) => {
 
   return (
     <div className="rocketC" key={id} data-testid="Rocket">
-      <img className="rocketImg" src={images} alt={name} />
+      <div className="rocketImg">
+        <img src={images} alt={name} />
+      </div>
       <div className="contentC">
         <h4 className="rocektName">{name}</h4>
         <div className="rocketDesc">
@@ -59,6 +61,7 @@ const Rocket = ({ item, reservationAction }) => {
           )}
         </div>
         <div
+          className="reserveBtns"
           role="button"
           tabIndex="0"
           onClick={reservationAction}
diff --git a/src/styles/rockets.css b/src/styles/rockets.css
index 3305279..61fecbc 100644
--- a/src/styles/rockets.css
+++ b/src/styles/rockets.css
@@ -1,65 +1,60 @@
+.rocketImg {
+  width: 18rem;
+  margin-bottom: 1rem;
+}
+
+.rocketImg > img {
+  width: 100%;
+}
+
 .rocketC {
   display: flex;
-  margin: 10px;
-  margin-left: 70px;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
 }
 
-.rocketImg {
-  width: 280px;
+.reserveBtns {
+  margin-top: 1rem;
 }
 
-.contentC {
-  padding-right: 50px;
-  margin-left: 15px;
+.Cancel-Reservation, .Reservation {
+  border-radius: 5%;
+  padding: 0.5rem;
 }
 
 .Cancel-Reservation {
-  height: 35px;
   background-color: rgb(255, 255, 255);
   color: rgb(119, 119, 119);
-  margin-top: 30px;
-  border-radius: 8%;
   border: solid gray 2px;
 }
 
 .Reservation {
   background-color: #007bff;
   color: rgb(255, 255, 255);
-  border: solid #007bff 2px;
-  height: 35px;
-  margin-top: 30px;
-  border-radius: 8%;
-}
-
-.rocketDesc {
-  font-size: large;
+  border: none;
 }
 
 .reserved {
   background-color: #18a2b8;
   color: white;
+  font-weight: bold;
   padding: 4px 8px;
-  text-align: center;
-  border-radius: 5px;
-}
-
-/* profile */
-.active {
-  color: red;
+  border-radius: 5%;
+  margin-right: 0.5rem;
 }
 
-.m-2 {
-  text-decoration: none;
-}
+@media (min-width: 768px) {
+  .rocketImg {
+    width: 30%;
+    margin: 0 1rem;
+  }
 
-.link {
-  text-decoration: none;
-}
-
-.active-link {
-  text-decoration: underline;
-}
+  .contentC {
+    width: 70%;
+  }
 
-.Logo {
-  width: 50px;
+  .rocketC {
+    flex-direction: row;
+  }
 }

From 7cf03eaea5439a04c2dab1bfa76c58cf4aedce4c Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 15:46:08 +0100
Subject: [PATCH 05/17] Add link to mission deails in routes

---
 src/App.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index ae3d294..ad07a2a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import Nav from './components/Nav';
 import MyProfile from './components/MyProfile';
 import Mission from './components/Mission';
 import Rockets from './components/Rockets';
+import MissionDetails from './components/MissionDetails';
 
 function App() {
   return (
@@ -12,7 +13,9 @@ function App() {
         <Routes>
           <Route path="/" element={<Rockets />} />
           <Route path="/MyProfile" element={<MyProfile />} />
-          <Route path="/Mission" element={<Mission />} />
+          <Route path="/Mission" element={<Mission />}>
+            <Route path="Mission-details" element={<MissionDetails />} />
+          </Route>
           <Route path="*" element={<h3>No Match</h3>} />
         </Routes>
       </BrowserRouter>

From 9f4227c7c6da6f27e0b8046dbb1a8aa554398a09 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 15:47:02 +0100
Subject: [PATCH 06/17] Add new page for mission details

---
 src/components/MissionDetails.jsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/components/MissionDetails.jsx

diff --git a/src/components/MissionDetails.jsx b/src/components/MissionDetails.jsx
new file mode 100644
index 0000000..19794bf
--- /dev/null
+++ b/src/components/MissionDetails.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MissionDetails = () => (
+  <div>MissionDetails</div>
+);
+
+export default MissionDetails;

From b92d00d6dfb3d6c25b2e982a53d88cc5960c36d0 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 15:47:38 +0100
Subject: [PATCH 07/17] Remove table styles from app.css

---
 src/styles/app.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/styles/app.css b/src/styles/app.css
index 86eabcc..8b13789 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,7 +1 @@
-@media (max-width: 768px) {
-  table {
-    font-size: 12px;
-    width: 10rem;
-  }
-}
 

From d3201a77b8bb8880f9da11cd177fa4746eb60b1f Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 15:47:53 +0100
Subject: [PATCH 08/17] Modify Mission.jsx   - Add classnames to table data, td
   - Apply styles from mission.css file   - Add conditional rendering on
 window size.

---
 src/components/Mission.jsx | 41 ++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index 929754c..7d25d14 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -1,9 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { fetchMissions, joinMission, leaveMission } from '../redux/mission/missionsSlice';
-import '../styles/app.css';
+import '../styles/mission.css';
 
 const Mission = () => {
+  const [isDesktop, setDesktop] = useState(window.innerWidth < 620);
+
+  const updateMedia = () => {
+    setDesktop(window.innerWidth < 620);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateMedia);
+    return () => window.removeEventListener('resize', updateMedia);
+  });
   const dispatch = useDispatch();
   const missions = useSelector((store) => store.missions.missions);
 
@@ -46,25 +57,39 @@ const Mission = () => {
   const mission = missions.map((item) => (
     <tr key={item.id}>
       <td className="fw-bold">{ item.name }</td>
-      <td>{ item.desc }</td>
-      <td className="align-middle text-center">
+      <td className="mission-desc">
+        {
+          isDesktop ? (
+            <Link to="Mission-details">
+              <p>
+                { item.desc }
+              </p>
+            </Link>
+          ) : (
+            <p>
+              { item.desc }
+            </p>
+          )
+        }
+      </td>
+      <td className="mission-status align-middle text-center">
         {handleStatus(item.reserved)}
       </td>
-      <td className="align-middle text-center">
+      <td className="mission-btns align-middle text-center">
         {handleButtons(item.id, item.reserved)}
       </td>
     </tr>
   ));
 
   return (
-    <section className="m-3 mt-0 p-3 pt-0 table-responsive-md">
+    <section className="table-responsive-md">
       <table className="table table-striped table-bordered">
         <thead>
           <tr>
             <th width="150">Mission</th>
             <th>Description</th>
-            <th width="150">Status</th>
-            <th width="150"> </th>
+            <th width="150" className="table-status">Status</th>
+            <th width="150" className="table-btns"> </th>
           </tr>
         </thead>
         <tbody>

From 9f724a140455006af8559e49dd1f32eeb923900a Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 15:51:03 +0100
Subject: [PATCH 09/17] Update styles on missions page

---
 src/styles/mission.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/styles/mission.css

diff --git a/src/styles/mission.css b/src/styles/mission.css
new file mode 100644
index 0000000..20fc805
--- /dev/null
+++ b/src/styles/mission.css
@@ -0,0 +1,39 @@
+.mission-desc {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  height: 100px;
+}
+
+.table {
+  font-size: 12px;
+}
+
+.mission-status,
+.table-status,
+.table-btns,
+.mission-btns {
+  display: none;
+}
+
+@media (min-width: 620px) {
+  .table {
+    font-size: 16px;
+    width: auto;
+  }
+
+  .mission-desc {
+    display: block;
+    overflow: visible;
+    white-space: wrap;
+    height: fit-content;
+  }
+
+  .mission-status,
+  .table-status,
+  .table-btns,
+  .mission-btns {
+    display:table-cell;
+  }
+}

From 0f28a848d0e19b3445389b30f7ae2bad40f6a544 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:08:12 +0100
Subject: [PATCH 10/17] Fix linter issues

---
 src/styles/app.css     | 2 +-
 src/styles/mission.css | 6 +++---
 src/styles/nav.css     | 1 -
 src/styles/rockets.css | 3 ++-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/styles/app.css b/src/styles/app.css
index 8b13789..e189b09 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1 +1 @@
-
+/* General styles */
diff --git a/src/styles/mission.css b/src/styles/mission.css
index 20fc805..5281a98 100644
--- a/src/styles/mission.css
+++ b/src/styles/mission.css
@@ -26,14 +26,14 @@
   .mission-desc {
     display: block;
     overflow: visible;
-    white-space: wrap;
-    height: fit-content;
+    white-space: initial;
+    height: auto;
   }
 
   .mission-status,
   .table-status,
   .table-btns,
   .mission-btns {
-    display:table-cell;
+    display: table-cell;
   }
 }
diff --git a/src/styles/nav.css b/src/styles/nav.css
index 8badeea..13cb665 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -17,4 +17,3 @@
 .Logo {
   width: 50px;
 }
-
diff --git a/src/styles/rockets.css b/src/styles/rockets.css
index 61fecbc..2ca6f8e 100644
--- a/src/styles/rockets.css
+++ b/src/styles/rockets.css
@@ -18,7 +18,8 @@
   margin-top: 1rem;
 }
 
-.Cancel-Reservation, .Reservation {
+.Cancel-Reservation,
+.Reservation {
   border-radius: 5%;
   padding: 0.5rem;
 }

From b4219b3e3a494a6f8bfb2ddb95a13f16767cb4b1 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:20:25 +0100
Subject: [PATCH 11/17] Fix eslint issue and rename variable

---
 src/components/Mission.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index 7d25d14..b26227e 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -5,10 +5,10 @@ import { fetchMissions, joinMission, leaveMission } from '../redux/mission/missi
 import '../styles/mission.css';
 
 const Mission = () => {
-  const [isDesktop, setDesktop] = useState(window.innerWidth < 620);
+  const [isMobile, setMobile] = useState(window.innerWidth < 620);
 
   const updateMedia = () => {
-    setDesktop(window.innerWidth < 620);
+    setMobile(window.innerWidth < 620);
   };
 
   useEffect(() => {
@@ -32,12 +32,16 @@ const Mission = () => {
   };
 
   const handleButtons = (id, reserved) => {
+    const leaveLabel = `Leave Mission ${id}`;
+    const joinLabel = `Join Mission ${id}`;
+
     if (reserved) {
       return (
         <button
           className="text-danger border-2 border-danger"
           type="button"
           onClick={() => dispatch(leaveMission({ id }))}
+          aria-label={leaveLabel}
         >
           Leave Mission
         </button>
@@ -48,6 +52,7 @@ const Mission = () => {
         className="text-secondary border-2"
         type="button"
         onClick={() => dispatch(joinMission({ id }))}
+        aria-label={joinLabel}
       >
         Join Mission
       </button>
@@ -59,7 +64,7 @@ const Mission = () => {
       <td className="fw-bold">{ item.name }</td>
       <td className="mission-desc">
         {
-          isDesktop ? (
+          isMobile ? (
             <Link to="Mission-details">
               <p>
                 { item.desc }

From b38cc8aee0fdb719944fd3639c5ed5ac678c3397 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:25:05 +0100
Subject: [PATCH 12/17] Attempt to fix eslint issue

---
 src/components/Mission.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index b26227e..3b329db 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -32,16 +32,12 @@ const Mission = () => {
   };
 
   const handleButtons = (id, reserved) => {
-    const leaveLabel = `Leave Mission ${id}`;
-    const joinLabel = `Join Mission ${id}`;
-
     if (reserved) {
       return (
         <button
           className="text-danger border-2 border-danger"
           type="button"
           onClick={() => dispatch(leaveMission({ id }))}
-          aria-label={leaveLabel}
         >
           Leave Mission
         </button>
@@ -52,7 +48,6 @@ const Mission = () => {
         className="text-secondary border-2"
         type="button"
         onClick={() => dispatch(joinMission({ id }))}
-        aria-label={joinLabel}
       >
         Join Mission
       </button>
@@ -65,7 +60,7 @@ const Mission = () => {
       <td className="mission-desc">
         {
           isMobile ? (
-            <Link to="Mission-details">
+            <Link to="Mission-details" aria-label={`Details for Mission ${item.name}`}>
               <p>
                 { item.desc }
               </p>

From 5688d930f131caaad1a8947b151f2a9b45327185 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:28:53 +0100
Subject: [PATCH 13/17] Fix eslint issue

---
 src/components/Mission.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index 3b329db..83d6ff5 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -60,7 +61,7 @@ const Mission = () => {
       <td className="mission-desc">
         {
           isMobile ? (
-            <Link to="Mission-details" aria-label={`Details for Mission ${item.name}`}>
+            <Link to="Mission-details">
               <p>
                 { item.desc }
               </p>

From 35a0606bb019c1da0d9455d040de33fed99e9381 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:37:42 +0100
Subject: [PATCH 14/17] Reduce font of heading on my profile page

---
 src/components/MyProfile.jsx | 10 +++++-----
 src/styles/my_profile.css    |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/my_profile.css

diff --git a/src/components/MyProfile.jsx b/src/components/MyProfile.jsx
index fc93c56..d3c046c 100644
--- a/src/components/MyProfile.jsx
+++ b/src/components/MyProfile.jsx
@@ -3,7 +3,7 @@ import {
   Container, ListGroup, Row, Col,
 } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
-import '../styles/rockets.css';
+import '../styles/my_profile.css';
 
 const Rocket = () => {
   const rockets = useSelector((state) => state.rockets);
@@ -14,14 +14,14 @@ const Rocket = () => {
   if (myRockets.length === 0) {
     return (
       <Col>
-        <h3>My Rockets</h3>
+        <h3 className="profile-heading">My Rockets</h3>
         You have not reserved any rockets.
       </Col>
     );
   }
   return (
     <Col>
-      <h3>My Rockets</h3>
+      <h3 className="profile-heading">My Rockets</h3>
       <ListGroup as="ol">
         {myRockets.map((rocket) => (
           <ListGroup.Item as="li" key={rocket.id}>
@@ -40,14 +40,14 @@ const Mission = () => {
   if (myMissions.length === 0) {
     return (
       <Col>
-        <h3>My Missions</h3>
+        <h3 className="profile-heading">My Missions</h3>
         <p>You have not reserved any missions.</p>
       </Col>
     );
   }
   return (
     <Col>
-      <h3>My Missions</h3>
+      <h3 className="profile-heading">My Missions</h3>
       <ListGroup as="ol">
         {myMissions.map((item) => (
           <ListGroup.Item as="li" key={item.id}>
diff --git a/src/styles/my_profile.css b/src/styles/my_profile.css
new file mode 100644
index 0000000..69b4d7e
--- /dev/null
+++ b/src/styles/my_profile.css
@@ -0,0 +1,5 @@
+@media (max-width: 376px) {
+  .profile-heading {
+    font-size: 16px;
+  }
+}

From 2c5135184a742e476f47ead7deb036c885cbc292 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:53:12 +0100
Subject: [PATCH 15/17] Modify styles for nav

---
 src/components/Nav.jsx | 53 ++++++++++++++++++++++--------------------
 src/styles/nav.css     | 20 ++++++++++++++++
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index 9ca6f18..01c4bd1 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -1,5 +1,4 @@
 import { NavLink } from 'react-router-dom';
-import { Container } from 'react-bootstrap';
 import '../styles/nav.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
@@ -10,30 +9,34 @@ const links = [
 ];
 const Nav = () => (
   <>
-    <Container className="d-flex flex-wrap align-items-center p-3">
-      <img
-        className="Logo"
-        src="https://spacetravellerhubcapstone.netlify.app/static/media/planet.3f6fb2742f28651730c0.png"
-        alt="Logo"
-        style={{ width: '50px' }}
-      />
-      <h3>Space Travelers&apos; Hub</h3>
-      <ul
-        className="list-unstyled m-2 p-2 d-flex flex-wrap"
-        style={{ justifyContent: 'flex-end', flex: '2' }}
-      >
-        {links.map((link) => (
-          <li key={link.text} className="m-2">
-            <NavLink
-              className={({ isActive }) => (isActive ? 'active-link' : 'link')}
-              to={link.path}
-            >
-              {link.text}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </Container>
+    <section className="nav-container">
+      <div>
+        <img
+          className="Logo"
+          src="https://spacetravellerhubcapstone.netlify.app/static/media/planet.3f6fb2742f28651730c0.png"
+          alt="Logo"
+          style={{ width: '50px' }}
+        />
+        <h3>Space Travelers&apos; Hub</h3>
+      </div>
+      <div>
+        <ul
+          className="list-unstyled m-2 p-2 d-flex flex-wrap"
+        >
+          {links.map((link) => (
+            <li key={link.text} className="m-2">
+              <NavLink
+                className={({ isActive }) => (isActive ? 'active-link' : 'link')}
+                to={link.path}
+              >
+                {link.text}
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+
+      </div>
+    </section>
     <hr className="m-5 my-1" />
   </>
 );
diff --git a/src/styles/nav.css b/src/styles/nav.css
index 13cb665..1ff8120 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -1,3 +1,16 @@
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.nav-container div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .active {
   color: red;
 }
@@ -17,3 +30,10 @@
 .Logo {
   width: 50px;
 }
+
+@media (min-width: 580px) {
+  .nav-container {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
\ No newline at end of file

From cc5aee79c50ca07cdda2284c57cb8ed9215067d2 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:53:46 +0100
Subject: [PATCH 16/17] Fix stylelint issues

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

diff --git a/src/styles/nav.css b/src/styles/nav.css
index 1ff8120..db5b686 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -36,4 +36,4 @@
     flex-direction: row;
     justify-content: space-between;
   }
-}
\ No newline at end of file
+}

From 3674eb93b34c9da006124ab9aa5a87bc03f1f887 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:57:05 +0100
Subject: [PATCH 17/17] Adjust hr width and nav padding

---
 src/components/Nav.jsx | 2 +-
 src/styles/nav.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index 01c4bd1..c523a85 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -37,7 +37,7 @@ const Nav = () => (
 
       </div>
     </section>
-    <hr className="m-5 my-1" />
+    <hr className="m-3 my-1 py-2" />
   </>
 );
 
diff --git a/src/styles/nav.css b/src/styles/nav.css
index db5b686..ec75763 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 1rem;
+  padding: 1rem 1rem 0 1rem;
 }
 
 .nav-container div {