From 4c2dbad328df5e4310c8c224cbd36083881f3a0c Mon Sep 17 00:00:00 2001
From: Sooraj <95868709+Sooraj002@users.noreply.github.com>
Date: Sat, 18 May 2024 17:13:24 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=81=20[Frontend]=20improve=20"ask=20yo?=
 =?UTF-8?q?ur=20question"=20ui=20(#925)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* changed "ask your question ui"

* reverted changes
---
 frontend/src/pages/Q&A/Q&A.jsx                | 30 +++++++++-----
 frontend/src/pages/Q&A/Ques.scss              | 40 +++++++++++++++----
 .../ResourceSharingForm.jsx                   |  5 +--
 .../resource-sharing-form.module.scss         | 23 ++++++++++-
 4 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx
index f3be734e..ad86635e 100644
--- a/frontend/src/pages/Q&A/Q&A.jsx
+++ b/frontend/src/pages/Q&A/Q&A.jsx
@@ -124,17 +124,17 @@ function Ques(props) {
         body: JSON.stringify(formdata),
       });
       const data = await response.json();
-      if(data.errStack){
+      if (data.errStack) {
         setToastMessage(`${data.errStack}`);
         setOpenToast(true);
         setSeverity("error");
-      }else{
+      } else {
         setToastMessage("Q&A added successfully!");
         setOpenToast(true);
         setSeverity("success");
       }
       setIsUploadingData(false);
-     
+
       setFormData({
         title: "",
         description: "",
@@ -385,7 +385,11 @@ function Ques(props) {
                         ? `mb-3 ${style["level-of-trust"]} ${style["level-of-trust-dark"]}`
                         : `mb-3 ${style["level-of-trust"]} ${style["level-of-trust-dark"]}`
                     }
-                    style={{ color: "#69a9dd", fontSize: "25px" }}
+                    style={{
+                      color: "#69a9dd",
+                      fontSize: "25px",
+                      textAlign: "center",
+                    }}
                   >
                     Tags
                   </label>
@@ -425,15 +429,19 @@ function Ques(props) {
 
               <div
                 className={style["submit-btn"]}
-                style={{ justifyContent: "space-around" }}
+                style={{ justifyContent: "space-around", marginBottom: "1rem" }}
               >
                 <div className="data-loader">
-                  {isUploadingData ? <Loader /> :  <Button2
-                  style={{ marginRight: "3%" }}
-                  className={style["submit-btn-text"]}
-                  label="Submit"
-                  type="submit"
-                />}
+                  {isUploadingData ? (
+                    <Loader />
+                  ) : (
+                    <Button2
+                      style={{ marginRight: "3%" }}
+                      className={style["submit-btn-text"]}
+                      label="Submit"
+                      type="submit"
+                    />
+                  )}
                 </div>
               </div>
             </div>
diff --git a/frontend/src/pages/Q&A/Ques.scss b/frontend/src/pages/Q&A/Ques.scss
index 4a221595..943c3016 100644
--- a/frontend/src/pages/Q&A/Ques.scss
+++ b/frontend/src/pages/Q&A/Ques.scss
@@ -4,22 +4,35 @@
 }
 
 .question_form {
+  padding: 2rem;
   width: 50%;
   border: 2px solid #2a4886;
-  border-radius: 7px;
-  margin: 5% 5% 5% 25%;
+  border-radius: 1rem;
+  margin: 5rem auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
 }
 
 .close-popup {
-  position: relative;
-  margin-top: 1%;
-  background: black;
-  color: #69a9dd;
+  color: black;
+  background: #69a9dd;
   margin-left: 96.5%;
   width: 25px;
   height: 25px;
   border-radius: 50%;
-  border: 1px solid #69a9dd;
+  border: none;
+}
+
+.toppings-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 2rem;
+  li {
+    width: 8rem;
+  }
 }
 
 .question-cards {
@@ -75,6 +88,19 @@
   cursor: pointer;
 }
 
+@media screen and (max-width: 1200px) {
+  .toppings-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 650px) {
+  .question_form {
+    width: 85%;
+    margin: auto;
+  }
+}
+
 @media (max-width: 650px) {
   .question_form {
     width: 85%;
diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx
index 909a9a9d..6b8213d1 100644
--- a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx
+++ b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx
@@ -9,9 +9,8 @@ import { SimpleToast } from "../../../../components/util/Toast";
 
 export function ResourceSharingForm(props) {
   const [resourceToast, setResourceToast] = useState("");
-  const [openSubmitResourceSuccess, setOpenSubmitResourceSuccess] = useState(
-    false
-  );
+  const [openSubmitResourceSuccess, setOpenSubmitResourceSuccess] =
+    useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [resourceToastStatus, setResourceToastStatus] = useState("");
 
diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss
index b51b5a27..c2234502 100644
--- a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss
+++ b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss
@@ -81,6 +81,7 @@
 .resource-input {
   position: relative;
   margin-bottom: 30px !important;
+  width: 35rem;
 }
 
 .resource-input input,
@@ -217,8 +218,11 @@
 }
 
 .inside-resource {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   width: 85%;
-  margin: 0 auto;
 }
 
 [type="radio"] {
@@ -354,6 +358,23 @@ input[type="date"]:not(:valid):before {
   align-items: center;
 }
 
+@media screen and (max-width: 1200px) {
+  .resource-input {
+    width: 23rem;
+  }
+
+  .toppings-list {
+    display: flex;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .resource-input {
+    width: auto;
+  }
+}
+
 @media screen and (max-width: 750px) {
   .resource-section {
     flex-direction: column;