css

krazykarthik2 · Mar 15, 2024 · d956f1e · d956f1e
1 parent efdcf70
commit d956f1e
Show file tree

Hide file tree

Showing 9 changed files with 316 additions and 108 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Auth/ProfileActions/ProfileActions.jsx b/src/components/Auth/ProfileActions/ProfileActions.jsx
@@ -1,21 +1,48 @@
+import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect, useState } from "react";
-import { Alert, Button, Form } from "react-bootstrap";
-import { Floating_Control_Label } from "../../utils/FormComp";
-import { firebaseContext } from "../../App";
+import { Alert, Button, Card, Form, FormControl } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
+import { firebaseContext } from "../../App";
+import { Floating_Control_Label } from "../../utils/FormComp";
 import { Back } from "../../utils/Navigations";
 
 function ProfileActions() {
   const firebase = useContext(firebaseContext);
   const [username, setUsername] = useState(firebase?.currentUser?.displayName);
   const [email, setEmail] = useState(firebase?.currentUser?.email);
   const [isEmailSent, setIsEmailSent] = useState(false);
+  const [pfpFile, setPfpFile] = useState(null);
+  const [pfpUrl, setPfpUrl] = useState(null);
   const navigate = useNavigate();
+  function handlePfpUpload(e) {
+    e.preventDefault();
+    setPfpFile(e.target.files[0]);
+  }
+  useEffect(() => {
+    if (pfpFile) {
+      setPfpUrl(URL.createObjectURL(pfpFile));
+    }
+  }, [pfpFile]);
+  window.pfpFile = pfpFile;
+  window.pfpURL = pfpUrl;
+
+  function handleProfilePicChange(file, callback = function () {}) {
+    if (firebase?.currentUser) {
+      firebase.updatePhoto(file, callback);
+    }
+  }
+  function handleProfilePicRemove() {
+    if (firebase?.currentUser) {
+      firebase.removeProfilePic();
+    }
+  }
+
   useEffect(() => {
     setUsername(firebase?.currentUser?.displayName);
     setEmail(firebase?.currentUser?.email);
   }, [firebase]);
-  window.navigate = navigate
+  window.navigate = navigate;
   function notRecentlyAuthed() {
     console.log("not recently authed");
     navigate("/auth/login", {
@@ -31,13 +58,43 @@ function ProfileActions() {
       firebase.updateEmail(email, notRecentlyAuthed, setIsEmailSent(true));
     if (firebase?.currentUser?.displayName != username)
       firebase.updateDisplayName(username);
+    if (!pfpFile) handleProfilePicChange(pfpFile);
   }
   return (
-    <div className="vw-100 bg-secondary vh-100 d-flex flex-column align-items-center justify-content-between">
-      <div className="d-flex w-100 justify-content-start p-3">
+    <div className="vw-100  vh-100 d-flex flex-column align-items-center justify-content-between">
+      <div className="d-flex w-100 justify-content-start p-3 bg-dark">
         <Back />
       </div>
-      <Form className="card vstack p-2" onSubmit={handleUpdateProfile}>
+      <Form className="card vstack p-2 " onSubmit={handleUpdateProfile}>
+        <h1 className="d-center">Update Profile</h1>
+        <div className="d-center flex-column">
+          <img
+            src={pfpUrl || firebase?.currentUser?.photoURL}
+            className="rounded-circle border border-5 border-secondary"
+            width={"200"}
+          />
+          <div className="actions d-flex">
+            <Card title="pfp" className="p-2">
+              <h1>
+                <FontAwesomeIcon icon={faEdit} /> Change
+              </h1>
+              <FormControl type="file" onChange={handlePfpUpload} />
+            </Card>
+            <Button
+              className="btn border-0 btn-danger"
+              onClick={() => handleProfilePicRemove()}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+              <div className="line">Remove</div>
+              <div className="line">Profile Pic</div>
+            </Button>
+          </div>
+          <div className="text-center h4">
+            {firebase?.currentUser?.displayName}
+          </div>
+          <div className="text-center">{firebase?.currentUser?.email}</div>
+        </div>
+
         <Floating_Control_Label
           id="username"
           label="Username"
@@ -56,7 +113,8 @@ function ProfileActions() {
           variant="primary"
           disabled={
             firebase?.currentUser?.email == email &&
-            firebase?.currentUser?.displayName == username
+            firebase?.currentUser?.displayName == username &&
+            !pfpFile
           }
         >
           Update{" "}

diff --git a/src/components/Chatting_Screen/Chat/Chat.jsx b/src/components/Chatting_Screen/Chat/Chat.jsx
@@ -3,12 +3,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import { Button, Stack } from "react-bootstrap";
 import user_svg from "../../../assets/user.svg";
+import { CasualTime } from "./Files/jsx/ImageFile";
 function Chat({ msg, index, _delete }) {
   console.log(msg);
   return (
-    <div className="w-100">
-      <div className="d-flex">
-        <div>
+    <div className="w-100 d-flex justify-content-end">
+      <div className="d-flex ">
+        <div className="d-center actions">
           <Button
             className="delete"
             onClick={() => {
@@ -18,28 +19,33 @@ function Chat({ msg, index, _delete }) {
             <FontAwesomeIcon icon={faTrash} />
           </Button>
         </div>
-        <Stack
-          direction="horizontal"
-          gap={2}
-          className="justify-content-evenly w-100"
-        >
-          <p>
-            {msg.message.split("\n").map((msg) => (
-              <div>{msg}</div>
-            ))}
-          </p>
-        </Stack>
-        <Stack className="user-select-none">
-          <p>{msg.senderName}</p>
-          <p>{msg.sender}</p>
-          <p>{new Date(msg.time).toLocaleTimeString()}</p>
-          <div className="text-nowrap">{msg.key}</div>
-        </Stack>
-        <Stack>
-          <div>
-            <img src={msg.senderPhoto||user_svg} width={"50px"} height={"50px"} className="rounded-circle bg-glass" />
+        <div className="d-flex flex-column align-items-end bg-glass border border-3 border-glass rounded-3 p-2">
+          <div className="d-flex flex-column msg-body">
+            <p className="w-100 min-w-px-40">
+              {msg.message.split("\n").map((msg, index) => (
+                <div key={index}>{msg}</div>
+              ))}
+              <div className="text-nowrap opacity-50 font-px-8">{msg.key}</div>
+            </p>
+            <div className="sender-text">
+              <div>{msg.senderName}</div>
+              <div className="text-nowrap d-none">{msg.sender}</div>
+            </div>
           </div>
-        </Stack>
+
+          <div className="time text-end">
+            <CasualTime time={msg.time} />
+          </div>
+        </div>
+        <div className="user-select-none sender-cont d-flex align-items-end p-2">
+          <img
+            src={msg.senderPhoto || user_svg}
+            width={"30px"}
+            height={"30px"}
+            className="rounded-circle bg-glass"
+            alt="Sender"
+          />
+        </div>
       </div>
     </div>
   );