add edit forms (ilPhil#215)

rebecca-xm · Feb 24, 2022 · e88d5c0 · e88d5c0
1 parent 5d2bf14
commit e88d5c0
Show file tree

Hide file tree

Showing 21 changed files with 1,804 additions and 205 deletions.
diff --git a/src/Pages/EditRoom/EditRoom.module.scss b/src/Pages/EditRoom/EditRoom.module.scss
@@ -0,0 +1,40 @@
+.main {
+  display: flex;
+  height: calc(100vh - 120px);
+  justify-content: center;
+  .image {
+    background-image: url("./../../libs/img/desktop.jpg");
+    background-size: cover;
+    background-position: center;
+    flex-grow: 1;
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: calc(100vh - 120px);
+      background: linear-gradient(
+        0deg,
+        rgba(72, 0, 48, 0.68) 0%,
+        rgba(100, 0, 67, 0.15) 100%
+      );
+    }
+  }
+  .form {
+    min-width: 450px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  @media all and (max-width: 990px) {
+    .image {
+      display: none;
+    }
+    .form {
+      width: 100%;
+      min-width: 100%;
+      align-items: flex-start;
+      padding-top: 20px;
+    }
+  }
+}
diff --git a/src/Pages/EditRoom/index.jsx b/src/Pages/EditRoom/index.jsx
@@ -0,0 +1,15 @@
+import EditRoomAdForm from "./../../components/EditRoomAdForm";
+import styles from "./EditRoom.module.scss";
+
+const EditRoom = () => {
+  return (
+    <div className={styles.main}>
+      <div className={styles.image}></div>
+      <div className={styles.form}>
+        <EditRoomAdForm />
+      </div>
+    </div>
+  );
+};
+
+export default EditRoom;
diff --git a/src/Pages/Main/index.jsx b/src/Pages/Main/index.jsx
@@ -12,6 +12,7 @@ import UserDetails from "../UserDetails";
 import { useSelector } from "react-redux";
 import NewRoom from "../NewRoom";
 import Messages from "../Messages";
+import EditRoom from "../EditRoom";
 import { useState } from "react";
 
 const Main = () => {
@@ -36,6 +37,7 @@ const Main = () => {
           <Route path="/matches" element={<Matches />} />
           <Route path="/profile" element={<Profile />} />
           <Route path="/users" element={<Users />} />
+          <Route path="/editroom" element={<EditRoom />} />
           <Route path="/roomdetails" element={<RoomDetails />} />
           <Route path="/userdetails" element={<UserDetails />} />
           <Route path="/addroom" element={<NewRoom />} />

diff --git a/src/Pages/Profile/Profile.module.scss b/src/Pages/Profile/Profile.module.scss
@@ -1,129 +1,148 @@
 @import "./../../libs/variables.scss";
 
 .main {
-  overflow-y: auto;
-  padding: 0 20px;
-  .info {
-    position: relative;
-    color: #fff;
-    z-index: 2;
-    max-width: 400px;
-    margin: 25px auto;
-    p {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 14px;
-      margin: 5px 0 0 20px;
-    }
-    h3 {
-      font-family: $paragraphFont;
-      font-weight: 700;
-      font-size: 24px;
-      margin-left: 20px;
-      padding-top: 80px;
+  display: flex;
+  .wrapper {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0 20px;
+    .info {
+      position: relative;
+      color: #fff;
+      z-index: 2;
+      margin: 25px auto;
+      p {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 14px;
+        margin: 5px 0 0 20px;
+      }
+      h3 {
+        font-family: $paragraphFont;
+        font-weight: 700;
+        font-size: 24px;
+        margin-left: 20px;
+        padding-top: 80px;
+      }
     }
-  }
-  .header {
-    max-width: 400px;
-    height: 208px;
-    background-size: cover;
-    background-position: center;
-    position: relative;
-    margin: -200px auto 0;
-    border-radius: 20px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
-    &::before {
-      content: "";
-      position: absolute;
-      border-radius: 20px;
-      background: linear-gradient(
-        180deg,
-        rgba(72, 0, 48, 0.68) 0%,
-        rgba(100, 0, 67, 0.15) 100%
-      );
-      width: 100%;
+    .header {
       height: 208px;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      margin: -200px auto 0;
+      border-radius: 20px;
+      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+      &::before {
+        content: "";
+        position: absolute;
+        border-radius: 20px;
+        background: linear-gradient(
+          180deg,
+          rgba(72, 0, 48, 0.68) 0%,
+          rgba(100, 0, 67, 0.15) 100%
+        );
+        width: 100%;
+        height: 208px;
+      }
     }
-  }
 
-  .charsetContainer {
-    margin: 0 auto;
-    max-width: 400px;
-    max-width: 400px;
-    border: 2px solid #b9d1e0;
-    border-radius: 21px;
-    margin: 40px auto;
-    box-shadow: 0 3px 13px rgb(0 0 0 / 25%);
-    .charTitle {
-      padding: 20px 0 10px 30px;
-      font-weight: 400;
-      font-size: 14px;
-      font-weight: bold;
-      color: $mainLightBlue;
-    }
-    .charSet {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-      color: #6fa0bf;
-
-      .char {
+    .charsetContainer {
+      margin: 0 auto;
+      max-width: 400px;
+      max-width: 400px;
+      border: 2px solid #b9d1e0;
+      border-radius: 21px;
+      margin: 40px auto;
+      box-shadow: 0 3px 13px rgb(0 0 0 / 25%);
+      .charTitle {
+        padding: 20px 0 10px 30px;
+        font-weight: 400;
+        font-size: 14px;
+        font-weight: bold;
+        color: $mainLightBlue;
+      }
+      .charSet {
         display: flex;
+        justify-content: center;
         align-items: center;
-        width: 100px;
-        height: 40px;
-        font-weight: 400;
-        font-size: 12px;
-        margin: 10px 0.5rem;
-        cursor: pointer;
-        span {
-          color: #b9d1e0;
-          margin-right: 8px;
-          font-size: 20px;
-          &.active {
-            color: $mainPink;
+        flex-wrap: wrap;
+        color: #6fa0bf;
+
+        .char {
+          display: flex;
+          align-items: center;
+          width: 100px;
+          height: 40px;
+          font-weight: 400;
+          font-size: 12px;
+          margin: 10px 0.5rem;
+          cursor: pointer;
+          span {
+            color: #b9d1e0;
+            margin-right: 8px;
+            font-size: 20px;
+            &.active {
+              color: $mainPink;
+            }
           }
         }
       }
     }
   }
-
-  .bottomContent {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 40px auto;
-    max-width: 400px;
-    button {
-      background: linear-gradient(
-        105.54deg,
-        #b9d1e0 22.32%,
-        rgba(185, 209, 224, 0.21) 107.38%
-      );
-      color: $mainPink;
-      border: none;
-      border-radius: 100px;
-      padding: 10px 30px;
-      cursor: pointer;
-    }
-  }
-
   .actions {
-    border-top: 1px solid #bf007f;
-    width: 80%;
+    min-width: 400px;
     margin-left: auto;
     margin-right: auto;
-
+    padding: 20px;
     display: flex;
     flex-direction: column;
-
+    .line {
+      display: none;
+      height: 2px;
+      background-color: $mainPink;
+      width: 80%;
+    }
     .logoutBtn {
       padding: 8px;
       background-color: transparent;
       border: 0px;
-      text-align: left;
+      text-align: right;
       cursor: pointer;
     }
+
+    .bottomContent {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 400px;
+      button {
+        background: linear-gradient(
+          105.54deg,
+          #b9d1e0 22.32%,
+          rgba(185, 209, 224, 0.21) 107.38%
+        );
+        color: $mainPink;
+        border: none;
+        border-radius: 100px;
+        padding: 10px 30px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@media all and (max-width: 990px) {
+  .main {
+    flex-direction: column;
+    .actions {
+      min-width: 100%;
+      flex-direction: column-reverse;
+      .line {
+        display: block;
+        align-self: flex-end;
+        margin: 20px 0 0 0;
+      }
+    }
   }
 }