Fix/ilPhil#209 fix forms (ilPhil#210)

rebecca-xm · Feb 24, 2022 · 769407b · 769407b
1 parent e88d5c0
commit 769407b
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 36 deletions.
diff --git a/src/Pages/Likes/Likes.module.scss b/src/Pages/Likes/Likes.module.scss
@@ -2,15 +2,15 @@
 
 .main {
   display: flex;
-  height: 100%;
+  height: 100vh;
   justify-content: center;
   background-color: $background;
   padding: 10px 20px 20px 20px;
   .image {
     background-image: url("./../../libs/img/desktop-like.jpg");
     background-size: cover;
     background-position: center;
-    min-width: 400px;
+    flex-grow: 1;
     position: relative;
     margin-right: 10px;
     &::before {

diff --git a/src/Pages/Likes/index.jsx b/src/Pages/Likes/index.jsx
@@ -6,7 +6,7 @@ import { useState, useEffect } from "react";
 import PlaceHolder from "../../components/PlaceHolder";
 
 const Likes = () => {
-  const user = useSelector(state => state.user);
+  const user = useSelector((state) => state.user);
   const dispatch = useDispatch();
 
   const [dataLikes, setDataLikes] = useState({ data: [], isRoom: null });

diff --git a/src/Pages/NewRoom/NewRoom.module.scss b/src/Pages/NewRoom/NewRoom.module.scss
@@ -2,17 +2,20 @@
   display: flex;
   height: calc(100vh - 120px);
   justify-content: center;
+  padding: 10px;
+
   .image {
     background-image: url("./../../libs/img/desktop.jpg");
     background-size: cover;
     background-position: center;
     flex-grow: 1;
     position: relative;
+    height: 90vh;
     &::before {
       content: "";
       position: absolute;
       width: 100%;
-      height: calc(100vh - 120px);
+      height: 100%;
       background: linear-gradient(
         0deg,
         rgba(72, 0, 48, 0.68) 0%,
@@ -25,6 +28,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    padding-top: 100px;
   }
   @media all and (max-width: 990px) {
     .image {

diff --git a/src/Pages/Rooms/index.jsx b/src/Pages/Rooms/index.jsx
@@ -7,7 +7,7 @@ import CitiesFilter from "./../../components/CitiesFilter";
 import PlaceHolder from "../../components/PlaceHolder";
 
 const Rooms = () => {
-  const user = useSelector(state => state.user);
+  const user = useSelector((state) => state.user);
   const [roomsList, setRoomList] = useState([]);
   const [result, setResult] = useState(false);
   const [filter, setFilter] = useState({
@@ -16,7 +16,7 @@ const Rooms = () => {
   });
 
   useEffect(() => {
-    httpPOST("/getrooms", user.iam).then(data => setRoomList(data));
+    httpPOST("/getrooms", user.iam).then((data) => setRoomList(data));
   }, [user.iam]);
 
   const setNoFilter = () => {
@@ -28,6 +28,7 @@ const Rooms = () => {
 
   return (
     <div className={styles.main}>
+      {console.log(result)}
       <h3 className={styles.title}>Find your perfect Room!</h3>
       <div className={styles.filter}>
         <CitiesFilter
@@ -42,8 +43,8 @@ const Rooms = () => {
         </button>
       </div>
       {roomsList.map(
-        room =>
-          !user.matches.map(item => item.roomId).includes(room._id) &&
+        (room) =>
+          !user.matches.map((item) => item.roomId).includes(room._id) &&
           room.roomOwner !== user._id &&
           (filter.city ? (
             filter.city === room.city && (

diff --git a/src/components/AddRoomAdForm/adsSteps/FirstStepForm.jsx b/src/components/AddRoomAdForm/adsSteps/FirstStepForm.jsx
@@ -39,6 +39,22 @@ const FirstStepForm = ({
             />
             <span>,00 €/month</span>
           </div>
+          <div className={styles.address}>
+            <label className={styles.label} htmlFor="address">
+              Address
+            </label>
+            <input
+              className={styles.adressInput}
+              value={values.roomAddress}
+              onChange={handleFormData("roomAddress")}
+              name="roomAddress"
+              id="roomAddress"
+              type="text"
+              placeholder="via della felicità"
+              required
+            />
+          </div>
+
           <div className={styles.roomType}>
             <label className={styles.label} htmlFor="roomtype">
               Room type*
@@ -66,21 +82,6 @@ const FirstStepForm = ({
             values={values}
           />
         </div>
-        <div className={styles.address}>
-          <label className={styles.label} htmlFor="address">
-            Address
-          </label>
-          <input
-            className={styles.adressInput}
-            value={values.roomAddress}
-            onChange={handleFormData("roomAddress")}
-            name="roomAddress"
-            id="roomAddress"
-            type="text"
-            placeholder="via della felicità"
-            required
-          />
-        </div>
         <fieldset className={styles.fieldset}>
           <legend>About the flat</legend>
           <section>

diff --git a/src/components/AddRoomAdForm/adsSteps/FirstStepForm.module.scss b/src/components/AddRoomAdForm/adsSteps/FirstStepForm.module.scss
@@ -22,7 +22,7 @@
     margin: 0 auto;
     .label {
       font-size: $superSmall;
-      margin: 30px 0 5px 0;
+      margin: 25px 0 5px 0;
     }
     .rent {
       margin: 20px 0 0;
@@ -106,7 +106,7 @@
   }
 
   .address {
-    margin: 25px auto;
+    margin: 15px 0;
     .adressInput {
       text-align: center;
       margin-left: 10px;

diff --git a/src/components/AddRoomAdForm/adsSteps/SecondStepForm.module.scss b/src/components/AddRoomAdForm/adsSteps/SecondStepForm.module.scss
@@ -41,6 +41,7 @@
       object-fit: cover;
       width: 100px;
       height: 100px;
+      margin: 5px 0;
     }
 
     .formWrapper {
@@ -84,8 +85,8 @@
         font-weight: bold;
         text-align: center;
         line-height: 100px;
-        margin: 5px 0;
         cursor: pointer;
+        margin: 5px 0;
       }
       .hidden {
         cursor: default;

diff --git a/src/components/AddRoomAdForm/adsSteps/ThirdStepForm.jsx b/src/components/AddRoomAdForm/adsSteps/ThirdStepForm.jsx
@@ -24,14 +24,16 @@ const ThirdStepForm = ({ formData, prevStep }) => {
   return (
     <div className={styles.containerForm}>
       <ul>
-        <li className={styles.li1}>
-          <h4>Room Type:</h4>
-          {formData.roomType}
-        </li>
-        <li className={styles.li1}>
-          <h4>Rent Price:</h4>
-          {formData.rentPrice} €/month
-        </li>
+        <div className={styles.rentFlex}>
+          <li className={styles.rentLi}>
+            <h4>Room Type:</h4>
+            {formData.roomType}
+          </li>
+          <li>
+            <h4>Rent Price:</h4>
+            {formData.rentPrice} €/month
+          </li>
+        </div>
         <li className={styles.li1}>
           <h4>Address:</h4>
           {formData.roomAddress}

diff --git a/src/components/AddRoomAdForm/adsSteps/ThirdStepForm.module.scss b/src/components/AddRoomAdForm/adsSteps/ThirdStepForm.module.scss
@@ -3,13 +3,18 @@
 .containerForm {
   color: darken($mainLightBlue, 13);
   width: 260px;
-  margin: 60px auto;
+  margin: 50px auto;
   ul {
     list-style: none;
     font-size: 12px;
+    .rentFlex {
+      display: flex;
+      justify-content: flex-start;
+      gap: 50px;
+    }
     .li1 {
       display: flex;
-      margin: 15px 0;
+      margin: 20px 0;
       h4 {
         margin-right: 10px;
       }

diff --git a/src/components/HeaderAddRoomAdForm/HeaderAddRoomForm.module.scss b/src/components/HeaderAddRoomAdForm/HeaderAddRoomForm.module.scss
@@ -1,6 +1,7 @@
 @import "./../../libs/variables.scss";
 
 .main {
+  // padding-top: 30px;
   .closeBtn {
     border: none;
     background-color: rgba(80, 80, 80, 0);
@@ -24,6 +25,7 @@
     justify-content: space-between;
     margin: 30px auto;
     position: relative;
+    z-index: 1;
   }
   .stepCounter {
     width: 1.5rem;

diff --git a/src/components/HeaderForms/HeaderForms.module.scss b/src/components/HeaderForms/HeaderForms.module.scss
@@ -35,6 +35,7 @@
     justify-content: space-between;
     margin: 30px auto;
     position: relative;
+    z-index: 1;
   }
   .stepCounter {
     width: 1.5rem;