From 6f55c8a4e6c61e61cefc42012dcbe781e9459d39 Mon Sep 17 00:00:00 2001
From: Sonu Kumar <1AT20IS092@visioneer.atria.edu>
Date: Fri, 15 Mar 2024 21:00:36 +0530
Subject: [PATCH] Done

---
 frontend/src/components/Profile/Profile.js    | 56 ++++++++++++++-----
 .../src/components/Profile/Profile.module.css | 13 +----
 .../assets/InputControl/OutputControl.js      |  2 +-
 .../InputControl/OutputControl.module.css     | 10 +---
 frontend/src/components/assets/Navbar.jsx     |  4 +-
 frontend/src/components/assets/constants.js   |  4 +-
 6 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/Profile/Profile.js b/frontend/src/components/Profile/Profile.js
index d9372216..9f340bb7 100644
--- a/frontend/src/components/Profile/Profile.js
+++ b/frontend/src/components/Profile/Profile.js
@@ -1,15 +1,45 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import styles from './Profile.module.css'
 import OutputControl from '../assets/InputControl/OutputControl'
-import { Firestore } from 'firebase/firestore'
-import { db } from '../../firebase'
+import { auth, db } from '../../firebase'
+import { Navbar } from '../assets'
 
 function Profile() {
 
+    useEffect(() => {
+        auth.onAuthStateChanged((user) => {
+            if (user) {
+                console.log('User is signed in', user.uid);
+                const userName = user.displayName;
+
+                // Get the Firestore document reference for the user
+                // const userRef = db.collection('Users').doc();
+
+                // // Retrieve the user data from Firestore
+                // userRef.get().then((doc) => {
+                //     if (doc.exists) {
+                //         const userData = doc.data();
+                //         console.log('User data:', userData);
+                //         // Do something with the user data
+                //     } else {
+                //         console.log('User data not found');
+                //     }
+                // }).catch((error) => {
+                //     console.log('Error getting user data:', error);
+                // });
+            } else {
+                console.log('User is signed out');
+            }
+        });
+    }, []);
+
 
   return (
-    <div className={styles.container}>
-        <div className={styles.profile}>
+    <section>
+
+        <Navbar />
+
+        <div className={`${styles.profile} `}>
             <div className={styles.profileImage}>
                 <img src="https://via.placeholder.com/150" alt="Profile" />
 
@@ -17,28 +47,28 @@ function Profile() {
                     <i className="fas fa-camera"></i>
                 </button>
             </div>
-            <div className="grid grid-flow-row-dense grid-cols-2 items-center grid-rows-3 gap-2 justify-center">
-                <div className="w-[480px]">
+            <div className="grid grid-flow-row-dense grid-cols-2 items-center min-w-[50%] max-w-full gap-2 justify-center">
+                <div className="">
                     <OutputControl label="Name" value="Sonu Kumar" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                     <OutputControl label="Age" value="22 Year" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                     <OutputControl label="Gender" value="Male" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Email" value="sonu@gmail.com" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Phone" value="1234567890" />
                 </div>
-                <div className="w-[480px]">
+                <div className="">
                 <OutputControl label="Address" value="Bangalore, Karnataka" />
                 </div>
             </div>
         </div>
-    </div>
+    </section>
   )
 }
 
diff --git a/frontend/src/components/Profile/Profile.module.css b/frontend/src/components/Profile/Profile.module.css
index 75148216..d495b071 100644
--- a/frontend/src/components/Profile/Profile.module.css
+++ b/frontend/src/components/Profile/Profile.module.css
@@ -1,22 +1,11 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  width: 100%;
-  padding: 20px;
-  background-color: rgb(243, 248, 248);
-}
 
 .profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: 20px;
-  background-color: white;
+  padding: 60px;
   border-radius: 10px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .profileImage {
diff --git a/frontend/src/components/assets/InputControl/OutputControl.js b/frontend/src/components/assets/InputControl/OutputControl.js
index 21b6e346..cfa012fb 100644
--- a/frontend/src/components/assets/InputControl/OutputControl.js
+++ b/frontend/src/components/assets/InputControl/OutputControl.js
@@ -5,8 +5,8 @@ import styles from './OutputControl.module.css';
 function OutputControl({ label, value }) {
   return (
     <div className={styles.outputContainer}>
-      <div className={styles.output}>{value}</div>
       <label className={styles.label}>{label}</label>
+      <div className={styles.output}>{value}</div>
     </div>
   );
 }
diff --git a/frontend/src/components/assets/InputControl/OutputControl.module.css b/frontend/src/components/assets/InputControl/OutputControl.module.css
index dc576944..f69fff97 100644
--- a/frontend/src/components/assets/InputControl/OutputControl.module.css
+++ b/frontend/src/components/assets/InputControl/OutputControl.module.css
@@ -1,16 +1,11 @@
 /* OutputControl.module.css */
 
-.outputContainer {
-    position: relative;
-  }
   
   .output {
-    padding: 10px;
-    padding-top: 15px;
+    padding: 8px 10px;
     border: 1px solid cadetblue; /* Default border color */
     border-radius: 5px;
     width: 100%;
-    background-color: #f5f5f5; /* Background color for output */
     color: #647674; /* Text color for output */
     font-size: 1rem;
     font-weight: 700;
@@ -18,13 +13,12 @@
   }
   
   .label {
-    position: absolute;
     top: 1px;
     left: 8px;
     padding: 0 5px;
     color: cadetblue;
     font-size: 0.8rem;
-    font-weight: 500;
+    font-weight: 700;
     pointer-events: none;
     transition: 0.3s ease-in-out;
   }
diff --git a/frontend/src/components/assets/Navbar.jsx b/frontend/src/components/assets/Navbar.jsx
index 0c57205f..4d2449eb 100644
--- a/frontend/src/components/assets/Navbar.jsx
+++ b/frontend/src/components/assets/Navbar.jsx
@@ -46,7 +46,7 @@ const Navbar = () => {
         <div
           className={`${
             !toggle ? "hidden" : "flex flex-col"
-          } backdrop-blur-sm shadow-md bg-blue-100 absolute top-[50px] border-[1px] border-dimWhite right-12 mx-2 my-2 p-[4px] min-w-[240px] rounded-lg sidebar`}
+          } backdrop-blur-sm shadow-md bg-blue-100 absolute top-[50px] border-[1px] border-black/20 right-12 mx-2 my-2 p-[4px] min-w-[240px] rounded-lg sidebar`}
         >
           <h3 className="font-poppins font-normal  text-center text-black">
             Menu
@@ -62,7 +62,7 @@ const Navbar = () => {
                 }`}
                 onClick={() => setActive(nav.title)}
               >
-                <a href={`#${nav.id}`} className="flex">
+                <a href={`${nav.id}`} className="flex">
                   {nav.title}
                 </a>
               </li>
diff --git a/frontend/src/components/assets/constants.js b/frontend/src/components/assets/constants.js
index c52c0560..33b882a4 100644
--- a/frontend/src/components/assets/constants.js
+++ b/frontend/src/components/assets/constants.js
@@ -1,7 +1,7 @@
 export const navLinks = [
     {
-      id: "account",
-      title: "Account",
+      id: "profile",
+      title: "Profile",
     },
     {
       id: "about",