From ec5541e9eb9d1ef64e2ffe58b63a05a3ece2fc12 Mon Sep 17 00:00:00 2001
From: Stefan Petrov <106827257+stefan-petrov1@users.noreply.github.com>
Date: Sun, 21 Apr 2024 04:42:49 +0300
Subject: [PATCH] Chat WIP
---
client/src/App.tsx | 2 +
client/src/pages/chat/Chat.css | 95 +++++++++++++++++++++++++
client/src/pages/chat/Chat.tsx | 110 +++++++++++++++++++++++++++++
client/src/types/enums/PageEnum.ts | 1 +
4 files changed, 208 insertions(+)
create mode 100644 client/src/pages/chat/Chat.css
create mode 100644 client/src/pages/chat/Chat.tsx
diff --git a/client/src/App.tsx b/client/src/App.tsx
index f344f87..0764025 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,6 +15,7 @@ import AdminTableUsers from './pages/admin/admin-tables/AdminTableUsers';
import Login from './pages/auth/login/Login';
import Logout from './pages/auth/logout/Logout';
import Register from './pages/auth/register/Register';
+import Chat from './pages/chat/Chat';
import ContactUs from './pages/contact-us/ContactUs';
import EventsCreate from './pages/events-create/EventsCreate';
import EventsDetails from './pages/events-details/EventsDetails';
@@ -55,6 +56,7 @@ function App() {
element={
}>
+ } />
} />
} />
diff --git a/client/src/pages/chat/Chat.css b/client/src/pages/chat/Chat.css
new file mode 100644
index 0000000..e4b2138
--- /dev/null
+++ b/client/src/pages/chat/Chat.css
@@ -0,0 +1,95 @@
+.custom-chatter .wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.custom-chatter .main {
+ background-color: #eee;
+ width: 50vw;
+ position: relative;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ padding: 6px 0px 0px 0px;
+ padding: 5rem;
+}
+
+.custom-chatter .scroll {
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+ height: 100%;
+ max-height: 70vh;
+}
+
+.custom-chatter .img1 {
+ border-radius: 50%;
+ background-color: #66bb6a;
+}
+
+.custom-chatter .name {
+ font-size: 12px;
+}
+
+.custom-chatter .msg {
+ background-color: #fff;
+ font-size: 15px;
+ padding: 5px;
+ border-radius: 5px;
+ font-weight: 500;
+ color: #3e3c3c;
+}
+
+.custom-chatter .between {
+ font-size: 8px;
+ font-weight: 500;
+ color: #a09e9e;
+}
+
+.custom-chatter .navbar {
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.custom-chatter .form-control {
+ font-size: 10px;
+ font-weight: 400;
+ width: 230px;
+ height: 30px;
+ border: none;
+}
+
+.custom-chatter .form-control:focus {
+ box-shadow: none;
+ overflow: hidden;
+ border: none;
+}
+
+.custom-chatter .form-control:focus {
+ box-shadow: none !important;
+}
+
+.custom-chatter .icon1 {
+ /* color: #7c4dff !important; */
+ font-size: 18px !important;
+ cursor: pointer;
+ margin: 0 10px;
+}
+
+.custom-chatter .icon2 {
+ /* color: #512da8 !important; */
+ font-size: 18px !important;
+ position: relative;
+ padding: 0px;
+ padding-right: 0.5rem;
+ cursor: pointer;
+}
+
+.custom-chatter .icondiv {
+ border-radius: 50%;
+ width: 15px;
+ height: 15px;
+ padding: 2px;
+ position: relative;
+ bottom: 1px;
+}
diff --git a/client/src/pages/chat/Chat.tsx b/client/src/pages/chat/Chat.tsx
new file mode 100644
index 0000000..6fda65c
--- /dev/null
+++ b/client/src/pages/chat/Chat.tsx
@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom';
+import { PageEnum } from '../../types';
+import './Chat.css';
+
+function Chat() {
+ return (
+
+
Chat With
+
+
+ Sarah Anderson
+
+
+
+
+
+
+
+
![](https://img.icons8.com/color/40/000000/guest-female.png)
+
+
+ {' '}
+
Sarah Anderson
+
+ Hi Dr. Hendrikson, I haven't been falling well for past few
+ days.
+
+
+
+
+
+ {' '}
+
Dr. Hendrikson
+
Let's jump on a video call
+
+
+
![](https://i.imgur.com/HpF4BFG.jpg)
+
+
+
+
+
![](https://img.icons8.com/color/40/000000/guest-female.png)
+
+
+ {' '}
+
Sarah Anderson
+
How often should i take this?
+
+
+
+
+ {' '}
+
Dr. Hendrikson
+
Twice a day, at breakfast and before bed
+
+
+
![](https://i.imgur.com/HpF4BFG.jpg)
+
+
+
+
+
![](https://img.icons8.com/color/40/000000/guest-female.png)
+
+
+ {' '}
+
Sarah Anderson
+
How often should i take this?
+
+
+
+
+
+
+
+ );
+}
+
+export default Chat;
diff --git a/client/src/types/enums/PageEnum.ts b/client/src/types/enums/PageEnum.ts
index fc9873d..6a27023 100644
--- a/client/src/types/enums/PageEnum.ts
+++ b/client/src/types/enums/PageEnum.ts
@@ -10,4 +10,5 @@ export enum PageEnum {
Logout = '/logout',
Profile = '/profile/:userId',
Admin = '/admin',
+ Chat = '/chat',
}