pages-styles refactored, user profile hide on off click

client/src/pages/Auth/auth.scss

@@ -0,0 +1,61 @@
+@import "../../index.scss";
+
+#Auth-Page {
+  @apply w-screen h-screen text-center p-5
+        flex flex-col justify-between items-center;
+
+  > main {
+    #Auth {
+      @apply w-screen;
+      .row {
+        @apply w-full flex justify-between p-10;
+
+        .Local-Auths,
+        .Provided-Auths {
+          @apply flex flex-col w-[600px] gap-5 justify-center items-center p-10
+            text-xl;
+
+          button {
+            @apply w-full flex gap-5 justify-center;
+          }
+        }
+      }
+    }
+
+    #Auth-Local {
+      #Local-Backward {
+        @apply absolute  hover:scale-90;
+      }
+
+      #Local {
+        @apply w-[400px]
+          flex flex-col justify-center items-center gap-5;
+
+        > #Submit-Button {
+          @apply flex justify-between text-xl;
+
+          > svg > path {
+            fill: black;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #Login-Page {
+    > header > h3 {
+      @apply text-3xl;
+    }
+
+    #Auth-Local {
+      @apply p-5 justify-center;
+      width: 100vw !important;
+
+      #Local-Backward {
+        left: 5vw;
+      }
+    }
+  }
+}

client/src/pages/Auth/index.jsx

@@ -1,4 +1,4 @@
-import "../pages-styles.scss";
+import "./auth.scss";
 import Auth from "./Auth";
 
 export default function AuthPage({ setAuthenticated }) {

client/src/pages/Home/SearchComponents/search.scss

@@ -0,0 +1,35 @@
+.hide-modal {
+    @apply absolute z-40 w-screen h-screen top-0 left-0 opacity-25
+      bg-slate-950;
+  }
+
+  #user-profile {
+    @apply bg-[#d9d9d9] w-[30rem] h-[30rem] absolute ml-[17rem]
+      translate-y-[-8rem] px-[2rem] py-[1rem] z-50;
+
+    .user-profile-upper {
+      @apply flex w-full;
+
+      .user-profile-upper-left {
+        @apply w-[50%] flex justify-between;
+      }
+
+      .user-profile-upper-right {
+        @apply w-[50%] flex justify-end items-center mr-[5%];
+      }
+
+      .user-profile-pic {
+        @apply h-[6rem] w-[6rem];
+        border-radius: 3rem;
+      }
+    }
+
+    .user-profile-description {
+      @apply bg-[#d28080] mt-[1rem] pl-[0.5rem] h-[60%];
+    }
+
+    .fat-btn {
+      @apply bg-[#d28080] flex justify-center items-center w-[120%] px-[0.2rem];
+      border-radius: 1rem;
+    }
+  }

client/src/pages/Home/SearchComponents/searchedProfile.jsx

@@ -1,14 +1,15 @@
-import UserProfile from './userProfile';
-import { useState, useEffect } from 'react';
-import { useContext } from 'react';
-import UserContext from '../../../Contexts/userContext';
-import PropTypes from 'prop-types';
+import UserProfile from "./userProfile";
+import { useState, useEffect } from "react";
+import { useContext } from "react";
+import UserContext from "../../../Contexts/userContext";
+import PropTypes from "prop-types";
 
 const SearchedProfile = (props) => {
   const [showConnectionProfile, setShowConnectionProfile] = useState(false);
   const [showStrangerProfile, setShowStrangerProfile] = useState(false);
-  const [SelectedUserProfileShowKey, setSelectedUserProfileShowKey] = useState(null);
-  const [connectionStatus, setConnectionStatus] = useState(''); // New state variable
+  const [SelectedUserProfileShowKey, setSelectedUserProfileShowKey] =
+    useState(null);
+  const [connectionStatus, setConnectionStatus] = useState(""); // New state variable
   const [dummyState, setDummyState] = useState(0); // Dummy state variable
 
   const user = useContext(UserContext);
@@ -17,27 +18,29 @@ const SearchedProfile = (props) => {
     // Pass the chatKey to handleShowProfile
     setSelectedUserProfileShowKey(chatKey);
 
-    if (section === 'connection') {
+    if (section === "connection") {
       setShowConnectionProfile(!showConnectionProfile);
       setShowStrangerProfile(false);
-    } else if (section === 'stranger') {
+    } else if (section === "stranger") {
       setShowStrangerProfile(!showStrangerProfile);
       setShowConnectionProfile(false);
     }
   };
 
   const [strangersSearchedResult, setStrangersSearchedResult] = useState([]);
-  const [connectionsSearchedResult, setConnectionsSearchedResult] = useState([]);
+  const [connectionsSearchedResult, setConnectionsSearchedResult] = useState(
+    []
+  );
 
   useEffect(() => {
     fetchData();
   }, []); // Reload the component when connection status changes
 
   const fetchData = async () => {
-    const response = await fetch('http://localhost:3000/connection/search', {
-      method: 'POST',
+    const response = await fetch("http://localhost:3000/connection/search", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         id: user._id,
@@ -52,7 +55,7 @@ const SearchedProfile = (props) => {
 
   function truncateText(text, maxLength) {
     if (text.length > maxLength) {
-      return text.substring(0, maxLength) + '...';
+      return text.substring(0, maxLength) + "...";
     }
     return text;
   }
@@ -62,14 +65,18 @@ const SearchedProfile = (props) => {
 
     for (let i = 0; i < strangersSearchedResult.length; i++) {
       const stranger = strangersSearchedResult[i];
-      const truncatedDisplayName = truncateText(stranger.displayName, 18) || '';
-      const pictureUrl = 'https://example.com/random-image.png';
+      const truncatedDisplayName = truncateText(stranger.displayName, 18) || "";
+      const pictureUrl = "https://example.com/random-image.png";
       const chatKey = `stranger_${stranger._id}`;
 
       renderedChats.push(
         <div key={chatKey}>
           <div className="render-chat">
-            <div className="chat" id={`${i}_chatStranger`} onClick={() => handleShowProfile(chatKey, 'stranger')}>
+            <div
+              className="chat"
+              id={`${i}_chatStranger`}
+              onClick={() => handleShowProfile(chatKey, "stranger")}
+            >
               <img src={pictureUrl} alt="Profile" />
               <div className="chat-text" onClick={removeHiddenChatMenu}>
                 <p className="contact-name">{truncatedDisplayName}</p>
@@ -88,6 +95,7 @@ const SearchedProfile = (props) => {
                 description="Hardcoded description"
                 setConnectionStatus={setConnectionStatus}
                 setDummyState={setDummyState}
+                setShowProfile={setShowStrangerProfile}
               />
             )}
           </div>
@@ -105,34 +113,41 @@ const SearchedProfile = (props) => {
       const connection = connectionsSearchedResult[i].userData;
       if (!connection) continue;
 
-      const truncatedDisplayName = truncateText(connection.displayName, 18) || '';
-      const pictureUrl = 'https://example.com/random-image.png';
+      const truncatedDisplayName =
+        truncateText(connection.displayName, 18) || "";
+      const pictureUrl = "https://example.com/random-image.png";
       const chatKey = `connection_${connection._id}`;
 
       renderedChats.push(
         <div key={chatKey}>
           <div className="render-chat">
-            <div className="chat" id={`${i}_chatConnection`} onClick={() => handleShowProfile(chatKey, 'connection')}>
+            <div
+              className="chat"
+              id={`${i}_chatConnection`}
+              onClick={() => handleShowProfile(chatKey, "connection")}
+            >
               <img src={pictureUrl} alt="Profile" />
               <div className="chat-text" onClick={removeHiddenChatMenu}>
                 <p className="contact-name">{truncatedDisplayName}</p>
                 <p>@{connection.username}</p>
               </div>
             </div>
-            {showConnectionProfile && SelectedUserProfileShowKey === chatKey && (
-              <UserProfile
-                key={`${chatKey}_profile`}
-                id={`${i}_userConnection`}
-                userId2={connection._id}
-                displayName={truncatedDisplayName}
-                user={connection.username}
-                picture={pictureUrl}
-                status="connected"
-                description="Hardcoded description"
-                setConnectionStatus={setConnectionStatus}
-                setDummyState={setDummyState}
-              />
-            )}
+            {showConnectionProfile &&
+              SelectedUserProfileShowKey === chatKey && (
+                <UserProfile
+                  key={`${chatKey}_profile`}
+                  id={`${i}_userConnection`}
+                  userId2={connection._id}
+                  displayName={truncatedDisplayName}
+                  user={connection.username}
+                  picture={pictureUrl}
+                  status="connected"
+                  description="Hardcoded description"
+                  setConnectionStatus={setConnectionStatus}
+                  setDummyState={setDummyState}
+                  setShowProfile={setShowConnectionProfile}
+                />
+              )}
           </div>
         </div>
       );
@@ -142,9 +157,9 @@ const SearchedProfile = (props) => {
   };
 
   function removeHiddenChatMenu() {
-    const element = document.querySelector < HTMLElement > '.chat-menu';
+    const element = document.querySelector < HTMLElement > ".chat-menu";
     if (element) {
-      element.classList.remove('hidden');
+      element.classList.remove("hidden");
     }
   }
 

client/src/pages/Home/SearchComponents/userProfile.jsx

@@ -1,5 +1,5 @@
-import FatButtons from '../../../SmallComponents/FatButtons';
-import PropTypes from 'prop-types';
+import FatButtons from "../../../SmallComponents/FatButtons";
+import PropTypes from "prop-types";
 
 const UserProfile = (props) => {
   const connectButtonText = (
@@ -17,13 +17,27 @@ const UserProfile = (props) => {
 
   return (
     <>
-      <div id="user-profile">
+      <div id="user-profile" className="z-30">
         <div className="user-profile-upper">
           <div className="user-profile-upper-left">
-            <img className="user-profile-pic" src={props.picture} alt="profile picture" />
+            <img
+              className="user-profile-pic"
+              src={props.picture}
+              alt="profile picture"
+            />
           </div>
           <div className="user-profile-upper-right">
-            <FatButtons status={props.status} text={props.status === 'connected' ? disconnectButtonText : connectButtonText} _id2={props.userId2} setConnectionStatus={props.setConnectionStatus} setDummyState={props.setDummyState} />
+            <FatButtons
+              status={props.status}
+              text={
+                props.status === "connected"
+                  ? disconnectButtonText
+                  : connectButtonText
+              }
+              _id2={props.userId2}
+              setConnectionStatus={props.setConnectionStatus}
+              setDummyState={props.setDummyState}
+            />
           </div>
         </div>
         <h4>{props.displayName}</h4>
@@ -33,6 +47,12 @@ const UserProfile = (props) => {
           <p>{props.description}</p>
         </div>
       </div>
+      <div
+        className="block w-screen h-screen absolute bg-slate-900 opacity-30 top-0 left-0 z-20"
+        onClick={() => {
+          props.setShowProfile(false);
+        }}
+      ></div>
     </>
   );
 };
@@ -45,6 +65,7 @@ UserProfile.propTypes = {
   displayName: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  setShowProfile: PropTypes.func.isRequired,
 };
 
 export default UserProfile;