Merge pull request #19 from tsheporamantso/responsiveness

Responsiveness - StaySpare🧰

README.md

@@ -1,7 +1,7 @@
 <a name="readme-top"></a>
 
 <div align="center">
-  <img src='./public/images/StaySphere.svg" alt="logo" width="140" height="auto"
+  <img src="./public/images/StaySphere.svg" alt="logo" width="140" height="auto" />
   <h1><b> StaySphere </b></h1>
 
 </div>
@@ -190,4 +190,4 @@ Also I would like to thank [Murat Korkmaz](https://www.behance.net/muratk) on Be
 
 This project is [MIT](https://github.com/tsheporamantso/final-capstone-react-front-end/blob/1012050f1dd1a177d317f0a8c3b90ab76d956a7f/LICENSE) licensed.
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

src/AddPlace.css

@@ -26,11 +26,16 @@
 }
 
 .button {
-  width: 100%;
   border: rgb(155, 155, 163) 2px solid;
-  padding: 10px;
   border-radius: 5px;
   color: #000;
+  margin-top: 20px;
+  transition: all 0.5s ease;
+}
+
+.button p {
+  font-size: 20px;
+  margin: 5px;
 }
 
 .button:hover {

src/AddReservation.css

@@ -15,6 +15,25 @@ select {
   box-sizing: border-box;
 }
 
+.link-btn-li {
+  text-decoration: none;
+  font-size: 16px;
+  transition-duration: 0.4s;
+  border: rgb(194, 241, 39) solid 1px;
+  border-radius: 5px;
+  padding: 10px 25px;
+  display: inline-block;
+  cursor: pointer;
+  background-color: rgb(151 191 17);
+  color: #fff;
+}
+
+.link-btn-li:hover {
+  background-color: #fff;
+  border: rgb(151 191 17) solid 1px;
+  color: #000;
+}
+
 /* start of Mobile styles */
 @media only screen and (max-width: 600px) {
   .form-container {

src/Components/AddPlace.js

@@ -64,7 +64,7 @@ function AddPlace() {
             Place added successfully!
           </div>
         )}
-        <button className="button" type="submit" disabled={status === 'loading'}>Add Place</button>
+        <button className="button" type="submit" disabled={status === 'loading'}><p>Add Place</p></button>
       </form>
     </div>
   );

src/Components/AddReservation.js

@@ -110,7 +110,7 @@ function AddReservation() {
       {status === 'succeeded' && (
         <div className="success-message">Reservation added successfully!</div>
       )}
-      <button className="button" type="submit" onClick={handleSubmit} disabled={status === 'loading'}>Add Reservation</button>
+      <button className="link-btn-li" type="submit" onClick={handleSubmit} disabled={status === 'loading'}>Add Reservation</button>
     </div>
   );
 }

src/Components/DeletePlace.js

@@ -30,9 +30,9 @@ const DeletePlace = () => {
   }
 
   return (
-    <div className="center">
+    <div className="delete-place-container">
       <h1>Delete Place</h1>
-      <ul>
+      <ul className="delete-place-card">
         {places.map((place) => (
           <li key={place.id} className="card">
             <h3>{place.description}</h3>

src/Components/DetailsPage.js

@@ -43,10 +43,9 @@ function DetailsPage() {
               Location:
               {detailsPage.location}
             </p>
-            <p>
-              Rate:
+            <span className="rate">
               <StarRating rating={detailsPage.rate} />
-            </p>
+            </span>
             <p>
               Address:
               {detailsPage.address}

src/Components/MyReservations.js

@@ -36,7 +36,7 @@ function MyReservations() {
     <div className="myreservationspage">
       <h1>My Reservations</h1>
       {reservations.length === 0 ? (
-        <div>No reservations</div>
+        <p>No reservations</p>
       ) : (
         reservations.map((reservation) => (
           <ul key={reservation.id} className="reservation-card-container">

src/Components/PlaceList.js

@@ -91,8 +91,8 @@ function PlacesList() {
               <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/instagram-new.png" alt="instagram-icon" /></a></li>
               <li><a href="https://www.twitter.com/vespa"><img src="https://img.icons8.com/ios/50/000000/p.png" alt="p-icon" /></a></li>
             </ul>
-            <button className="view-details" type="submit" onClick={() => handleViewDetails(place.id)}>
-              <Link to={`/layout/detailsPage/${place.id}`}>View Details</Link>
+            <button className="link" type="submit" onClick={() => handleViewDetails(place.id)}>
+              <Link to={`/layout/detailsPage/${place.id}`}><p>View Details</p></Link>
             </button>
           </li>
         ))}

src/DeleteItem.css

@@ -11,3 +11,28 @@
   color: #fff;
   border: none;
 }
+
+.delete-place-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin: 10px;
+}
+
+@media screen and (max-width: 600px) {
+  .delete-place-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 10px;
+  }
+
+  .delete-place-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin: 10px;
+  }
+}

src/DetailsPage.css

@@ -1,3 +1,11 @@
+.add-res-button {
+  font-size: 15px;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #a8db19;
+}
+
 .item-details {
   display: flex;
   flex-direction: column;
@@ -20,6 +28,16 @@
   width: 80vw;
 }
 
+.price-per-night {
+  background-color: lightgray;
+  padding: 10px;
+  width: 100%;
+}
+
+.rate {
+  text-align: center;
+}
+
 .image {
   width: 40vw;
   height: 70vh;
@@ -37,35 +55,33 @@
   color: black;
 }
 
-.view-details {
-  font-size: 15px;
-  padding: 10px;
+.link-btn {
+  text-decoration: none;
+  font-size: 16px;
+  transition-duration: 0.4s;
   border: none;
   border-radius: 5px;
-  background-color: #a8db19;
+  padding: 10px 25px;
+  display: inline-block;
+  cursor: pointer;
+  background-color: rgb(151 191 17);
+  color: #fff;
 }
 
-a {
-  text-decoration: none;
+.link-btn:hover {
+  background-color: #fff;
+  border: rgb(151 191 17) solid 1px;
   color: #000;
 }
 
-.price-per-night {
-  background-color: lightgray;
-  padding: 10px;
-  width: 100%;
-}
-
-.add-res-button {
-  font-size: 15px;
-  padding: 10px;
-  border: none;
-  border-radius: 5px;
-  background-color: #a8db19;
-}
-
 /* start of Mobile styles */
 @media only screen and (max-width: 600px) {
+  #previous,
+  #next {
+    padding: 10px;
+    border-radius: 50px;
+  }
+
   .main {
     flex-direction: column;
     align-items: center;

src/MyReservations.css

@@ -4,6 +4,7 @@ p {
 
 .myreservationspage {
   padding: 0;
+  margin: auto;
   font-family: Arial, sans-serif;
 }
 

src/Placelist.css

@@ -55,13 +55,30 @@ li {
 }
 
 .social-icons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.social-icons-li {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 10px;
 }
 
+.social-icons-li img {
+  width: 15px;
+  height: auto;
+}
+
+.social-icons-li li:hover {
+  opacity: 0.5;
+}
+
 .social-icons li img {
   gap: 10px;
   width: 20px;
@@ -134,6 +151,32 @@ li {
   cursor: pointer;
 }
 
+.link {
+  text-decoration: none;
+  font-size: 16px;
+  transition-duration: 0.4s;
+  border: none;
+  border-radius: 5px;
+  padding: 0 15px;
+  display: inline-block;
+  cursor: pointer;
+  background-color: rgb(151 191 17);
+}
+
+.link:hover {
+  background-color: #fff;
+  border: rgb(151 191 17) solid 1px;
+}
+
+.link p {
+  color: #fff;
+  margin: 10px;
+}
+
+.link p:hover {
+  color: #000;
+}
+
 /* start of Mobile styles */
 @media only screen and (max-width: 600px) {
   h1 {