Matches page improvements

frontend/src/api/users.ts

@@ -97,7 +97,7 @@ export const UsersService = {
     return useQuery<ProjectedUser[], Error>({
       queryKey: ["UsersService.getMatches"],
       queryFn: () => axios.get("/match/all").then((res) => res.data),
-      staleTime: Infinity,
+      staleTime: 60e3,
     });
   },
 };

frontend/src/assets/RiMatchLogo.tsx

@@ -6,24 +6,25 @@ const RiMatchLogo = () => {
       viewBox="0 0 41 39"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className=""
     >
       <path
-        className="dark:fill-white"
+        className="fill-red-500"
         d="M8.63077 14.8549C8.82584 14.8549 9.01902 14.8165 9.19926 14.7418C9.37949 14.6672 9.54324 14.5578 9.68119 14.4198C9.81914 14.2819 9.92858 14.1182 10.0032 13.9379C10.0779 13.7577 10.1163 13.5645 10.1163 13.3695C10.1163 10.6116 11.2119 7.9667 13.162 6.0166C15.112 4.0665 17.757 2.97094 20.5148 2.97094C23.2727 2.97094 25.9176 4.0665 27.8677 6.0166C29.8178 7.9667 30.9134 10.6116 30.9134 13.3695C30.9172 13.7609 31.0754 14.1349 31.3537 14.4103C31.6317 14.6857 32.0074 14.8402 32.3989 14.8402C32.7903 14.8402 33.1659 14.6857 33.444 14.4103C33.7222 14.1349 33.8804 13.7609 33.8843 13.3695C33.8843 11.6138 33.5385 9.87525 32.8666 8.25319C32.1947 6.63113 31.21 5.15729 29.9685 3.91582C28.7269 2.67435 27.2531 1.68956 25.6311 1.01769C24.009 0.345811 22.2706 0 20.5148 0C18.7591 0 17.0207 0.345811 15.3985 1.01769C13.7765 1.68956 12.3027 2.67435 11.0612 3.91582C9.81972 5.15729 8.83494 6.63113 8.16305 8.25319C7.49118 9.87525 7.14537 11.6138 7.14537 13.3695C7.14537 13.7634 7.30187 14.1412 7.58043 14.4198C7.859 14.6984 8.23682 14.8549 8.63077 14.8549Z"
         fill="#1A1E2C"
       />
       <path
-        className="dark:fill-white"
+        className="fill-red-500"
         d="M39.5293 17.8258H26.452C27.4202 16.5421 27.9432 14.9775 27.9415 13.3695C27.9415 11.3996 27.1589 9.51035 25.7661 8.11742C24.3731 6.72449 22.4838 5.94196 20.5139 5.94196C18.5442 5.94196 16.655 6.72449 15.262 8.11742C13.869 9.51035 13.0865 11.3996 13.0865 13.3695C13.0865 13.7635 13.243 14.1413 13.5216 14.4199C13.8002 14.6985 14.1781 14.855 14.5721 14.855C14.9661 14.855 15.344 14.6985 15.6225 14.4199C15.9011 14.1413 16.0576 13.7635 16.0576 13.3695C16.0576 12.488 16.3189 11.6264 16.8086 10.8935C17.2983 10.1606 17.9943 9.58942 18.8086 9.25209C19.6229 8.91477 20.519 8.8265 21.3834 8.99844C22.2479 9.17038 23.0421 9.59481 23.6652 10.218C24.2885 10.8413 24.713 11.6354 24.885 12.4998C25.0569 13.3643 24.9687 14.2604 24.6314 15.0746C24.294 15.889 23.7229 16.5851 22.99 17.0748C22.2571 17.5645 21.3955 17.8258 20.5141 17.8258H1.50039C1.30407 17.8239 1.1093 17.8608 0.927353 17.9347C0.745405 18.0084 0.579889 18.1175 0.440367 18.2556C0.300847 18.3938 0.190089 18.5581 0.114504 18.7393C0.0389171 18.9206 0 19.115 0 19.3113C0 19.5075 0.0389171 19.702 0.114504 19.8832C0.190089 20.0644 0.300847 20.2287 0.440367 20.367C0.579889 20.505 0.745405 20.6142 0.927353 20.6879C1.1093 20.7617 1.30407 20.7987 1.50039 20.7967H39.5293C39.9207 20.7929 40.2947 20.6346 40.5701 20.3564C40.8455 20.0784 41 19.7027 41 19.3113C41 18.9198 40.8455 18.5442 40.5701 18.2661C40.2947 17.9879 39.9207 17.8297 39.5293 17.8258Z"
         fill="#0346F2"
       />
       <path
-        className="dark:fill-white"
+        className=" fill-red-500"
         d="M32.3692 23.942C32.1742 23.942 31.981 23.9803 31.8007 24.055C31.6205 24.1296 31.4568 24.239 31.3188 24.377C31.1809 24.5149 31.0714 24.6786 30.9968 24.8589C30.9221 25.0391 30.8837 25.2323 30.8837 25.4274C30.8837 28.1852 29.7881 30.8301 27.838 32.7802C25.888 34.7303 23.243 35.8259 20.4852 35.8259C17.7273 35.8259 15.0824 34.7303 13.1323 32.7802C11.1822 30.8301 10.0866 28.1852 10.0866 25.4274C10.0828 25.036 9.92455 24.6619 9.64634 24.3865C9.36827 24.1111 8.99262 23.9566 8.6011 23.9566C8.20973 23.9566 7.83408 24.1111 7.55601 24.3865C7.2778 24.6619 7.11956 25.036 7.11571 25.4274C7.11571 27.1831 7.46155 28.9216 8.13336 30.5436C8.80532 32.1657 9.79004 33.6395 11.0315 34.881C12.2731 36.1225 13.7469 37.1072 15.3689 37.7791C16.991 38.451 18.7294 38.7968 20.4852 38.7968C22.2409 38.7968 23.9793 38.451 25.6015 37.7791C27.2235 37.1072 28.6973 36.1225 29.9388 34.881C31.1803 33.6395 32.1651 32.1657 32.8369 30.5436C33.5088 28.9216 33.8546 27.1831 33.8546 25.4274C33.8546 25.0334 33.6981 24.6556 33.4196 24.377C33.141 24.0985 32.7632 23.942 32.3692 23.942Z"
         fill="#1A1E2C"
       />
       <path
-        className="dark:fill-white"
+        className=" fill-red-500"
         d="M1.47071 20.971H14.548C13.5798 22.2547 13.0568 23.8193 13.0585 25.4274C13.0585 27.3973 13.8411 29.2865 15.2339 30.6794C16.6269 32.0723 18.5162 32.8549 20.4861 32.8549C22.4558 32.8549 24.345 32.0723 25.738 30.6794C27.131 29.2865 27.9135 27.3973 27.9135 25.4274C27.9135 25.0334 27.757 24.6555 27.4784 24.3769C27.1998 24.0983 26.8219 23.9418 26.4279 23.9418C26.0339 23.9418 25.656 24.0983 25.3775 24.3769C25.0989 24.6555 24.9424 25.0334 24.9424 25.4274C24.9424 26.3088 24.6811 27.1704 24.1914 27.9033C23.7017 28.6362 23.0057 29.2074 22.1914 29.5447C21.3771 29.882 20.481 29.9703 19.6166 29.7984C18.7521 29.6264 17.9579 29.202 17.3348 28.5788C16.7115 27.9555 16.287 27.1615 16.115 26.297C15.9431 25.4325 16.0313 24.5364 16.3686 23.7222C16.706 22.9078 17.2771 22.2117 18.01 21.722C18.7429 21.2323 19.6045 20.971 20.4859 20.971H39.4996C39.6959 20.9729 39.8907 20.936 40.0726 20.8622C40.2546 20.7885 40.4201 20.6793 40.5596 20.5412C40.6992 20.403 40.8099 20.2387 40.8855 20.0575C40.9611 19.8762 41 19.6818 41 19.4855C41 19.2893 40.9611 19.0948 40.8855 18.9136C40.8099 18.7324 40.6992 18.5681 40.5596 18.4299C40.4201 18.2918 40.2546 18.1826 40.0726 18.1089C39.8907 18.0351 39.6959 17.9981 39.4996 18.0001H1.47071C1.07935 18.0039 0.705326 18.1622 0.429928 18.4404C0.15453 18.7184 0 19.0941 0 19.4855C0 19.877 0.15453 20.2526 0.429928 20.5307C0.705326 20.8089 1.07935 20.9672 1.47071 20.971Z"
         fill="#0346F2"
       />

frontend/src/components/MatchCard.tsx

@@ -25,8 +25,8 @@ const MatchCard = () => {
   const user = result.data[0];
 
   return (
-    <div className="flex relative z-1 flex-col justify-center items-center h-5/6 max-h-full">
-      <div className="relative flex flex-col items-center rounded-[25px] border-[1px] border-black-200 h-[580px] sm:h-[600] w-[340px] sm:w-[400px]  sm:mr-24 p-4 bg-[#343030] bg-clip-border border-[#acabab33] shadow-xl shadow-black">
+    <div className="flex justify-center">
+      <div className="relative flex flex-col items-center rounded-[25px] border-[1px] border-black-200 h-[580px] sm:h-[600] w-[340px] sm:w-[24rem] p-4 bg-white dark:bg-[#343030] bg-clip-border border-[#acabab33] shadow-xl shadow-black">
         <div className="relative flex h-72 w-full justify-center rounded-xl bg-cover">
           <div
             className={cx(
@@ -48,11 +48,13 @@ const MatchCard = () => {
           <h4 className="text-4xl font-bold text-navy-700 dark:text-white">
             {`${user.firstName}, ${user.age}`}
           </h4>
-          <p className="text-base font-normal text-gray-200">{user.location}</p>
+          <p className="text-base font-normal dark:text-gray-200">
+            {user.location}
+          </p>
           <div className="flex justify-center items-center mt-4 text-gray-400">
             <p className="flex align-middle text-center">{user.description}</p>
           </div>
-          <div className="flex mt-20 flex-row justify-between w-full">
+          <div className="flex mt-20 flex-row justify-between w-full text-white">
             <button
               className="btn hover:bg-green-600 bg-green-500 transition-color duration-300 sm:ml-4 mb-2 border-green-700 rounded-full w-24 h-24 shadow-md shadow-black"
               onClick={() => acceptMatch.mutate({ userId: user.id })}

frontend/src/components/MatchedUser.tsx

@@ -0,0 +1,23 @@
+import { ProjectedUser } from "@/types/User";
+
+interface MatchedUsersProps {
+  user: ProjectedUser;
+}
+
+const MatchedUser = ({ user }: MatchedUsersProps) => {
+  return (
+    <div className="flex flex-col overflow-hidden relative items-center rounded-lg h-56">
+      <div className="absolute w-full h-full bg-gradient-to-t from-black from-0% to-30%"></div>
+      <img
+        loading="lazy"
+        srcSet={user.profileImageUrl}
+        className="object-cover w-full h-56"
+      />
+      <div className="absolute left-4 bottom-2 text-white font-bold text-sm leading-6 whitespace-nowrap">
+        {user.firstName}, {user.age}
+      </div>
+    </div>
+  );
+};
+
+export default MatchedUser;

frontend/src/components/Navbar.tsx

@@ -13,18 +13,21 @@ const Navbar: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
   return (
-    <nav className="flex bg-[#1E1E1E] items-center relative justify-between  px-5 py-6 w-full border-b border-gray-700">
+    <nav className="flex  items-center relative justify-between  px-5 py-6 w-full border-b border-gray-300 dark:border-gray-700 sm:mb-8">
       <div>
         <RiMatchLogo />
       </div>
       <Link
         to="/"
-        className="text-red-500 text-4xl sm:text-5xl ml-56 flex justify-center font-semibold font-Pacifico"
+        className="text-red-500 text-4xl sm:absolute sm:w-52 sm:left-0 sm:right-0 sm:mr-auto sm:ml-auto sm:text-5xl flex justify-center font-semibold font-Pacifico"
       >
         RiMatch
       </Link>
       <div className="flex gap-3 items-center">
-        <Link to="/matches" className="pr-4 font-bold text-2xl border-r-2">
+        <Link
+          to="/matches"
+          className="hidden md:block pr-4 font-bold text-2xl border-r-2"
+        >
           My matches
         </Link>
         <p className="hidden sm:block">{user.firstName}</p>
@@ -39,23 +42,23 @@ const Navbar: React.FunctionComponent = () => {
           }}
         >
           {isDropdownOpen && (
-            <div className="drop-down w-48 overflow-hidden bg-white rounded-md shadow absolute z-10 top-12 right-3">
+            <div className="drop-down w-48 overflow-hidden text-black bg-white dark:bg-[#3b3a3a] dark:text-white rounded-md shadow absolute z-10 top-12 right-3">
               <ul>
-                <li className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-400">
+                <li className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-200  dark:hover:bg-slate-400">
                   <span>
                     <CogIcon />
                   </span>
                   <span> Profile </span>
                 </li>
-                <li className="px-3  py-3  text-sm font-medium flex items-center space-x-2 hover:bg-slate-400">
+                <li className="px-3  py-3  text-sm font-medium flex items-center space-x-2 hover:bg-slate-200 dark:hover:bg-slate-400">
                   <span>
                     <HeartIcon />
                   </span>
                   <span> Preferences </span>
                 </li>
                 <li
                   onClick={() => logout()}
-                  className="px-3  py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-400"
+                  className="px-3  py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-200  dark:hover:bg-slate-400"
                 >
                   <span>
                     <LogoutIcon />

frontend/src/index.css

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Kalnia&family=Montserrat:wght@300;500&family=Pacifico&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Kalnia&family=Montserrat:wght@300;500&family=Pacifico&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,26 +10,19 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #1E1E1E;
+  color: rgba(24, 24, 24, 0.87);
+  background-color: rgb(243 244 246);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-
-}
-
-@media (prefers-color-scheme: dark) {
-  .drop-down {
-    background-color: #3b3a3a; 
-    color: #ffffff; 
-  }
 }
 @media (prefers-color-scheme: dark) {
-  .drop-down li:hover {
-    background-color: #696464; 
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #1e1e1e;
   }
 }
 #red-to-black {
@@ -38,31 +31,35 @@
   background: radial-gradient(
     farthest-corner at 40px 100px,
     rgba(223, 68, 68, 0.616) 10%,
-    rgb(41, 32, 32) 40%)
-
-} 
-
+    rgb(41, 32, 32) 40%
+  );
+  background-color: #1e1e1e;
+}
 
-html, body, #root {
-  height: 100%; 
+html,
+body,
+#root {
+  height: 100vh;
   margin: 0;
-
+  display: flex;
+  flex-direction: column;
   scroll-behavior: smooth;
+  box-sizing: border-box;
 }
 
 #all {
   font-size: 0; /* remove white space */
   height: 100%;
   white-space: nowrap;
 }
-.hidden1{
+.hidden1 {
   opacity: 0;
   filter: blur(5px);
   transform: translateX(-100%);
   transition: all 1s;
 }
 
-.show{
+.show {
   opacity: 1;
   filter: blur(0);
   transform: translateX(0);
@@ -76,25 +73,24 @@ html, body, #root {
   background: radial-gradient(
     farthest-corner at 40px 100px,
     rgba(223, 68, 68, 0.616) 10%,
-    rgb(41, 32, 32) 40%)
+    rgb(41, 32, 32) 40%
+  );
+  background-color: #1e1e1e;
 }
 
 .page:nth-child(1) {
-
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .page:nth-child(2) {
-
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .page:nth-child(3) {
-
   display: flex;
   align-items: center;
 }

frontend/src/main.tsx

@@ -12,7 +12,7 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Root from "./views/Root.tsx";
 import Preferences from "./views/Preferences.tsx";
-import MyMatches from "./components/MyMatches.tsx";
+import MatchesPage from "./views/MatchesPage.tsx";
 
 const router = createBrowserRouter([
   {
@@ -23,7 +23,7 @@ const router = createBrowserRouter([
       { index: true, element: <MatchCard /> },
       {
         path: "matches",
-        element: <MyMatches />,
+        element: <MatchesPage />,
         errorElement: <ErrorPage />,
       },
     ],

frontend/src/views/LoginForm.tsx

@@ -33,7 +33,7 @@ const LoginForm = () => {
 
   return (
     <div>
-      <div className="h-screen flex" id="red-to-black">
+      <div className="h-screen flex text-white" id="red-to-black">
         <div className="flex w-full justify-center items-center ">
           <Formik
             initialValues={initialValues}

frontend/src/views/MatchesPage.tsx

@@ -0,0 +1,60 @@
+import { UsersService } from "@/api/users";
+import MatchedUser from "@/components/MatchedUser";
+import { CircularProgress } from "@mui/material";
+
+const MatchesPage = () => {
+  const query = UsersService.useGetMatches();
+
+  if (query.isLoading) {
+    return (
+      <MatchHeader>
+        <div className="flex justify-center items-center h-full w-full">
+          <CircularProgress />
+        </div>
+      </MatchHeader>
+    );
+  }
+
+  if (query.isError || !query.isSuccess) {
+    return <div>Error</div>;
+  }
+
+  const matches = query.data;
+
+  return (
+    <MatchHeader>
+      <div className="grid grid-cols-2 sm:grid-cols-3 w-full gap-7 mt-3 lg:max-h-[33rem] lg:overflow-y-auto">
+        {matches.map((user) => (
+          <MatchedUser key={user.id} user={user} />
+        ))}
+      </div>
+    </MatchHeader>
+  );
+};
+
+interface MatchHeaderProps {
+  children: React.ReactNode;
+}
+
+const MatchHeader = ({ children }: MatchHeaderProps) => {
+  return (
+    <div className="flex w-full flex-grow justify-center md:pb-8">
+      <div className="bg-white dark:bg-[#343030] flex w-[40rem] flex-col h-full items-center px-10 py-7 sm:rounded-lg shadow-lg shadow-black">
+        <div className="flex w-full items-start gap-5">
+          <div className="text-black dark:text-red-500 text-4xl font-bold leading-[51px] grow shrink basis-auto">
+            Matches
+          </div>
+        </div>
+        <div className="text-opacity-70 text-black dark:text-white dark:text-opacity-70 w-full mt-4">
+          This is a list of people who matched with you.
+        </div>
+        <div className="flex w-full items-center gap-3 mt-7 mb-3">
+          <div className="bg-gray-200 dark:bg-gray-600 w-full h-px" />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default MatchesPage;