Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: dashboard layout #506

Merged
merged 1 commit into from
Oct 18, 2023
Merged

fix: dashboard layout #506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions src/components/Chat/Chat.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,23 @@ const Chat = () => {
return (
<ChatItemsContainer>
<ChatArea name={channel.channelname} />
{channel.messages.map((message, index) =>
message.username === user.username ? (
<ChatMessageSelf key={index} {...message} />
) : (
<ChatMessage key={index} {...message} />
),
)}
<div
style={{
height: "100%",
overflowY: "scroll",
display: "flex",
flexDirection: "column-reverse",
padding: "0 10px",
}}
>
{channel.messages.map((message, index) =>
message.username === user.username ? (
<ChatMessageSelf key={index} {...message} />
) : (
<ChatMessage key={index} {...message} />
),
)}
</div>
<SendMessage />
</ChatItemsContainer>
);
Expand Down
26 changes: 8 additions & 18 deletions src/components/Chat/ChatArea/ChatArea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,14 @@ import { FaPhoneAlt, FaVideo, FaUserCircle } from "react-icons/fa";

const ChatArea = ({ name }) => {
return (
<>
<ChatContainer>
<LeftNav>
{name} / <h6>General</h6>
</LeftNav>
<RightNav>
<li>
<FaVideo />
</li>
<li>
<FaPhoneAlt />
</li>
<li>
<FaUserCircle />
</li>
</RightNav>
</ChatContainer>
</>
<ChatContainer>
<LeftNav> {name} </LeftNav>
<RightNav>
<FaVideo />
<FaPhoneAlt />
<FaUserCircle />
</RightNav>
</ChatContainer>
);
};

Expand Down
43 changes: 20 additions & 23 deletions src/components/Chat/ChatElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const ChatRoutesContainer = styled.div`
align-items: start;
justify-content: space-between;
width: 100%;
max-width: 1500px;
//max-width: 1500px;
`;

export const ChatContainer = styled.div`
Expand All @@ -16,18 +16,19 @@ export const ChatContainer = styled.div`
z-index: 1000;
top: 0;
width: 100%;
border-bottom: 1px solid white;
border-bottom: 1px solid gray;

max-width: 1500px;
//max-width: 1500px;
`;

export const ChatItemsContainer = styled.div`
width: 100%;
height: 100vh;
border: 1px solid gray;

display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 25px;
justify-content: space-between;
border-radius: 10px;
color: #f5f5f5;

Expand All @@ -37,61 +38,57 @@ export const ChatItemsContainer = styled.div`
`;

export const LeftNav = styled.div`
font-size: 28px;
margin-right: 1px;
font-size: 25px;
font-weight: bold;
font-family: "Fire Code", monospace;
display: flex;
align-items: center;
`;
export const RightNav = styled.div`
font-size: 28px;
margin-right: 1px;
width: 15%;
font-size: 20px;
gap: 25px;
display: flex;
list-style: none;
justify-content: space-between;
align-items: center;
`;

export const Chatbox = styled.div`
width: 100%
width: 100%;
display: flex;
flex-direction: row;
`;

export const MessageInputContainer = styled.div`
border-top: 1px solid #ccc;
margin-top: 130px;
border-top: 1px solid gray;
width: 100%;
position: relative;
`;

export const Message = styled.div`
margin-top: 5px;
margin-left: 65px;
width: 100%;
border-radius: 0 0 10px 10px;
outline: none !important;
border-radius: 20px;
width: 80% !important;
background-color: #fff;
background-color: #282828;
position: relative;
display: flex;
flex-wrap: wrap;
`;

export const Input = styled.input`
border: none !important;
border-radius: 20px !important;
border-radius: 0 0 0 10px;
display: block;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
color: #ffffff;
background-color: #414141;
background-clip: padding-box;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
position: relative;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;

&:focus {
outline: none;
Expand Down
22 changes: 16 additions & 6 deletions src/components/Chat/ChatRoute.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,22 @@ const ChatRoute = () => {
<ChatRoutesContainer>
<Sidebar />

<Routes>
{/* <Route index element={<Chat />} /> */}
{chatData.channels.map((channel) => (
<Route key={channel.id} path={channel.id} element={<Chat channelId={channel.id} />} />
))}
</Routes>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "100%",
}}
>
<Routes>
{/* <Route index element={<Chat />} /> */}
{chatData.channels.map((channel) => (
<Route key={channel.id} path={channel.id} element={<Chat channelId={channel.id} />} />
))}
</Routes>
</div>
</ChatRoutesContainer>
);
};
Expand Down
72 changes: 60 additions & 12 deletions src/components/Chat/DummyChat/ChatData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,73 @@ export const chatData = {
{
time: "2023-10-18T10:15:00",
username: "Alice",
image: "avatar-alice.jpg",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hello, everyone! How's it going?",
},
{
time: "2023-10-18T10:20:00",
time: "2023-10-19T10:20:00",
username: "Bob",
image: "avatar-bob.jpg",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-18T10:20:00",
time: "2023-10-21T10:20:00",
username: "kabir0x23",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1692524710620.jpeg",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-22T10:20:00",
username: "insane22",
image: "avatar-bob.jpg",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-18T10:20:00",
time: "2023-10-18T10:15:00",
username: "Alice",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hello, everyone! How's it going?",
},
{
time: "2023-10-19T10:20:00",
username: "Bob",
image: "avatar-bob.jpg",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-21T10:20:00",
username: "kabir0x23",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1692524710620.jpeg",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-22T10:20:00",
username: "insane22",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-18T10:15:00",
username: "Alice",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hello, everyone! How's it going?",
},
{
time: "2023-10-19T10:20:00",
username: "Bob",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-21T10:20:00",
username: "kabir0x23",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1692524710620.jpeg",
message: "Hey, Alice! I'm doing great. How about you?",
},
{
time: "2023-10-22T10:20:00",
username: "insane22",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "Hey, Alice! I'm doing great. How about you?",
},
// Add more messages for the General Chat channel
Expand All @@ -37,15 +85,15 @@ export const chatData = {
id: "2",
messages: [
{
time: "2023-10-18T11:00:00",
time: "2023-10-20T10:20:00",
username: "Charlie",
image: "avatar-charlie.jpg",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1693888811488.png",
message: "I need help with a technical issue.",
},
{
time: "2023-10-18T11:10:00",
username: "David",
image: "avatar-david.jpg",
time: "2023-10-21T10:20:00",
username: "kabir0x23",
image: "https://thecyberhub-assets.s3.ap-south-1.amazonaws.com/thecyberhub-assets/development/user/1692524710620.jpeg",
message: "Sure, Charlie. What's the problem you're facing?",
},
// Add more messages for the Help channel
Expand Down
14 changes: 12 additions & 2 deletions src/components/Chat/DummyChat/ChatMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
import React from "react";
import { MessageContainer, MessageContent, Timestamp, SenderImage } from "./ChatMessageElement";

const ChatMessage = ({ message, image, time, sender }) => {
const ChatMessage = ({ username, message, image, time, sender }) => {
return (
<MessageContainer>
<SenderImage src={image} alt="Sender's Image" />
<MessageContent>
<h4>{username}</h4>

<p>{message}</p>
<Timestamp>Today at {time}</Timestamp>
<Timestamp
style={{
color: "#b1b3b5",
fontSize: "10px",
fontWeight: "bold",
}}
>
{time}
</Timestamp>
</MessageContent>
</MessageContainer>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Chat/DummyChat/ChatMessageElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@ export const MessageContentSelf = styled.div`

export const Timestamp = styled.div`
font-size: 12px;
color: #777;
color: #bdbdbd;
margin-top: 5px;
`;
18 changes: 15 additions & 3 deletions src/components/Chat/DummyChat/ChatMessageSelf.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
import React from "react";
import { MessageContainerSelf, MessageContentSelf, Timestamp, SenderImage } from "./ChatMessageElement";

const ChatMessageSelf = ({ message, image, time, sender }) => {
const ChatMessageSelf = ({ username, message, image, time, sender }) => {
return (
<MessageContainerSelf>
<SenderImage src={image} alt="Sender's Image" />
<SenderImage src={image} alt="" />
<MessageContentSelf>
<h4>{username}</h4>
<p>{message}</p>
<Timestamp>Today at {time}</Timestamp>
<Timestamp
style={{
color: "#dcdcdc",
fontSize: "10px",
fontWeight: "bold",
textAlign: "right",
marginRight: "10px",
marginTop: "5px",
}}
>
{time}
</Timestamp>
</MessageContentSelf>
</MessageContainerSelf>
);
Expand Down
Loading