Skip to content

Commit eb0a136

Browse files
author
Manav Gupta
committed
fix: logout button
1 parent e04c5af commit eb0a136

File tree

9 files changed

+46
-25
lines changed

9 files changed

+46
-25
lines changed

‎frontend/src/components/Chat.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const Chat = () => {
9494
return (
9595
<ApolloProvider client={client}>
9696
<ChakraProvider>
97-
<div className="flex bg-[#000000e3]">
97+
<div className="flex bg-black">
9898
{chatComp}
9999
<Chatsidebar
100100
myProfile={myInfo}

‎frontend/src/components/ChatBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const ChatBox = ({
8888
<UserCardLoading />
8989
</div>
9090
) : error ? (
91-
<p className="text-sm text-center font-bold text-red-500 my-2">
91+
<p className="text-sm rounded-t-3xl text-center font-bold text-red-500 py-4 bg-white">
9292
Oops something isn't right
9393
</p>
9494
) : (

‎frontend/src/components/ChatHeader.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ export const ChatHeader = ({
99
description: string;
1010
avatar?: string;
1111
}) => {
12+
const avatarSrc = avatar ? avatar : "https://github.com/shadcn.png";
1213
return (
1314
<div className="rounded-t-3xl py-2 px-4 flex gap-4 items-center bg-white">
1415
<Avatar className="w-11 h-11">
15-
<AvatarImage src="https://github.com/shadcn.png" />
16+
<AvatarImage src={avatarSrc} />
1617
<AvatarFallback>CN</AvatarFallback>
1718
</Avatar>
18-
<div className="text-[#00000097]">
19+
<div className="text-black">
1920
<p className="font-semibold text-sm line-clamp-1">{name}</p>
2021
<p className="text-xs line-clamp-1">{description}</p>
2122
</div>

‎frontend/src/components/ChatSideBar.tsx

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import { UserCard } from "./User";
1616
import { gql, useQuery } from "@apollo/client";
1717
import { SideBarLoading } from "./SideBarLoading";
18+
import { useNavigate } from "react-router";
1819

1920
export const Chatsidebar = ({
2021
myProfile,
@@ -25,6 +26,8 @@ export const Chatsidebar = ({
2526
onSelectUserChat: (roomId: string) => void;
2627
myProfile: myInfo;
2728
}) => {
29+
const navigate = useNavigate();
30+
2831
const GET_USERS = gql`
2932
query GetAllUsers {
3033
getAllUsers {
@@ -91,16 +94,16 @@ export const Chatsidebar = ({
9194
<Input
9295
placeholder="Search rooms and users"
9396
type="search"
94-
className="bg-[#efefef] mt-2 rounded-xl text-black border-gray-300 placeholder:font-semibold placeholder:text-gray-500"
97+
className="bg-[#efefef] mt-2 rounded-xl border-gray-300 placeholder:font-semibold placeholder:text-black"
9598
/>
96-
<p className="text-gray-500 font-bold text-sm mt-2 px-2">Rooms</p>
99+
<p className="font-bold text-sm mt-2 px-2">Rooms</p>
97100
<ScrollArea className="px-2 mt-2 h-1/3">
98-
<ul className="text-black ">{roomComp}</ul>
101+
<ul>{roomComp}</ul>
99102
</ScrollArea>
100103
<Separator className="mb-2 bg-slate-200" />
101-
<p className="text-gray-500 font-bold text-sm px-2">Users</p>
104+
<p className="font-bold text-sm px-2">Users</p>
102105
<ScrollArea className="px-2 mt-2 h-1/3">
103-
<ul className="text-black ">{userComp}</ul>
106+
<ul>{userComp}</ul>
104107
</ScrollArea>
105108
<Separator className="mb-2 bg-slate-200" />
106109
<div className="py-2 absolute bottom-2 w-11/12 flex items-center justify-between px-2 hover:bg-[#0000000f] rounded-lg cursor-pointer bg-white">
@@ -109,17 +112,30 @@ export const Chatsidebar = ({
109112
<AvatarImage src={myProfile.avatar} />
110113
<AvatarFallback>CN</AvatarFallback>
111114
</Avatar>
112-
<p className="font-semibold text-gray-600">{myProfile.name}</p>
115+
<p className="font-semibold">{myProfile.name}</p>
113116
</div>
114117
<DropdownMenu>
115118
<DropdownMenuTrigger>
116119
<Settings size={18} color="#474747" />
117120
</DropdownMenuTrigger>
118-
<DropdownMenuContent className="text-black bg-white">
121+
<DropdownMenuContent className="bg-white">
119122
<DropdownMenuLabel>My Account</DropdownMenuLabel>
120123
<DropdownMenuSeparator />
121-
<DropdownMenuItem>Profile</DropdownMenuItem>
122-
<DropdownMenuItem>Logout</DropdownMenuItem>
124+
{/* <DropdownMenuItem>Profile</DropdownMenuItem> */}
125+
<DropdownMenuItem
126+
className="cursor-pointer"
127+
onClick={() => {
128+
var Cookies = document.cookie.split(";");
129+
// set past expiry to all cookies
130+
for (var i = 0; i < Cookies.length; i++) {
131+
document.cookie =
132+
Cookies[i] + "=; expires=" + new Date(0).toUTCString();
133+
}
134+
navigate("/");
135+
}}
136+
>
137+
Logout
138+
</DropdownMenuItem>
123139
</DropdownMenuContent>
124140
</DropdownMenu>
125141
</div>

‎frontend/src/components/InvalidChat.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export const InvalidChat = () => {
22
return (
33
<main className="w-[calc(100%-320px)] flex justify-center items-center h-screen">
4-
<div className="max-w-3xl w-full max-h-[450px] h-full bg-[#edededea] mx-2 rounded-3xl relative flex flex-col justify-center">
5-
<p className="text-black text-center font-semibold">
4+
<div className="max-w-3xl w-full max-h-[450px] h-full bg-white mx-2 rounded-3xl relative flex flex-col justify-center">
5+
<p className="text-center font-semibold">
66
You have not selected any chat to start conversation
77
</p>
8-
<p className="text-black text-center font-semibold">
8+
<p className="text-center font-semibold">
99
Select any user or room to start converstaion :)
1010
</p>
1111
</div>

‎frontend/src/components/MessageInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const MessageInput = ({
6565
onChange={onInputChangeHandler}
6666
placeholder="Type your message here ..."
6767
type="text"
68-
className="bg-white text-black pl-10 pr-12 border-gray-300 placeholder:font-semibold placeholder:text-gray-500 rounded-b-3xl py-6"
68+
className="bg-white text-black pl-10 pr-12 border-gray-300 placeholder:font-semibold placeholder:text-black rounded-b-3xl py-6"
6969
/>
7070
<DropdownMenu>
7171
<DropdownMenuTrigger asChild>

‎frontend/src/components/User.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const UserCard = ({
1313
// console.log(roomData);
1414
const name = roomData ? roomData.name : userData.name;
1515
const description = roomData ? roomData.description : userData.email;
16+
const avatar = roomData ? "https://github.com/shadcn.png" : userData.avatar;
1617
return (
1718
<li
1819
onClick={() => {
@@ -25,14 +26,12 @@ export const UserCard = ({
2526
className="flex items-center gap-4 hover:bg-[#0000000f] py-1 px-2 cursor-pointer rounded-md"
2627
>
2728
<Avatar className="w-[38px] h-[38px]">
28-
<AvatarImage src="https://github.com/shadcn.png" />
29+
<AvatarImage src={avatar} />
2930
<AvatarFallback>CN</AvatarFallback>
3031
</Avatar>
3132
<div>
32-
<p className="text-sm font-semibold text-gray-600 line-clamp-1">
33-
{name}
34-
</p>
35-
<p className="text-xs text-gray-500 line-clamp-1">{description}</p>
33+
<p className="text-sm font-semibold text-black line-clamp-1">{name}</p>
34+
<p className="text-xs text-black line-clamp-1">{description}</p>
3635
</div>
3736
</li>
3837
);

‎frontend/src/components/UserChatBox.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,18 +115,23 @@ export const UserChatBox = ({
115115
<UserCardLoading />
116116
</div>
117117
) : error ? (
118-
<p className="text-black">Error :</p>
118+
<p className="text-sm rounded-t-3xl text-center font-bold py-4 bg-white text-red-500">
119+
Oops something isn't right
120+
</p>
119121
) : (
120122
<ChatHeader
121123
name={userData?.getUserData.name}
122124
description={userData?.getUserData.email}
125+
avatar={userData?.getUserData.avatar}
123126
/>
124127
)}
125128
<Separator className="bg-gray-300" />
126129
{loading ? (
127130
<MessageLoading />
128131
) : error ? (
129-
<p className="text-black">Error :</p>
132+
<p className="text-sm text-center font-bold text-red-500 mt-4">
133+
Oops something isn't right
134+
</p>
130135
) : (
131136
<MessageContainer
132137
messages={userData?.getUserData.messages}

‎frontend/src/components/UserMessageInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const UserMessageInput = ({
6868
onChange={onInputChangeHandler}
6969
placeholder="Type your message here ..."
7070
type="text"
71-
className="bg-white text-black pl-10 pr-12 border-gray-300 placeholder:font-semibold placeholder:text-gray-500 rounded-b-3xl py-6"
71+
className="bg-white text-black pl-10 pr-12 border-gray-300 placeholder:font-semibold placeholder:text-black rounded-b-3xl py-6"
7272
/>
7373
<DropdownMenu>
7474
<DropdownMenuTrigger asChild>

0 commit comments

Comments
 (0)