Made Responsive

src/Back_end/Routes/apiroutes.js

@@ -13,8 +13,9 @@ const client = new google.auth.OAuth2(
   process.env.REDIRECT_URL
 );
 console.log(client);
-const checkTokensMiddleware = async (req, res, next) => {//even though this function is not called still using the express sessions if the request exits in the session
-  const tokens = req.session.tokens;                      //then the fetching data when expiry occurs still happens
+const checkTokensMiddleware = async (req, res, next) => {
+  //even though this function is not called still using the express sessions if the request exits in the session
+  const tokens = req.session.tokens; //then the fetching data when expiry occurs still happens
   if (!tokens || !tokens.access_token || !tokens.refresh_token) {
     return res.status(401).json({ error: "OAuth2 tokens not set" });
   }
@@ -83,8 +84,8 @@ router.get("/googleauth/redirect", async (req, res) => {
   try {
     const { tokens } = await client.getToken(code);
     client.setCredentials(tokens);
-    //req.session.tokens = tokens;
-    res.redirect("http://localhost:5177");
+    req.session.tokens = tokens;
+    res.redirect("http://localhost:5173");
   } catch (error) {
     console.error("Error handling OAuth2 redirect:", error);
     res.status(500).send("Error handling OAuth2 redirect");
@@ -136,7 +137,7 @@ router.post("/createEvent", async (req, res) => {
     });
 
     const createdEvent = response.data;
-    res.status(200);
+    res.status(200).json({ message: "Event added successfully" });
   } catch (error) {
     console.error("Error creating event:", error);
     res.status(500).json({ error: "Failed to create event" });

src/Front_end/homepage/ToDo_list/assigntask.jsx

@@ -371,20 +371,22 @@ const Assigntask = () => {
                   setNoDueDate(false); // Ensure "No Due Date" is unchecked when a due date is selected
                 }}
               />
-              <label>
-                <input
-                  type="checkbox"
-                  checked={noDueDate}
-                  onChange={(e) => {
-                    setNoDueDate(e.target.checked);
-                    if (e.target.checked) {
-                      setDueDateTime(""); // Reset due date when "No Due Date" is checked
-                    }
-                  }}
-                  style={{ cursor: "pointer", marginLeft: "10px" }}
-                />
-                No Due Date
-              </label>
+              <div className={assigntaskCSS.datelabel}>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={noDueDate}
+                    onChange={(e) => {
+                      setNoDueDate(e.target.checked);
+                      if (e.target.checked) {
+                        setDueDateTime(""); // Reset due date when "No Due Date" is checked
+                      }
+                    }}
+                    style={{ cursor: "pointer" }}
+                  />
+                  No Due
+                </label>
+              </div>
             </div>
             <span className={assigntaskCSS.requiredLabel}>* Required</span>
           </div>

src/Front_end/homepage/ToDo_list/assigntask.module.css

@@ -164,7 +164,10 @@
   margin-top: 10px;
   animation: fadeInOut 5s ease-in-out; /* Apply fadeInOut animation for notifications */
 }
-
+.datelabel label {
+  font-size: medium;
+  width: 45px;
+}
 .requiredLabel {
   display: block;
   color: red;
@@ -180,3 +183,16 @@
     opacity: 0;
   }
 }
+@media (max-width: 550px) {
+  .box {
+    width: 300px;
+    padding: 10px;
+  }
+  .datelabel {
+    font-size: 15px;
+    margin-left: 2px;
+  }
+  .checkboxes label {
+    font-size: 15px;
+  }
+}

src/Front_end/homepage/ToDo_list/mytodolist.module.css

@@ -99,3 +99,8 @@
   font-size: 0.8rem;
   margin-top: 5px;
 }
+@media (max-width: 500px) {
+  .box {
+    width: 325px;
+  }
+}

src/Front_end/homepage/ToDo_list/viewchanneltask.module.css

@@ -141,3 +141,21 @@
 .taskMetaNone {
   color: rgb(128, 31, 240);
 }
+@media (max-width: 830px) {
+  .tasks {
+    flex-direction: column;
+  }
+}
+@media (max-width: 450px) {
+  .box {
+    padding: 3px;
+  }
+  .todo,
+  .done {
+    font-size: smaller;
+    padding: 6px;
+  }
+  .taskItem {
+    padding: 3px;
+  }
+}

src/Front_end/homepage/ToDo_list/viewusertask.module.css

@@ -50,6 +50,7 @@
 
 .todo,
 .done {
+  font-size: medium;
   flex: 1;
   margin: 10px;
   padding: 10px;
@@ -141,3 +142,21 @@
 .taskMetaNone {
   color: rgb(128, 31, 240);
 }
+@media (max-width: 830px) {
+  .tasks {
+    flex-direction: column;
+  }
+}
+@media (max-width: 450px) {
+  .box {
+    padding: 3px;
+  }
+  .todo,
+  .done {
+    font-size: smaller;
+    padding: 6px;
+  }
+  .taskItem {
+    padding: 3px;
+  }
+}

src/Front_end/homepage/Totalsearch/totalsearch.module.css

@@ -1,59 +1,80 @@
 * {
-    box-sizing: border-box;
-  }
-
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  max-width: 600px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative; /* Ensure relative positioning for absolute children */
+}
+
+.input {
+  width: 100%;
+  padding: 10px;
+  font-size: 15px;
+  height: 85%;
+  border-radius: 5px;
+}
+
+.results {
+  width: 100%;
+  display: grid;
+  gap: 1px;
+  position: absolute;
+  z-index: 2;
+  top: calc(
+    100% + 10px
+  ); /* Adjust top position to create a gap below the input */
+  background-color: #fff; /* Ensure a white background for results */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a card-like appearance */
+  border-radius: 4px; /* Rounded corners for the results box */
+  max-height: 300px; /* Limit max height if needed */
+  overflow-y: auto; /* Enable scrolling if results exceed max height */
+}
+
+.resultItem {
+  padding: 10px;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  cursor: pointer; /* Add pointer cursor for clickable items */
+}
+
+.resultItem:hover {
+  background-color: #ebebeb; /* Lighten background on hover */
+}
+
+.item {
+  padding: 10px;
+}
+
+.dmContact {
+  border-left: 5px solid #1a73e8; /* Blue color for DM Contacts */
+}
+
+.channel {
+  border-left: 5px solid #34a853; /* Green color for Channels */
+}
+@media (max-width: 850px) {
   .container {
-    width: 100%;
-    max-width: 600px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative; /* Ensure relative positioning for absolute children */
-  }
-
-  .input {
-    width: 100%;
-    padding: 10px;
-    font-size: 15px;
-    height: 85%;
-    border-radius: 5px;
-  }
-
-  .results {
-    width: 100%;
-    display: grid;
-    gap: 1px;
-    position: absolute;
-    z-index: 2;
-    top: calc(100% + 10px); /* Adjust top position to create a gap below the input */
-    background-color: #fff; /* Ensure a white background for results */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a card-like appearance */
-    border-radius: 4px; /* Rounded corners for the results box */
-    max-height: 300px; /* Limit max height if needed */
-    overflow-y: auto; /* Enable scrolling if results exceed max height */
-  }
-
-  .resultItem {
-    padding: 10px;
-    border: 1px solid #ccc;
-    background-color: #f9f9f9;
-    cursor: pointer; /* Add pointer cursor for clickable items */
+    max-width: 550px;
   }
-
-  .resultItem:hover {
-    background-color: #ebebeb; /* Lighten background on hover */
-  }
-
-  .item {
-    padding: 10px;
+}
+@media (max-width: 700px) {
+  .container {
+    max-width: 450px;
   }
-
-  .dmContact {
-    border-left: 5px solid #1a73e8; /* Blue color for DM Contacts */
+}
+@media (max-width: 550px) {
+  .container {
+    max-width: 350px;
   }
-
-  .channel {
-    border-left: 5px solid #34a853; /* Green color for Channels */
+}
+@media (max-width: 450px) {
+  .container {
+    max-width: 250px;
   }
-  
+}

src/Front_end/homepage/channels/addchannel.module.css

@@ -90,3 +90,19 @@
   color: white;
   cursor: pointer;
 }
+@media (max-width: 950px) {
+  .box {
+    width: 500px;
+  }
+}
+@media (max-width: 600px) {
+  .box {
+    width: 350px;
+  }
+}
+@media (max-width: 400px) {
+  .box {
+    width: 320px;
+    height: 150px;
+  }
+}

src/Front_end/homepage/channels/addchannelmember.module.css

@@ -38,7 +38,7 @@
 .inputbox {
   height: 13%;
   width: 100%;
- 
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -123,8 +123,29 @@
   justify-content: center;
   align-items: center;
 }
-.noUsers{
-    width: 100%;
+.noUsers {
+  width: 100%;
   height: 78%;
   padding: 10px;
-}
+}
+@media (max-width: 650px) {
+  .h1 {
+    font-size: 25px;
+  }
+  .box {
+    height: 380px;
+    width: 328px;
+  }
+  .namep {
+    font-size: 21px;
+  }
+  .mailp {
+    font-size: 10px;
+  }
+  .Suserdsntexist {
+    width: 65%;
+  }
+  .Suserphoto {
+    width: 35px;
+  }
+}