Merge pull request #19 from FluxonApps/general-changes

General changes
FluxonApps · Jun 7, 2024 · 4a7912b · 4a7912b
2 parents bdeea41 + e8bef75
commit 4a7912b
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 144 deletions.
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -1,15 +1,14 @@
-.profile-header {
+.header {
     background-color: #FCF4E4; /* Blue background color */
     padding: 30px;             /* Padding around the text */
     text-align: center;        /* Center-align text */
     font-size: 2em;            /* Larger font size */
     font-weight: bold;         /* Bold text */
     border-radius: 5px;     
-
+    height: 10px;
   }
 
 .button{
-
     background-color: #F2EEEE;
     font-size: 18px;
     font-weight: 600;

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -13,9 +13,6 @@ import profileIcon from '../assets/defaultPhoto.png';
 const auth = getAuth();
 
 function Header() {
-  function handleClick() {
-    signOut(auth);
-  }
 
   const [user, userLoading] = useAuthState(auth);
 

diff --git a/src/components/MainPage2.css b/src/components/MainPage2.css
@@ -22,15 +22,17 @@ body, html, #root {
 
 .header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding: 5px 10px;
-    background-color: #e7e3d4;
-    box-sizing: border-box;
+    height:10%;
+    padding: 20px;
+    background-color: #FCF4E4; /* Adjust header background color */
 }
 
 .logo1 {
-    width: 100px;
+    margin-top: -14px;
+    height: 110px;
 }
 
 .profile-icon1 {
@@ -40,7 +42,7 @@ body, html, #root {
 .search-button {
     display: flex;
     overflow: hidden;
-    background-color: #3b3b5f;
+    background-color: #e7e3d4;
     align-items: center;
 
     padding: 8px 8px;
@@ -49,10 +51,12 @@ body, html, #root {
     user-select: none;
     transition: all 150ms linear;
     text-align: center;
-    border-radius: 100px;
-
+    border-radius: 10px;
+    border-width: 2px;
+    border-color: #444A6E!important;
+    color: #444A6E;
     font-size: 15px;
-    font-weight: 500;
+    font-weight: 700;
     line-height: 1.3;
 
     appearance:         none;
@@ -107,6 +111,7 @@ body, html, #root {
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #ccc; /* Optional: adds a border around the avatar */
+    max-width: none;
 }
 
 .friend-details {
@@ -123,3 +128,10 @@ body, html, #root {
     font-size: 14px;
 }
 
+
+.image {
+  height: 50px;
+  margin: 10px;
+  border: 2.5px solid #444A6E;
+  border-radius: 100px;
+}
diff --git a/src/components/MainPage2.tsx b/src/components/MainPage2.tsx
@@ -1,13 +1,17 @@
-import logo from '../assets/behonest_purple_logo.png';
+import logo from '../assets/BEHONEST02.png';
 import profileIcon from '../assets/profile_icon.png';
+
 import './MainPage2.css';
 import { Spinner } from '@chakra-ui/react';
-import { collection, query, where } from 'firebase/firestore';
-import { useCollection } from 'react-firebase-hooks/firestore';
-import { auth, db } from '../../firebase.config';
+import { getAuth, signOut } from 'firebase/auth';
+import { collection, query, where, doc, getDoc, updateDoc } from 'firebase/firestore';
+import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import defaultphoto from '../assets/defaultPhoto.png'
-import gudzak from '../assets/gudzak.png'
+import { useCollection, useDocumentData } from 'react-firebase-hooks/firestore';
+
+import { auth, db } from '../../firebase.config';
+import defaultphoto from '../assets/defaultPhoto.png';
+import gudzak from '../assets/gudzak.png';
 
 const preconnectFontGoogle = document.createElement('link');
 preconnectFontGoogle.rel = 'preconnect';
@@ -28,104 +32,148 @@ document.head.appendChild(preconnectFontGstatic);
 document.head.appendChild(fontStyleSheet);
 
 function Scrolling() {
-    const [user] = useAuthState(auth);
+  const [user] = useAuthState(auth);
 
-    console.log(user)
+  console.log(user);
 
-    const usersCollectionRef = collection(db, 'users');
-    const [users, usersLoading, usersError] = useCollection(user && query(usersCollectionRef, where('followers', 'array-contains', user.uid)));
+  const usersCollectionRef = collection(db, 'users');
+  const [users, usersLoading, usersError] = useCollection(
+    user && query(usersCollectionRef, where('followers', 'array-contains', user.uid)),
+  );
 
-    return (
-        <div className="app josefin-sans">
-            <Header />
-            <MainContent users={users} loading={usersLoading} error={usersError} />
-        </div>
-    );
+  return (
+    <div className="app josefin-sans">
+      <Header />
+      <MainContent users={users} loading={usersLoading} error={usersError} />
+    </div>
+  );
 }
 
+// function Header() {
+//   const [user, userLoading] = useAuthState(auth);
+
+//   const currentUserRef = user && doc(db, `/users/${user.uid}`);
+
+//   const [currentUser, currentUserLoading] = useDocumentData(currentUserRef);
+
+//   return (
+//     <header className="header">
+//       <img src={logo} alt="Logo" className="logo1" />
+//       <div style={{ marginLeft: 'auto' }}>
+//         <SearchButton />
+//       </div>
+//       {currentUser && (
+//         <a href="/profile">
+//           <img src={currentUser.profileImage || profileIcon} alt="Profile" className="image" />
+//         </a>
+//       )}
+//     </header>
+//   );
+// }
+
+// const auth = getAuth();
+
 function Header() {
-    return (
-        <header className="header">
-            <img src={logo} alt="Logo" className="logo1" />
-            <div style={{marginLeft: 'auto'}}>
-
-            <SearchButton />
-            </div>
-            <a href="/profile">
-                <img src={profileIcon} alt="Profile" className="profile-icon1" />
-            </a>
-        </header>
-    );
+  const [user, userLoading] = useAuthState(auth);
+
+  const currentUserRef = user && doc(db, `/users/${user.uid}`);
+
+  const [currentUser, currentUserLoading] = useDocumentData(currentUserRef);
+
+  return (
+    <header className="header">
+      <a href="/main">
+        <img src={logo} alt="Logo" className="logo1" />
+      </a>
+      <div style={{ marginLeft: 'auto' }}>
+        <SearchButton />
+      </div>
+      {currentUser && (
+        <a href="/profile">
+          <img src={currentUser.profileImage || profileIcon} alt="Profile" className="image" />
+        </a>
+      )}
+    </header>
+  );
 }
 
 function MainContent({ users, loading, error }) {
-    const today = new Date();
-    const dd = String(today.getDate()).padStart(2, '0');
-    const mm = String(today.getMonth() + 1).padStart(2, '0');
-    const yyyy = today.getFullYear();
-    const currentDay = mm + '/' + dd + '/' + yyyy;
-
-    const hasUsersWithPosts = users && users.docs.some((doc) => {
-        const user = doc.data();
-        const answers = user.answers;
-        const dates = Object.keys(answers).sort();
-        return dates.includes(currentDay);
+  const today = new Date();
+  const dd = String(today.getDate()).padStart(2, '0');
+  const mm = String(today.getMonth() + 1).padStart(2, '0');
+  const yyyy = today.getFullYear();
+  const currentDay = mm + '/' + dd + '/' + yyyy;
+
+  const hasUsersWithPosts =
+    users &&
+    users.docs.some((doc) => {
+      const user = doc.data();
+      const answers = user.answers;
+      const dates = Object.keys(answers).sort();
+
+      return dates.includes(currentDay);
     });
 
-    return (
-        <main className="main-content">
-            {error && <p>Error: {error.message}</p>}
-            <h1 className="main-title">FOLLOWINGS' ANSWERS</h1>
-            {users && users.docs && users.docs.length === 0 && <p>You haven't started following someone yet.</p>}
-            {!users && <Spinner />}
-            {users && !hasUsersWithPosts && users.docs.length !== 0 && <p>Nobody have posted their answers yet.</p>}
-            {users && users.docs.map((doc) => {
-                const user = doc.data();
-                const answers = user.answers;
-                const dates = Object.keys(answers).sort();
-
-                if (!dates.includes(currentDay)) {
-                    return null;
-                }
-
-                const lastAnswer = answers[currentDay];
-                return (
-                    <FriendResponse
-                        key={doc.id}
-                        nickname={user.username}
-                        question={lastAnswer[0]}
-                        answer={lastAnswer[1]}
-                        avatar={user.profileImage}
-                    />
-                );
-            })}
-        </main>
-    );
+  return (
+    <main className="main-content">
+      {error && <p>Error: {error.message}</p>}
+      <h1 className="main-title">FOLLOWINGS' ANSWERS</h1>
+      {users && users.docs && users.docs.length === 0 && <p>You haven't started following someone yet.</p>}
+      {!users && <Spinner />}
+      {users && !hasUsersWithPosts && users.docs.length !== 0 && <p>Nobody have posted their answers yet.</p>}
+      {users &&
+        users.docs.map((doc) => {
+          const user = doc.data();
+          const answers = user.answers;
+          const dates = Object.keys(answers).sort();
+
+          if (!dates.includes(currentDay)) {
+            return null;
+          }
+
+          const lastAnswer = answers[currentDay];
+
+          return (
+            <FriendResponse
+              key={doc.id}
+              nickname={user.username}
+              question={lastAnswer[0]}
+              answer={lastAnswer[1]}
+              avatar={user.profileImage}
+            />
+          );
+        })}
+    </main>
+  );
 }
 
 function SearchButton() {
-    return (
-        <div className="search-button">
-            <a href="/search">
-                <button>Search for new friends...</button>
-            </a>
-        </div>
-    );
+  return (
+    <div className="search-button">
+      <a href="/search">
+        <button>Search for new followings...</button>
+      </a>
+    </div>
+  );
 }
 
 function FriendResponse({ nickname, question, answer, avatar }) {
-    return (
-        <div className="friend-response">
-            <div className="friend-avatar">
-                <img src={avatar || defaultphoto} alt={`${nickname}'s avatar`} className="avatar-img"/>
-            </div>
-            <div className="friend-details">
-                <div className="friend-nickname">{nickname}</div>
-                <div className="friend-question"><strong></strong> {question}</div>
-                <div className="friend-answer"><strong></strong> {answer}</div>
-            </div>
+  return (
+    <div className="friend-response">
+      <div className="friend-avatar">
+        <img src={avatar || defaultphoto} alt={`${nickname}'s avatar`} className="avatar-img" />
+      </div>
+      <div className="friend-details">
+        <div className="friend-nickname">{nickname}</div>
+        <div className="friend-question">
+          <strong></strong> {question}
+        </div>
+        <div className="friend-answer">
+          <strong></strong> {answer}
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default Scrolling;
diff --git a/src/components/ProfilePage.css b/src/components/ProfilePage.css
@@ -58,7 +58,7 @@ body, html, #root {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #3b3b5f; /* Adjust background color to match your design */
+    background-color: #2c2b4a; /* Adjust background color to match your design */
     min-height: 800px;
 }
 
@@ -117,6 +117,7 @@ body, html, #root {
     /* transition: background-color 0.3s, color 0.3s, transform 0.3s; */
     width: auto;
     height: auto;
+    margin: 5px;
   }
 
   .label-file:hover {
@@ -128,7 +129,7 @@ body, html, #root {
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
-    border: 2px solid #fff;
+    border: 2px solid #3b3b5f;
     margin: 7px;
   }
 
@@ -221,7 +222,7 @@ body, html, #root {
     font-weight: 600;
     text-align: center;
     cursor: pointer;
-    border-width: 1.5px;
+    border-width: 2px;
     border-color: #444A6E!important;
     border-radius: 7px;
     color: #444A6E;