Chat WIP

Gin-n-Tonicc · Apr 21, 2024 · ec5541e · ec5541e
1 parent d58e472
commit ec5541e
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 0 deletions.
diff --git 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={
                     <ProtectedRoute role={RoleEnum.USER} onlyAuth={true} />
                   }>
+                  <Route path={PageEnum.Chat} element={<Chat />} />
                   <Route path={PageEnum.Logout} element={<Logout />} />
                   <Route path={PageEnum.Profile} element={<Profile />} />
                 </Route>

diff --git a/client/src/pages/chat/Chat.css 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
@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom';
+import { PageEnum } from '../../types';
+import './Chat.css';
+
+function Chat() {
+  return (
+    <div className="d-flex flex-column justify-content-center container mt-5 custom-chatter">
+      <h2 className="text-center">Chat With</h2>
+      <Link to={PageEnum.Profile} className="mb-5">
+        <h5 className="text-primary text-center text-decoration-underline">
+          Sarah Anderson
+        </h5>
+      </Link>
+      <div className="wrapper">
+        <div className="main">
+          <div className="px-2 scroll">
+            <div className="d-flex align-items-center">
+              <div className="text-left pr-1">
+                <img
+                  src="https://img.icons8.com/color/40/000000/guest-female.png"
+                  width={30}
+                  className="img1"
+                />
+              </div>
+              <div className="pr-2 pl-1">
+                {' '}
+                <span className="name">Sarah Anderson</span>
+                <p className="msg">
+                  Hi Dr. Hendrikson, I haven't been falling well for past few
+                  days.
+                </p>
+              </div>
+            </div>
+            <div className="d-flex align-items-center text-right justify-content-end ">
+              <div className="pr-2">
+                {' '}
+                <span className="name">Dr. Hendrikson</span>
+                <p className="msg">Let's jump on a video call</p>
+              </div>
+              <div>
+                <img
+                  src="https://i.imgur.com/HpF4BFG.jpg"
+                  width={30}
+                  className="img1"
+                />
+              </div>
+            </div>
+            <div className="d-flex align-items-center">
+              <div className="text-left pr-1">
+                <img
+                  src="https://img.icons8.com/color/40/000000/guest-female.png"
+                  width={30}
+                  className="img1"
+                />
+              </div>
+              <div className="pr-2 pl-1">
+                {' '}
+                <span className="name">Sarah Anderson</span>
+                <p className="msg">How often should i take this?</p>
+              </div>
+            </div>
+            <div className="d-flex align-items-center text-right justify-content-end ">
+              <div className="pr-2">
+                {' '}
+                <span className="name">Dr. Hendrikson</span>
+                <p className="msg">Twice a day, at breakfast and before bed</p>
+              </div>
+              <div>
+                <img
+                  src="https://i.imgur.com/HpF4BFG.jpg"
+                  width={30}
+                  className="img1"
+                />
+              </div>
+            </div>
+            <div className="d-flex align-items-center">
+              <div className="text-left pr-1">
+                <img
+                  src="https://img.icons8.com/color/40/000000/guest-female.png"
+                  width={30}
+                  className="img1"
+                />
+              </div>
+              <div className="pr-2 pl-1">
+                {' '}
+                <span className="name">Sarah Anderson</span>
+                <p className="msg">How often should i take this?</p>
+              </div>
+            </div>
+          </div>
+          <nav className="navbar bg-white navbar-expand-sm d-flex justify-content-between">
+            {' '}
+            <input
+              type="text number"
+              name="text"
+              className="form-control"
+              placeholder="Type a message..."
+            />
+            <div className="icondiv d-flex justify-content-end align-content-center text-center ml-2">
+              {' '}
+              <i className="fa fa-arrow-circle-right icon2 text-primary" />{' '}
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Chat;
diff --git 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',
 }