Merge pull request #46 from Diegogagan2587/styling-my-profile

Styling my profile

src/pages/MyProfile.jsx

@@ -1,5 +1,7 @@
+import '../styles/MyProfile.css';
 import { useSelector } from "react-redux";
 
+
 const MyProfile = () => {
   const rockets = useSelector((state) => state.rockets);
   const missions = useSelector((state) => state.missions.missions);
@@ -8,16 +10,16 @@ const MyProfile = () => {
   return (
     <div className="my-profile-container">
       <div className="reserved-rockets-container">
-        <ul className="rockets-list">
-          <h2>My Missions</h2>
+      <h2>My Missions</h2>
+        <ul className="reserved-list">
           {missions.filter((mission) => mission.reserved).map((mission) => {
             { return <li key={mission.id}>{mission.name}</li> }
           })}
         </ul>
       </div>
       <div className="reserved-rockets-container">
-        <ul className="rockets-list">
-          <h2>My Rockets</h2>
+      <h2>My Rockets</h2>
+        <ul className="reserved-list">
           {rockets.filter((rocket) => rocket.reserved).map((rocket) => {
             { return <li key={rocket.id}>{rocket.rocket_name}</li> }
           })}

src/styles/MyProfile.css

@@ -0,0 +1,30 @@
+.my-profile-container {
+  display: flex;
+  border-top: 2px solid gray;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2.5%;
+}
+
+.reserved-rockets-container {
+  width: 45%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1.75%;
+}
+
+.reserved-rockets-container .reserved-list {
+  margin-top: 5%;
+  border: 1px solid gray;
+  border-radius: 5px;
+  gap: 0;
+}
+
+.reserved-rockets-container .reserved-list li {
+  padding: 3%;
+}
+
+.reserved-rockets-container .reserved-list li + li {
+  border-top: 1px gray solid;
+}