Chats Pages

frontend/src/App.js

@@ -1,4 +1,3 @@
-import './App.css';
 import React from 'react';  
 import { BrowserRouter as Router, Routes, Route  } from 'react-router-dom';
 
@@ -11,7 +10,7 @@ import Protected from './components/Protected';
 function App() {
 
   return (
-    <div className="App">
+    <div>
       <Router>
         <Routes>
           <Route path="/login" element={<Login/>} />

frontend/src/components/Chats/Chats.js

@@ -1,23 +1,21 @@
-import React from 'react'
-import { useState, useEffect } from 'react';
-import { signOut } from 'firebase/auth';
-import { auth } from '../../firebase';
-
+import React, { useState, useEffect } from "react";
+import { signOut } from "firebase/auth";
+import { auth } from "../../firebase";
 
 function Chats(props) {
-
   const [userName, setUserName] = useState("");
+  const [showList, setShowList] = useState(true);
+  const [showVoice, setShowVoice] = useState(false);
 
-  useEffect(()=>{
-    setUserName(localStorage.getItem("userName"));  
-  },[userName]);
-
-  const handleSignout = () => {
+  useEffect(() => {
+    setUserName(localStorage.getItem("userName"));
+  }, []);
 
+  const handleSignout = () => {
     localStorage.removeItem("token");
     localStorage.removeItem("userName");
     window.location.reload();
-    
+
     signOut(auth)
       .then(() => {
         console.log("Signout successful");
@@ -27,14 +25,52 @@ function Chats(props) {
       });
   };
 
+  const toggleList = () => {
+    setShowList(!showList);
+  };
+
+  const toggleVoice = () => {
+    setShowVoice(!showVoice);
+  };
+
   return (
-    <div>
-        <h2>
-          {userName ? `Welcome - ${userName}` : "Please Login"}
-        </h2>    
-        <button onClick={handleSignout}>Logout</button>
+    <div className="h-screen">
+      <div className="w-full px-14 py-1 bg-slate-400">
+        <div className="flex gap-1">
+          <div className="flex-none px-10 max-h-max bg-slate-50 rounded-sm py-2 items-center">
+            <h1>Chatbot</h1>
+          </div>
+          <div className="flex-grow max-h-max bg-slate-50 rounded-sm py-2">
+            <button onClick={handleSignout}>Logout</button>
+          </div>
+          <div className="flex w-auto pl-8 py-1 max-h-max bg-slate-50 rounded-sm items-center">
+            <h2>{userName ? `Welcome - ${userName}` : "Please Login"}</h2>
+            <div className="w-6 h-6 rounded-[50%] border-[1px] mx-2 border-black"></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full h-[93vh] bg-green-400 flex">
+        <div className={`w-${showList ? '1/5' : '0'} border-2 transition-all duration-500 overflow-hidden`}>
+          <div className="border-b-2 pb-2">
+            {showList && <button onClick={toggleList}>Toggle List</button>}
+            List
+          </div>
+        </div>
+
+        <div className="w-full border-2">
+          <h1>Main Content</h1>
+          <button onClick={toggleList}>Toggle List</button>
+          <button onClick={toggleVoice}>Toggle Voice</button>
+        </div>
+
+        <div className={`w-${showVoice ? '1/5' : '0'} md:block border-2 transition-all duration-500 overflow-hidden`}>
+          {showVoice && <button onClick={toggleVoice}>Toggle Voice</button>}
+          Voice
+        </div>
       </div>
-  )
+    </div>
+  );
 }
 
-export default Chats
+export default Chats;

frontend/src/components/Signup/Signup.js

@@ -21,7 +21,7 @@ function Signup() {
     if (token) {
       navigate("/");
     }
-  }, []);
+  });
 
   const [errorMsg, setErrorMsg] = useState("");
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);

frontend/src/index.css

@@ -1,15 +1,46 @@
-body {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: #ff0000;
+  --color-secondary: #00ff00;
+  --color-tertiary: #0000ff;
+  --color-text: #000000;
+  --color-background: #ffffff;
+  --color-border: #000000;
+  --color-link: #0000ff;
+  --color-link-hover: #ff0000;
+  --color-link-visited: #800080;
+  --color-link-active: #00ff00;
+  --color-link-focus: #ffff00;
+  --color-link-disabled: #808080;
+  --color-link-text: #ffffff;
+  --color-link-text-hover: #ffffff;
+  --color-link-text-visited: #ffffff;
+  --color-link-text-active: #ffffff;
 
-/* code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-} */
+  --blue-gradient: linear-gradient(
+    144.39deg,
+    #def9fa 0.89%,
+    #bef3f5 17.23%,
+    #9dedf0 42.04%,
+    #7de7eb 55.12%,
+    #5ce1e6 71.54%,
+    #33bbcf 100%
+  );
+
+  --red-gradient: linear-gradient(
+    144.39deg,
+    #f9d3d3 0.89%,
+    #f5b7b7 17.23%,
+    #f09b9b 42.04%,
+    #eb7f7f 55.12%,
+    #e66363 71.54%,
+    #cf3333 100%
+  );
+  --card-shadow: 0px 20px 100px -10px rgba(225, 229, 248, 0.1);
+  --card-shadow1: 0px 0px 10px 2px rgba(0, 229, 255, 0.129);
+
+
+}

frontend/src/index.js

@@ -11,7 +11,4 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

frontend/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["./src/**/*.{js,jsx,ts,tsx}",],
   theme: {
     extend: {},
   },