[update] CSS styles of entire website

src/App.css

@@ -1,41 +0,0 @@
-.App {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,11 +1,9 @@
 import { Route, Routes } from "react-router-dom";
-import "./App.css";
 import { Footer, NavBar } from "./components";
 import { RedirectsAuth, RequiresAuth } from "./router";
 import {
   Home,
   Explore,
-  Settings,
   MatchProfile,
   Chat,
   Matches,
@@ -14,7 +12,7 @@ import {
 
 function App() {
   return (
-    <div className="App">
+    <div className="overflow-x-hidden">
       <NavBar />
       <Routes>
         {/* Public Routes */}
@@ -31,7 +29,6 @@ function App() {
           <Route path="/explore/:id" element={<MatchProfile />} />
           <Route path="/chat/:id" element={<Chat />} />
           <Route path="/matches" element={<Matches />} />
-          <Route path="/settings" element={<Settings />} />
         </Route>
       </Routes>
       <Footer />

src/components/ChatUserDisplay/ChatUserDisplay.jsx

@@ -9,7 +9,7 @@ const ChatUserDisplay = ({
     <div className=" rounded m-4 flex flex-col w-[90%] shadow-lg py-4 px-5  bg-white">
       <div className="flex items-start justify-between">
         <div className="flex items-center mb-4 lg:mb-0 mr-10">
-          <div className="w-14 h-14 bg-cover rounded-md mr-3">
+          <div className="w-20 h-20 bg-cover rounded-md mr-3">
             <img
               src={userImg}
               alt={userName}
@@ -18,29 +18,24 @@ const ChatUserDisplay = ({
             />
           </div>
           <div>
-            <p className="text-sm font-bold leading-4 text-gray-800">
+            <p className="text-xl font-bold leading-4 text-gray-800">
               {userName}
             </p>
-            <p
-              className="text-xs leading-3 text-gray-500 
-                                 pt-2"
-            >
+            <p className="text-base leading-3 text-gray-500 pt-2">
               {designation}
             </p>
           </div>
         </div>
         <div className="flex items-end justify-center">
-        <Link
-          to={`/chat/${id}`}
-          state={{ user2: user }}
-          className=" text-xs font-medium leading-3 text-white py-3 px-4 rounded bg-indigo-700 focus:outline-none hover:opacity-90"
-        >
-          Open Chat
-        </Link>
-      </div>
+          <Link
+            to={`/chat/${id}`}
+            state={{ user2: user }}
+            className="rounded-md flex space-x-2 w-40 h-10 font-normal text-md leading-3 text-white bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-700 hover:bg-indigo-700 duration-150 justify-center items-center"
+          >
+            Open Chat
+          </Link>
+        </div>
       </div>
-
-
     </div>
   );
 };

src/components/Footer/Footer.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 const Footer = () => {
   return (
-    <div className="pt-12">
+    <div className="">
       <footer id="footer" className="relative z-50 dark:bg-gray-900 ">
         <div className="py-16 flex flex-col justify-center items-center">
           <div className=" flex space-x-3 items-center">
@@ -15,7 +15,7 @@ const Footer = () => {
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M1 17H0H1ZM7 17H6H7ZM17 27V28V27ZM27 17H28H27ZM17 0C12.4913 0 8.1673 1.79107 4.97918 4.97918L6.3934 6.3934C9.20644 3.58035 13.0218 2 17 2V0ZM4.97918 4.97918C1.79107 8.1673 0 12.4913 0 17H2C2 13.0218 3.58035 9.20644 6.3934 6.3934L4.97918 4.97918ZM0 17C0 21.5087 1.79107 25.8327 4.97918 29.0208L6.3934 27.6066C3.58035 24.7936 2 20.9782 2 17H0ZM4.97918 29.0208C8.1673 32.2089 12.4913 34 17 34sV32C13.0218 32 9.20644 30.4196 6.3934 27.6066L4.97918 29.0208ZM17 34C21.5087 34 25.8327 32.2089 29.0208 29.0208L27.6066 27.6066C24.7936 30.4196 20.9782 32 17 32V34ZM29.0208 29.0208C32.2089 25.8327 34 21.5087 34 17H32C32 20.9782 30.4196 24.7936 27.6066 27.6066L29.0208 29.0208ZM34 17C34 12.4913 32.2089 8.1673 29.0208 4.97918L27.6066 6.3934C30.4196 9.20644 32 13.0218 32 17H34ZM29.0208 4.97918C25.8327 1.79107 21.5087 0 17 0V2C20.9782 2 24.7936 3.58035 27.6066 6.3934L29.0208 4.97918ZM17 6C14.0826 6 11.2847 7.15893 9.22183 9.22183L10.636 10.636C12.3239 8.94821 14.6131 8 17 8V6ZM9.22183 9.22183C7.15893 11.2847 6 14.0826 6 17H8C8 14.6131 8.94821 12.3239 10.636 10.636L9.22183 9.22183ZM6 17C6 19.9174 7.15893 22.7153 9.22183 24.7782L10.636 23.364C8.94821 21.6761 8 19.3869 8 17H6ZM9.22183 24.7782C11.2847 26.8411 14.0826 28 17 28V26C14.6131 26 12.3239 25.0518 10.636 23.364L9.22183 24.7782ZM17 28C19.9174 28 22.7153 26.8411 24.7782 24.7782L23.364 23.364C21.6761 25.0518 19.3869 26 17 26V28ZM24.7782 24.7782C26.8411 22.7153 28 19.9174 28 17H26C26 19.3869 25.0518 21.6761 23.364 23.364L24.7782 24.7782ZM28 17C28 14.0826 26.8411 11.2847 24.7782 9.22183L23.364 10.636C25.0518 12.3239 26 14.6131 26 17H28ZM24.7782 9.22183C22.7153 7.15893 19.9174 6 17 6V8C19.3869 8 21.6761 8.94821 23.364 10.636L24.7782 9.22183ZM10.3753 8.21913C6.86634 11.0263 4.86605 14.4281 4.50411 18.4095C4.14549 22.3543 5.40799 26.7295 8.13176 31.4961L9.86824 30.5039C7.25868 25.9371 6.18785 21.9791 6.49589 18.5905C6.80061 15.2386 8.46699 12.307 11.6247 9.78087L10.3753 8.21913ZM23.6247 25.7809C27.1294 22.9771 29.1332 19.6127 29.4958 15.6632C29.8549 11.7516 28.5904 7.41119 25.8682 2.64741L24.1318 3.63969C26.7429 8.20923 27.8117 12.1304 27.5042 15.4803C27.2001 18.7924 25.5372 21.6896 22.3753 24.2191L23.6247 25.7809Z"
+                d="M1 17H0H1ZM7 17H6H7ZM17 27V28V27ZM27 17H28H27ZM17 0C12.4913 0 8.1673 1.79107 4.97918 4.97918L6.3934 6.3934C9.20644 3.58035 13.0218 2 17 2V0ZM4.97918 4.97918C1.79107 8.1673 0 12.4913 0 17H2C2 13.0218 3.58035 9.20644 6.3934 6.3934L4.97918 4.97918ZM0 17C0 21.5087 1.79107 25.8327 4.97918 29.0208L6.3934 27.6066C3.58035 24.7936 2 20.9782 2 17H0ZM4.97918 29.0208C8.1673 32.2089 12.4913 34 17 34V32C13.0218 32 9.20644 30.4196 6.3934 27.6066L4.97918 29.0208ZM17 34C21.5087 34 25.8327 32.2089 29.0208 29.0208L27.6066 27.6066C24.7936 30.4196 20.9782 32 17 32V34ZM29.0208 29.0208C32.2089 25.8327 34 21.5087 34 17H32C32 20.9782 30.4196 24.7936 27.6066 27.6066L29.0208 29.0208ZM34 17C34 12.4913 32.2089 8.1673 29.0208 4.97918L27.6066 6.3934C30.4196 9.20644 32 13.0218 32 17H34ZM29.0208 4.97918C25.8327 1.79107 21.5087 0 17 0V2C20.9782 2 24.7936 3.58035 27.6066 6.3934L29.0208 4.97918ZM17 6C14.0826 6 11.2847 7.15893 9.22183 9.22183L10.636 10.636C12.3239 8.94821 14.6131 8 17 8V6ZM9.22183 9.22183C7.15893 11.2847 6 14.0826 6 17H8C8 14.6131 8.94821 12.3239 10.636 10.636L9.22183 9.22183ZM6 17C6 19.9174 7.15893 22.7153 9.22183 24.7782L10.636 23.364C8.94821 21.6761 8 19.3869 8 17H6ZM9.22183 24.7782C11.2847 26.8411 14.0826 28 17 28V26C14.6131 26 12.3239 25.0518 10.636 23.364L9.22183 24.7782ZM17 28C19.9174 28 22.7153 26.8411 24.7782 24.7782L23.364 23.364C21.6761 25.0518 19.3869 26 17 26V28ZM24.7782 24.7782C26.8411 22.7153 28 19.9174 28 17H26C26 19.3869 25.0518 21.6761 23.364 23.364L24.7782 24.7782ZM28 17C28 14.0826 26.8411 11.2847 24.7782 9.22183L23.364 10.636C25.0518 12.3239 26 14.6131 26 17H28ZM24.7782 9.22183C22.7153 7.15893 19.9174 6 17 6V8C19.3869 8 21.6761 8.94821 23.364 10.636L24.7782 9.22183ZM10.3753 8.21913C6.86634 11.0263 4.86605 14.4281 4.50411 18.4095C4.14549 22.3543 5.40799 26.7295 8.13176 31.4961L9.86824 30.5039C7.25868 25.9371 6.18785 21.9791 6.49589 18.5905C6.80061 15.2386 8.46699 12.307 11.6247 9.78087L10.3753 8.21913ZM23.6247 25.7809C27.1294 22.9771 29.1332 19.6127 29.4958 15.6632C29.8549 11.7516 28.5904 7.41119 25.8682 2.64741L24.1318 3.63969C26.7429 8.20923 27.8117 12.1304 27.5042 15.4803C27.2001 18.7924 25.5372 21.6896 22.3753 24.2191L23.6247 25.7809Z"
                 fill="#FFFFFF"
               />
             </svg>
@@ -28,7 +28,7 @@ const Footer = () => {
             </Link>
           </div>
           <p className="mt-6 text-xs lg:text-sm leading-none text-gray-900 dark:text-gray-50">
-            2022 RouterBuddies @ All Rights Reserved.
+            2022 RouteBuddies © All Rights Reserved.
           </p>
         </div>
       </footer>

src/components/NavBar/NavBar.jsx

@@ -12,7 +12,6 @@ const NavBar = () => {
   return (
     <div className=" bg-white ">
       <nav className="2xl:container 2xl:mx-auto sm:py-6 sm:px-7 py-5 px-4">
-        {/* For large and Medium-sized Screen */}
         <div className="flex justify-between ">
           <div className=" flex space-x-3 items-center">
             <svg
@@ -45,14 +44,13 @@ const NavBar = () => {
               </Link>
               <Link
                 to="/matches"
-                className="rounded-md flex space-x-2 w-24 h-10 font-normal text-sm leading-3 text-white bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-600 hover:bg-indigo-600 duration-150 justify-center items-center"
+                className="rounded-md flex space-x-2 w-24 h-10 font-normal text-sm leading-3 text-white bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-700 hover:bg-indigo-700 duration-150 justify-center items-center"
               >
                 Chats
               </Link>
               <button
                 onClick={() => logout(dispatch)}
-                className="rounded-md flex space-x-2 w-24 h-10 font-normal text-sm leading-3 text-white bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-600 hover:bg-indigo-600 duration-150 justify-center items-center"
-              >
+                className="rounded-md flex space-x-2 w-24 h-10 font-medium text-md leading-3 text-white bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-700 hover:bg-indigo-700 duration-150 justify-center items-center">
                 Logout
               </button>
             </div>

src/components/ProfileViewer/ProfileViewer.jsx

@@ -1,86 +1,80 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const ProfileViewer = ({
-  id = 'fddf',
-  userImg = 'https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_5.png',
-  userName = 'dummyUser',
-  designation = 'Professional',
-  userStatus = 'New in the city',
-  source = 'Karnal',
-  destination = 'Delhi',
+  id = "fddf",
+  userImg = "https://tuk-cdn.s3.amazonaws.com/assets/components/avatars/a_5.png",
+  userName = "dummyUser",
+  designation = "Professional",
+  source = "Karnal",
+  destination = "Delhi",
 }) => {
   return (
-    <div className=' rounded m-4 flex flex-col w-[90%] shadow-lg py-4 px-5  bg-white'>
-      <div className='flex items-start justify-between'>
-        <div className='flex items-center mb-4 lg:mb-0 mr-10'>
-          <div className='w-14 h-14 bg-cover rounded-md mr-3'>
+    <div className=" rounded m-4 flex flex-col w-[90%] shadow-lg py-4 px-5  bg-white">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center mb-4 lg:mb-0 mr-10">
+          <div className="w-20 h-20 bg-cover rounded-md mr-3">
             <img
               src={userImg}
               alt={userName}
-              referrerPolicy='no-referrer'
-              className='rounded-full h-full w-full overflow-hidden shadow'
+              referrerPolicy="no-referrer"
+              className="rounded-full h-full w-full overflow-hidden shadow"
             />
           </div>
-          <div>
-            <p className='text-sm font-bold leading-4 text-gray-800'>
+          <div className="ml-2 md:ml-6">
+            <p className="text-xl font-bold leading-4 text-gray-800">
               {userName}
             </p>
-            <p
-              className='text-xs leading-3 text-gray-500 
-                                 pt-2'
-            >
-
+            <p className="text-base leading-3 text-gray-500 pt-2">
               {designation}
             </p>
           </div>
         </div>
-        <p className='pt-4 text-xs leading-4 text-gray-600'>{userStatus}</p>
       </div>
-      <div className='sm:flex items-center justify-between w-full sm:px-24 pt-6'>
-        <div className='sm:block flex w-full items-center'>
-          <div className='sm:w-full w-2 sm:h-2 h-64 bg-gray-100 flex sm:flex-row flex-col items-center justify-between'>
-            <div className='w-4 h-4 bg-gray-800 dark:bg-gray-100 rounded flex items-center justify-center'>
-              <svg
-                className='text-white dark:text-black'
-                xmlns='http://www.w3.org/2000/svg'
-                width={12}
-                height={12}
-                viewBox='0 0 24 24'
-                strokeWidth='1.5'
-                stroke='currentColor'
-                fill='none'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-              >
-                <path stroke='none' d='M0 0h24v24H0z' fill='none' />
-                <path d='M5 12l5 5l10 -10' />
-              </svg>
+      <div className="py-6">
+        <div className="flex items-center justify-center w-full sm:px-24 pb-2">
+          <div className="flex  sm:w-5/6 w-3/4 justify-center items-center">
+            <div className="w-full h-2 bg-gray-100 flex flex-row items-center justify-between">
+              <div className="w-5 h-5 bg-gray-800 dark:bg-gray-100 rounded flex items-center justify-center">
+                <svg
+                  className="text-white dark:text-black"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={16}
+                  height={16}
+                  viewBox="0 0 24 24"
+                  strokeWidth="1.5"
+                  stroke="currentColor"
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M5 12l5 5l10 -10" />
+                </svg>
+              </div>
+              <div className="w-5 h-5 bg-indigo-700 rounded flex items-center justify-center  md:ml-8 lg:ml-20" />
             </div>
-            <div className='w-4 h-4 bg-indigo-700 rounded flex items-center justify-center  md:ml-8 lg:ml-20' />
           </div>
         </div>
-      </div>
-      <div className='m-2 sm:block hidden mx-16'>
-        <div className='flex items-center justify-between'>
-          <div className='flex flex-col items-center'>
-            <p className='text-sm font-medium leading-4 text-indigo-700 '>
-              {source}
-            </p>
-          </div>
-          <div className='flex flex-col items-center pl-10 md:pl-8 lg:pl-20'>
-            <p className='text-sm font-medium leading-4 text-indigo-700'>
-              {destination}
-            </p>
+        <div className="m-2 block w-5/6 sm:w-4/6 lg:w-3/4 mx-auto">
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col items-center">
+              <p className="text-lg font-medium leading-4 text-indigo-700 ">
+                {source}
+              </p>
+            </div>
+            <div className="flex flex-col items-center pl-10 md:pl-8 lg:pl-20">
+              <p className="text-lg font-medium leading-4 text-indigo-700">
+                {destination}
+              </p>
+            </div>
           </div>
         </div>
       </div>
-
-
       <div className="flex items-end justify-center">
         <Link
           to={`/explore/${id}`}
-          className=" text-xs font-medium leading-3 text-white py-3 px-4 rounded bg-indigo-700 focus:outline-none hover:opacity-90"
+          className="rounded-md flex space-x-2 w-40 h-10 font-normal text-md leading-3 text-white bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-700 hover:bg-indigo-700 duration-150 justify-center items-center"
         >
           Open Profile Page
         </Link>

src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}

src/screen/Chat/ChatComponents/ChatPaneComponents/ChatMessage.jsx

@@ -5,7 +5,7 @@ const ChatMessage = ({ message, sender }) => {
   const scrollRef = useRef();
 
   useEffect(() => {
-    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+    scrollRef.current?.scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start' });
   }, [message]);
 
   return (

src/screen/Explore/Explore.jsx

@@ -41,13 +41,12 @@ const Explore = () => {
   }
 
   return (
-    <div className="w-screen flex flex-col items-center ">
+    <div className='w-screen min-h-screen flex flex-col items-center '>
       {userMatches.map((user) => (
         <ProfileViewer
           key={user.uid}
           id={user.uid}
           userName={user.fullName}
-          userStatus={user.description}
           designation={user.profession}
           source={user.routes[0].start}
           destination={user.routes[0].end}