Merge pull request #310 from Alt-Org/jarno/enhancement/131-team-page-enhancement-3

Jarno/enhancement/131-team-page-enhancement-3

Author: leolabdev

frontend-next-migration/src/entities/Member/ui/MemberItem.module.scss

@@ -14,9 +14,13 @@
   }
 
   .taskText {
+    font-weight: lighter;
+    font-size: 80%;
     text-align: left;
     flex: 2;
     min-width: 0;
+    display: flex;
+    align-items: center;
   }
 
   .iconContainer {
@@ -26,6 +30,9 @@
     justify-content: flex-end;
     flex: 1;
     min-width: 0;
+    @media only screen and (min-width: 760px) {
+      padding-right: 2rem;
+    }
   }
 
   .centerContainer {
@@ -44,7 +51,12 @@
     height: clamp(0.5rem, 3vw, 2rem);
     border-radius: 50%;
     overflow: hidden;
-    @include link-scale-effect('icon');
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .memberLogoEnlarged {
+    transform: scale(3);
+    transition: transform 0.3s ease-in-out;
   }
 
   .Logo {

frontend-next-migration/src/entities/Member/ui/MemberItem.tsx

@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { getLinks } from '../api/mappers';
 import { Member } from '../model/types/types';
 import cls from './MemberItem.module.scss';
@@ -14,6 +14,20 @@ interface MemberItemProps {
 }
 
 const MemberItem: FC<MemberItemProps> = ({ member, language }) => {
+    /**
+     * Manage the enlarged mode of the image.
+     * @description When the boolean value is true, image is enlarged.
+     * @type {boolean}
+     * @default false
+     */
+    const [isEnlarged, setIsEnlarged] = useState<boolean>(false);
+    /**
+     * Handles image clicking. Changes the state of the image.
+     */
+    const handleClick = () => {
+        setIsEnlarged(!isEnlarged);
+    };
+
     const linksMap = getLinks();
 
     const logoUrl =
@@ -31,12 +45,15 @@ const MemberItem: FC<MemberItemProps> = ({ member, language }) => {
                     <span className={cls.memberName}>{member.name}</span>
                     <span className={cls.taskText}>{task}</span>
                     <div className={cls.iconContainer}>
-                        <div className={cls.memberLogo}>
+                        <div
+                            className={`${cls.memberLogo} ${isEnlarged ? cls.memberLogoEnlarged : ''}`}
+                        >
                             {logoUrl ? (
                                 <Image
                                     src={logoUrl}
                                     alt={member.name}
                                     className={cls.Logo}
+                                    onClick={handleClick}
                                     width={500}
                                     height={500}
                                 />