[update] chats page styles

GuptaEesh · May 8, 2022 · 4efac1f · 4efac1f
1 parent 80b376f
commit 4efac1f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 24 deletions.
diff --git a/src/components/ChatUserDisplay/ChatUserDisplay.jsx b/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>
   );
 };

diff --git a/src/screen/Matches/Matches.jsx b/src/screen/Matches/Matches.jsx
@@ -30,18 +30,12 @@ const Matches = () => {
   }
 
   return (
-    <div>
+    <div className="w-screen min-h-screen flex flex-col items-center">
       {matches &&
         matches.map((match) => {
           const _id = match.participants.filter((id) => id != user?.uid)[0];
           const _user = match.users[_id];
-          return (
-            <ChatUserDisplay
-              user={_user}
-              key={_id}
-
-            />
-          );
+          return <ChatUserDisplay user={_user} key={_id} />;
         })}
     </div>
   );