Updating the member page style according to the Figma design

app/[locale]/members/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import { MembersList } from '@/components/Members/MembersLIst/MembersList';
 import DiscordLink from '@/components/Common/DiscordLink';
@@ -9,70 +9,79 @@ import { useState } from 'react';
 const dummyMembers = [
   {
     id: 1,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "יוסף כהן",
-    shortDescription: "מפתח אינטרנט",
-    longDescription: "מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar.jpg',
+    name: 'יוסף כהן',
+    shortDescription: 'מפתח אינטרנט',
+    longDescription:
+      'מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: true,
   },
   {
     id: 2,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "שרה לוי",
-    shortDescription: "מפתחת אינטרנט",
-    longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar2.jpg',
+    name: 'שרה לוי',
+    shortDescription: 'מפתחת אינטרנט',
+    longDescription:
+      'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: false,
   },
   {
     id: 3,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "דניאל כהן",
-    shortDescription: "מפתח אינטרנט",
-    longDescription: "מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar4.jpg',
+    name: 'דניאל כהן',
+    shortDescription: 'מפתח אינטרנט',
+    longDescription:
+      'מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: false,
   },
   {
     id: 4,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "רבקה כהן",
-    shortDescription: "מפתחת אינטרנט",
-    longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar8.jpg',
+    name: 'רבקה כהן',
+    shortDescription: 'מפתחת אינטרנט',
+    longDescription:
+      'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: false,
   },
   {
     id: 5,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "רבקה כהן",
-    shortDescription: "מפתחת אינטרנט",
-    longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar6.jpg',
+    name: 'רבקה כהן',
+    shortDescription: 'מפתחת אינטרנט',
+    longDescription:
+      'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: false,
   },
   {
     id: 6,
-    imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
-    name: "רבקה כהן",
-    shortDescription: "מפתחת אינטרנט",
-    longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
-    joinDate: "2022-01-01"
+    imgUrl: '/images/avatars/avatar7.jpg',
+    name: 'רבקה כהן',
+    shortDescription: 'מפתחת אינטרנט',
+    longDescription:
+      'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+    joinDate: '2022-01-01',
+    isAdmin: false,
   },
-];  
-
+];
 
 const WelcomeMessage = () => {
   return (
-    <div className="flex flex-col justify-center bg-purple-100 dark:bg-gray-800 mt-16 mb-16 h-20">
-      <div className="flex justify-evenly flex-wrap">
-        <p className="text-2xl">
+    <div className="flex flex-col justify-center bg-purple-100 dark:bg-gray-800 mb-6 mt-2 md:mb-12 py-8 px-4 md:p-4">
+      <div className="flex flex-col md:flex-row md:justify-center gap-2 md:gap-4 mx-auto">
+        <p className="text-2xl text-center">
           כאן אפשר להכיר את כל המשפחה! וכשתסיימו, בואו לדיסקורד
         </p>
-        <div>
-          <DiscordLink
-            href={LINKS.DISCORD}
-            className="flex-grow-[2] font-inter font-semibold bg-gray-50 text-gray-600 py-2 px-6"
-          >
-            ערוץ דיסקורד
-          </DiscordLink>
-        </div>
+        <DiscordLink
+          href={LINKS.DISCORD}
+          className="w-48 mx-auto mt-4 md:mt-0 font-inter font-semibold bg-gray-50 text-gray-600 py-2 px-6"
+        >
+          ערוץ דיסקורד
+        </DiscordLink>
       </div>
     </div>
   );
@@ -81,19 +90,23 @@ const WelcomeMessage = () => {
 const MembersPage: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState<string>('');
 
-  const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setSearchQuery(event.target.value);
   };
 
-  const filteredMembers = dummyMembers.filter(member =>
-    member.name.includes(searchQuery) || member.shortDescription.includes(searchQuery)
+  const filteredMembers = dummyMembers.filter(
+    member =>
+      member.name.includes(searchQuery) ||
+      member.shortDescription.includes(searchQuery)
   );
 
   return (
-    <div>
-      <h1 className='text-center'>Members</h1>
+    <div className="py-6">
+      <h1 className="text-center">Members</h1>
       <WelcomeMessage />
-      <MembersSearch onSearchInputChange={handleSearchInputChange} /> 
+      <MembersSearch onSearchInputChange={handleSearchInputChange} />
       <MembersList members={filteredMembers} />
     </div>
   );

components/Members/MemberCard/MemberCard.tsx

@@ -1,30 +1,25 @@
 import React from 'react';
 import { MemberCardInfo } from './MemberCardInfo';
 import { MemberCardSocialButtons } from './MemberCardSocialButtons';
-
-interface MemberCardProps {
-  imgUrl: string;
-  name: string;
-  shortDescription: string;
-  longDescription: string;
-  joinDate: string;
-}
+import { MemberCardProps } from '../../../types';
 
 export const MemberCard = ({
   imgUrl,
   name,
   shortDescription,
   longDescription,
   joinDate,
+  isAdmin,
 }: MemberCardProps) => {
   return (
-    <div className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-2xl">
+    <div className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-md w-full xl:w-[400px] xl:h-[173px]">
       <MemberCardInfo
         imgUrl={imgUrl}
         name={name}
         shortDescription={shortDescription}
         longDescription={longDescription}
         joinDate={joinDate}
+        isAdmin={isAdmin}
       />
       <MemberCardSocialButtons />
     </div>

components/Members/MemberCard/MemberCardInfo.tsx

@@ -1,12 +1,22 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
 import ImageWithFallback from '@/components/utils/ImageWithFallback';
+import { MemberCardProps } from '../../../types';
 
-interface MemberCardInfoProps {
-  imgUrl: string;
-  name: string;
-  shortDescription: string;
-  longDescription: string;
-  joinDate: string;
+function Crown(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 14 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.50627 0.253069C7.29803 -0.0843556 6.80738 -0.0843565 6.59913 0.253068L4.62678 3.44888L0.705087 2.11843C0.291657 1.97818 -0.105816 2.36723 0.0255619 2.78357L1.54556 7.60046C1.58239 7.71719 1.65204 7.80831 1.7389 7.87123C1.77628 7.97324 1.87424 8.04603 1.9892 8.04603H12.1161C12.2633 8.04603 12.3826 7.92672 12.3826 7.77953V7.74748C12.4127 7.70428 12.4372 7.65518 12.4545 7.60046L13.9745 2.78357C14.1058 2.36723 13.7084 1.97818 13.2949 2.11843L9.46038 3.41932L7.50627 0.253069ZM1.7227 8.71248H12.3826V10.578C12.3826 10.9459 12.0843 11.2442 11.7164 11.2442H2.38895C2.02099 11.2442 1.7227 10.9459 1.7227 10.578V8.71248Z"
+      />
+    </svg>
+  );
 }
 
 export const MemberCardInfo = ({
@@ -15,27 +25,37 @@ export const MemberCardInfo = ({
   shortDescription,
   longDescription,
   joinDate,
-}: MemberCardInfoProps) => {
+  isAdmin,
+}: MemberCardProps) => {
   return (
-    <div className="flex flex-col rounded-md p-1">
+    <div className="flex flex-col rounded-md p-[10px] pr-6 w-full">
       <div className="flex gap-6">
         <ImageWithFallback
-          width="48"
-          height="48"
+          width="50"
+          height="50"
           src={imgUrl}
           alt={name}
           fallback={imgUrl}
         />
 
         <div className="titles-container block">
-          <p className="text-base">{name}</p>
-          <p className="text-sm text-slate-500 dark:text-slate-300">
+          <div className="flex items-center">
+            <p className="text-base ml-4">{name}</p>
+            {isAdmin && (
+              <Crown className="w-4 h-4 fill-[#4338CA] dark:fill-[#DBC927]" />
+            )}
+          </div>
+          <p className="text-[12px] text-slate-500 dark:text-slate-300">
             {shortDescription}
           </p>
         </div>
       </div>
-      <p className="text-sm w-48 h-20 mt-1 mb-1">{longDescription}</p>
-      <p className="text-sm text-slate-500 dark:text-slate-300">{joinDate}</p>
+      <p className="w-full md:w-[291px] h-[51px] text-sm mt-2 mb-1 leading-4">
+        {longDescription}
+      </p>
+      <p className="w-full md:w-[291px] h-[15px] text-[12px] mt-2 text-slate-500 dark:text-slate-300">
+        {joinDate}
+      </p>
     </div>
   );
 };

components/Members/MemberCard/MemberCardSocialButtons.tsx

@@ -6,7 +6,7 @@ import { GithubMemberLink } from './socialIcons/GithubMemberLink';
 
 export const MemberCardSocialButtons = () => {
   return (
-    <div className="flex flex-col w-12 bg-purple-200 justify-evenly dark:bg-gray-800 rounded-tl-2xl rounded-bl-2xl shadow-2xl">
+    <div className="flex flex-col w-[67px] bg-purple-200 justify-evenly dark:bg-gray-800 rounded-tl-2xl rounded-bl-2xl shadow-2xl">
       <LinkedInMemberLink
         linkedInUrl={'https://github.com/Maakaf/maakaf-website'}
       />

components/Members/MemberCard/socialIcons/TwiterMemberLink.tsx

@@ -23,9 +23,8 @@ export const TwitterMemberLink = ({ twitterUrl }: TwitterMemberLinkProps) => {
         >
           <path
             d="M23.0005 0.999314C22.0429 1.67479 20.9826 2.19142 19.8605 2.52931C19.2582 1.83682 18.4578 1.34601 17.5675 1.12324C16.6772 0.900474 15.74 0.956509 14.8826 1.28377C14.0252 1.61102 13.2889 2.19371 12.7735 2.95303C12.258 3.71235 11.9882 4.61165 12.0005 5.52931V6.52931C10.2431 6.57488 8.50176 6.18513 6.9315 5.39476C5.36123 4.60439 4.01081 3.43795 3.00049 1.99931C3.00049 1.99931 -0.999512 10.9993 8.00049 14.9993C5.94102 16.3973 3.48765 17.0982 1.00049 16.9993C10.0005 21.9993 21.0005 16.9993 21.0005 5.49931C20.9996 5.22077 20.9728 4.94291 20.9205 4.66931C21.9411 3.66281 22.6613 2.39203 23.0005 0.999314Z"
-            stroke-width="1.59763"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeWidth="round"
+            strokeLinejoin="round"
           />
         </svg>
       </a>

components/Members/MembersLIst/MembersList.tsx

@@ -1,28 +1,19 @@
 import React from 'react';
 import { MemberCard } from '../MemberCard/MemberCard';
-
-interface MembersListProps {
-  members: Array<{
-    id: number;
-    imgUrl: string;
-    name: string;
-    shortDescription: string;
-    longDescription: string;
-    joinDate: string;
-  }>;
-}
+import { MembersListProps } from '../../../types';
 
 export const MembersList: React.FC<MembersListProps> = ({ members }) => {
   return (
-    <div className='flex mx-auto w-4/5 flex-wrap gap-4 m-6 justify-around'>
-      {members.map((member) => (
+    <div className="flex mx-auto w-[90%] flex-wrap gap-4 mt-6 justify-between">
+      {members.map(member => (
         <MemberCard
           key={member.id}
           imgUrl={member.imgUrl}
           name={member.name}
           shortDescription={member.shortDescription}
           longDescription={member.longDescription}
           joinDate={member.joinDate}
+          isAdmin={member.isAdmin}
         />
       ))}
     </div>

components/Members/MembersSearch/MembersSearch.tsx

@@ -1,14 +1,40 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
 
 interface MembersSearchProps {
   onSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const MembersSearch : React.FC<MembersSearchProps> = ({ onSearchInputChange })=> {
+function Magnifier(props: SVGProps<SVGSVGElement>) {
   return (
-    <div className="flex mx-auto justify-evenly m-6 w-4/5">
+    <svg
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.35 19.35L15 15"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const MembersSearch: React.FC<MembersSearchProps> = ({
+  onSearchInputChange,
+}) => {
+  return (
+    <div className="flex items-center justify-between mx-auto w-[90%] gap-4">
       <select
-        className="bg-purple-100 dark:bg-gray-800 rounded-md"
+        className="hidden md:block h-[45px] bg-purple-100 dark:bg-gray-800 rounded-r-3xl rounded-l-3xl p-2"
         name="activitySelect"
         id="activitySelect"
       >
@@ -17,12 +43,15 @@ export const MembersSearch : React.FC<MembersSearchProps> = ({ onSearchInputChan
         <option value="אופציה 3">אופציה 3</option>
       </select>
 
-      <input
-        type="text"
-        className='w-4/5 pr-4 bg-purple-100 dark:bg-gray-800 rounded-md'
-        placeholder="חפש לפי שם, תפקיד"
-        onChange={onSearchInputChange}
-      />
+      <div className="w-full relative h-[45px]">
+        <input
+          type="text"
+          className="pr-4 top-0 right-0 w-full h-full bg-purple-100 dark:bg-gray-800 rounded-r-3xl rounded-l-3xl"
+          placeholder="חפש לפי שם, תפקיד"
+          onChange={onSearchInputChange}
+        />
+        <Magnifier className="absolute top-4 left-3 w-4 h-4 stroke-black dark:stroke-white" />
+      </div>
     </div>
   );
-}
+};