Updating the member page style according to the Figma design

Maakaf · Mar 19, 2024 · 65e8f1e · 65e8f1e
1 parent 0de65f9
commit 65e8f1e
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 69 deletions.
diff --git a/app/[locale]/members/page.tsx b/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,66 +9,77 @@ 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 justify-evenly">
+        <p className="text-2xl text-center md:text-right">
           כאן אפשר להכיר את כל המשפחה! וכשתסיימו, בואו לדיסקורד
         </p>
-        <div>
+        <div className="">
           <DiscordLink
             href={LINKS.DISCORD}
-            className="flex-grow-[2] font-inter font-semibold bg-gray-50 text-gray-600 py-2 px-6"
+            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>
@@ -81,19 +92,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>
   );

diff --git a/components/Members/MemberCard/MemberCard.tsx b/components/Members/MemberCard/MemberCard.tsx
@@ -8,6 +8,7 @@ interface MemberCardProps {
   shortDescription: string;
   longDescription: string;
   joinDate: string;
+  isAdmin: boolean;
 }
 
 export const MemberCard = ({
@@ -16,15 +17,17 @@ export const MemberCard = ({
   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>

diff --git a/components/Members/MemberCard/MemberCardInfo.tsx b/components/Members/MemberCard/MemberCardInfo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
 import ImageWithFallback from '@/components/utils/ImageWithFallback';
 
 interface MemberCardInfoProps {
@@ -7,6 +7,24 @@ interface MemberCardInfoProps {
   shortDescription: string;
   longDescription: string;
   joinDate: string;
+  isAdmin: boolean;
+}
+
+function Crown(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 14 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="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 +33,37 @@ export const MemberCardInfo = ({
   shortDescription,
   longDescription,
   joinDate,
+  isAdmin,
 }: MemberCardInfoProps) => {
   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>
   );
 };
diff --git a/components/Members/MemberCard/MemberCardSocialButtons.tsx b/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'}
       />

diff --git a/components/Members/MembersLIst/MembersList.tsx b/components/Members/MembersLIst/MembersList.tsx
@@ -9,20 +9,22 @@ interface MembersListProps {
     shortDescription: string;
     longDescription: string;
     joinDate: string;
+    isAdmin: boolean;
   }>;
 }
 
 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-4/5 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>

diff --git a/components/Members/MembersSearch/MembersSearch.tsx b/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"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19.35 19.35L15 15"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const MembersSearch: React.FC<MembersSearchProps> = ({
+  onSearchInputChange,
+}) => {
+  return (
+    <div className="flex items-center justify-between mx-auto w-4/5">
       <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 mr-0 md:mr-4 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>
   );
-}
+};
diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx
@@ -89,7 +89,7 @@ const FiltersBar: React.FC<FiltersBarProps> = ({
                 <>
                   <div
                     ref={filterRef}
-                    className="z-[101] absolute -bottom-[23.5rem] md:-bottom-[14rem] right-2 px-[34px] py-[27px] rounded-md border border-blue-600 min-w-[400px] md:min-w-0 md:w-[863px] min-h-[260px] md:h-[209px] p-5 bg-gray-50 dark:bg-gray-600"
+                    className="z-[101] absolute -bottom-[23.5rem] md:-bottom-[14rem] right-2 px-[34px] py-[27px] rounded-md border border-blue-600 min-w-[300px] md:min-w-0 md:w-[863px] min-h-[260px] md:h-[209px] p-5 bg-gray-50 dark:bg-gray-600"
                   >
                     <div className="flex flex-col gap-[22px]">
                       <h3 className="text-base font-bold leading-normal">

diff --git a/components/utils/ImageWithFallback.tsx b/components/utils/ImageWithFallback.tsx
@@ -33,7 +33,7 @@ export default function ImageWithFallback({
       alt={alt}
       onError={handleError}
       src={error ? fallback : src}
-      className="image-project-card"
+      className="image-project-card rounded-full"
       {...props}
     />
   );

diff --git a/public/images/avatars/avatar6.jpg b/public/images/avatars/avatar6.jpg
diff --git a/public/images/avatars/avatar7.jpg b/public/images/avatars/avatar7.jpg
diff --git a/public/images/avatars/avatar8.jpg b/public/images/avatars/avatar8.jpg