+
@@ -13,3 +27,4 @@ function App() {
}
export default App;
+
\ No newline at end of file
diff --git a/frontend/src/Pages/Chatpage.js b/frontend/src/Pages/Chatpage.js
index 8085a2c..ff6d2ba 100644
--- a/frontend/src/Pages/Chatpage.js
+++ b/frontend/src/Pages/Chatpage.js
@@ -4,18 +4,22 @@ import Chatbox from "../components/Chatbox";
import MyChats from "../components/MyChats";
import SideDrawer from "../components/miscellaneous/SideDrawer";
import { ChatState } from "../Context/ChatProvider";
+import { useLocation } from 'react-router-dom';
const Chatpage = () => {
const [fetchAgain, setFetchAgain] = useState(false);
const { user } = ChatState();
-
+ const location = useLocation();
+ const boxColor = location.state?.boxColor || 'white';
+ console.log(boxColor);
+
return (
- {user && }
-
- {user && }
+ {user && }
+
+ {user && }
{user && (
-
+
)}
diff --git a/frontend/src/Pages/Homepage.js b/frontend/src/Pages/Homepage.js
index 766d0d0..c7c98e0 100644
--- a/frontend/src/Pages/Homepage.js
+++ b/frontend/src/Pages/Homepage.js
@@ -8,13 +8,15 @@ import {
Tabs,
Text,
} from "@chakra-ui/react";
-import { useEffect } from "react";
import { useHistory } from "react-router";
import Login from "../components/Authentication/Login";
import Signup from "../components/Authentication/Signup";
+import { useState, useEffect } from "react";
+import { Button } from "@chakra-ui/react";
function Homepage() {
const history = useHistory();
+ const [boxColor, setBoxColor] = useState("white"); // new state variable
useEffect(() => {
const user = JSON.parse(localStorage.getItem("userInfo"));
@@ -25,31 +27,45 @@ function Homepage() {
return (
-
- Talk-A-Tive
+
+
+ Surmai and Harshit
-
+
- Login
- Sign Up
+ Login
+ Sign Up
-
+
-
+
diff --git a/frontend/src/components/Authentication/Login.js b/frontend/src/components/Authentication/Login.js
index c0d08d5..c433460 100644
--- a/frontend/src/components/Authentication/Login.js
+++ b/frontend/src/components/Authentication/Login.js
@@ -6,8 +6,10 @@ import { useState } from "react";
import axios from "axios";
import { useToast } from "@chakra-ui/react";
import { useHistory } from "react-router-dom";
+import { ChatState } from "../../Context/ChatProvider";
-const Login = () => {
+const Login = ({boxColor}) => {
+ const { setUser } = ChatState();
const [show, setShow] = useState(false);
const handleClick = () => setShow(!show);
const toast = useToast();
@@ -53,9 +55,10 @@ const Login = () => {
isClosable: true,
position: "bottom",
});
+ setUser(data);
localStorage.setItem("userInfo", JSON.stringify(data));
setLoading(false);
- history.push("/chats");
+ history.push('/chats', { boxColor: boxColor });
} catch (error) {
toast({
title: "Error Occured!",
@@ -70,24 +73,26 @@ const Login = () => {
};
return (
-
+
- Email Address
+ Email Address
setEmail(e.target.value)}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
- Password
+ Password
setPassword(e.target.value)}
type={show ? "text" : "password"}
placeholder="Enter password"
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
-
);
};
diff --git a/frontend/src/components/Authentication/Signup.js b/frontend/src/components/Authentication/Signup.js
index f137580..a22f9d0 100644
--- a/frontend/src/components/Authentication/Signup.js
+++ b/frontend/src/components/Authentication/Signup.js
@@ -6,8 +6,12 @@ import { useToast } from "@chakra-ui/toast";
import axios from "axios";
import { useState } from "react";
import { useHistory } from "react-router";
+import { ChatState } from "../../Context/ChatProvider";
-const Signup = () => {
+const Signup = (props) => {
+
+ const { boxColor } = props;
+ const { setUser } = ChatState();
const [show, setShow] = useState(false);
const handleClick = () => setShow(!show);
const toast = useToast();
@@ -68,9 +72,10 @@ const Signup = () => {
isClosable: true,
position: "bottom",
});
+ setUser(data);
localStorage.setItem("userInfo", JSON.stringify(data));
setPicLoading(false);
- history.push("/chats");
+ history.push('/chats', { boxColor: boxColor });
} catch (error) {
toast({
title: "Error Occured!",
@@ -132,27 +137,30 @@ const Signup = () => {
return (
- Name
+ Name
setName(e.target.value)}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
- Email Address
+ Email Address
setEmail(e.target.value)}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
- Password
+ Password
setPassword(e.target.value)}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
- Confirm Password
+ Confirm Password
setConfirmpassword(e.target.value)}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
- Upload your Picture
+ Upload your Picture
postDetails(e.target.files[0])}
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
/>
After deployment
var socket, selectedChatCompare;
-const SingleChat = ({ fetchAgain, setFetchAgain }) => {
+const SingleChat = ({ fetchAgain, setFetchAgain, boxColor }) => {
const [messages, setMessages] = useState([]);
const [loading, setLoading] = useState(false);
const [newMessage, setNewMessage] = useState("");
@@ -171,6 +171,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
d="flex"
justifyContent={{ base: "space-between" }}
alignItems="center"
+ color={boxColor === "black" ? "whatsapp.100" : "black"}
>
{
))}
{
) : (
// to get socket.io on same page
-
+
Click on a user to start chatting
diff --git a/frontend/src/components/miscellaneous/SideDrawer.js b/frontend/src/components/miscellaneous/SideDrawer.js
index f5d3eaa..1b9ddec 100644
--- a/frontend/src/components/miscellaneous/SideDrawer.js
+++ b/frontend/src/components/miscellaneous/SideDrawer.js
@@ -17,7 +17,7 @@ import {
DrawerOverlay,
} from "@chakra-ui/modal";
import { Tooltip } from "@chakra-ui/tooltip";
-import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import { BellIcon, ChevronDownIcon,MoonIcon } from "@chakra-ui/icons";
import { Avatar } from "@chakra-ui/avatar";
import { useHistory } from "react-router-dom";
import { useState } from "react";
@@ -32,12 +32,14 @@ import { getSender } from "../../config/ChatLogics";
import UserListItem from "../userAvatar/UserListItem";
import { ChatState } from "../../Context/ChatProvider";
-function SideDrawer() {
+function SideDrawer({ boxColor}) {
const [search, setSearch] = useState("");
const [searchResult, setSearchResult] = useState([]);
const [loading, setLoading] = useState(false);
const [loadingChat, setLoadingChat] = useState(false);
+ console.log(`${boxColor} is the color passed to SideDrawer`);
+
const {
setSelectedChat,
user,
@@ -80,6 +82,7 @@ function SideDrawer() {
const { data } = await axios.get(`/api/user?search=${search}`, config);
setLoading(false);
+ // console.log(data);
setSearchResult(data);
} catch (error) {
toast({
@@ -125,24 +128,25 @@ function SideDrawer() {
return (
<>
-
-
- Talk-A-Tive
+
+ Surmai and Harshit