Merge pull request #6 from franze6/Profile-Page

src/css/tailwind.config.js

@@ -20,12 +20,13 @@ module.exports = {
         inter: ['Inter', 'sans-serif'],
       },
       fontSize: {
+        descriptionSize: ['0.75rem', { lineHeight: '1.25' }],
         xxs: ['0.625rem', { lineHeight: '0.75' }],
         xs: ['0.75rem', { lineHeight: '1.5' }],
         sm: ['0.875rem', { lineHeight: '1.5715' }],
         base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
-        validateLg: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }],
+        validateSize: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }],
         xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
         '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],

src/pages/digitalId/ProfileId.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
+import ProfileTable from '../../partials/digitalId/ProfileTable';
+import Image from '../../images/transactions-image-04.svg';
 import ProfileIcon from '../../images/profile-icon.svg';
 import Avatar01 from '../../images/avatar-01.jpg';
 import Avatar02 from '../../images/avatar-02.jpg';
@@ -10,16 +10,184 @@ import Avatar03 from '../../images/avatar-03.jpg';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
+  const [removePanelOpen, setRemovePanelOpen] = useState(false);
+  const [changePanelOpen, setChangePanelOpen] = useState(false);
+  const [toggle, setToggle] = useState(true);
+  const [addPanelOpen, setAddPanelOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState([]);
 
-  const data = {
+  const handleSelectedItems = (selectedItems) => {
+    setSelectedItems([...selectedItems]);
+    if (selectedItems.length > 0) {
+      setButtonPanelOpen(false);
+      setAddPanelOpen(false);
+      setChangePanelOpen(true);
+    }
+    if (removePanelOpen === true) {
+      setChangePanelOpen(false);
+    }
+    if (selectedItems.length === 0) {
+      setRemovePanelOpen(false);
+      setButtonPanelOpen(true);
+      setChangePanelOpen(false);
+    }
+  };
+
+  const openAddPanel = () => {
+    setAddPanelOpen(true);
+    setButtonPanelOpen(false);
+  }
+
+  const cancelAddPanel = () => {
+    setAddPanelOpen(false);
+    setButtonPanelOpen(true);
+  }
+
+  const openRemovePanel = () => {
+    setRemovePanelOpen(true);
+    setChangePanelOpen(false);
+  }
+
+  const applyRemovePanel = () => {
+    setRemovePanelOpen(false);
+    setButtonPanelOpen(true);
+  }
+
+  const userData = [
+    {
       id: '0',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Dominik',
+      property: 'First name',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+    {
+      id: '1',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Lamakani',
+      property: 'Second name',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '2',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.1983',
+      property: 'Birthdate',
+      status: 'Incorrect',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '3',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Male',
+      property: 'Gender',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '4',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'United Kindom',
+      property: 'Residence',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+    {
+      id: '5',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
       image: ProfileIcon,
       value: 'Passport',
       property: 'Document type',
       status: 'Progress',
       transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
       avatars: [Avatar01, Avatar02, Avatar03]
-    };
+    },
+    {
+      id: '6',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'A123B3143',
+      property: 'Document ID',
+      status: 'Incorrect',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '7',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.2012',
+      property: 'Issue date',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '8',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.2032',
+      property: 'Expiry date',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '9',
+      category: 'Social',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '@lamakani',
+      property: 'Telegram',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '10',
+      category: 'Social',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '@lamakani',
+      property: 'Telegram',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+  ]
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -30,27 +198,193 @@ function Profile () {
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
         <main>
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            {/* Page header */}
-            <div className="mb-8">
-              {/* Title */}
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
+          <div className="pl-8 pr-[42px] py-8 w-full max-w-9xl mx-auto">
+            <div className="mx-auto flex flex-col lg:flex-row lg:space-x-8">
+              {/* Page header */}
+              <div>
+                <div>
+                  <ul className="flex flex-wrap -m-1">
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
+                        View All
+                      </button>
+                    </li>
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                        Validated
+                      </button>
+                    </li>
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                        Blockchained
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+                {/* Table */}
+                <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
+              </div>
+              {/* Left sidebar */}
+              <div>
+                {/* Button panel*/}
+                <div className={`${!buttonPanelOpen && "hidden"} ml-2.5`}>
+                  <div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
+                    <button
+                      className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
+                      onClick={openAddPanel}
+                    >
+                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
+                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
+                      </svg>
+                      <span className="ml-1">Add new field</span>
+                    </button>
+                  </div>
+                </div>
+                <div className="ml-2.5">
+                  {/* Add panel */}
+                  <div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
+                    <div className="flex flex-col gap-y-3">
+                      <div>
+                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                        <input id="property" className="form-input w-full" type="text" required />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                        <input id="value" className="form-input w-full" type="text" required />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                        <input id="seed" className="form-input w-full" type="text" required />
+                      </div>
+                    </div>
+                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center border-b border-slate-200">
+                      <span className="block text-sm font-medium">Store data on blockchain</span>
+                      <div className="flex items-center">
+                        <div className="form-switch">
+                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                            <label className="bg-slate-400" htmlFor="switch-1">
+                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    {/* Buttons */}
+                    <div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
+                      <button
+                        className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
+                        onClick={cancelAddPanel}
+                      >
+                        Cansel
+                      </button>
+                      <button
+                        className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
+                        onClick={cancelAddPanel}
+                      >
+                        Send
+                      </button>
+                    </div>
+                  </div>
+                  {/* Remove panel */}
+                  <div className={`${!removePanelOpen && 'hidden'} bg-white p-5 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
+                    <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5">Summary</h2>
+                    <div className="flex flex-col">
+                      {userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
+                        <span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
+                      ))}
+                    </div>
+                    <div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center">
+                      <span className="block text-sm font-medium">On blockchain too</span>
+                      <div className="flex items-center">
+                        <div className="form-switch">
+                          <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                            <label className="bg-slate-400" htmlFor="switch-1">
+                            <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
+                      <button
+                        className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
+                        onClick={applyRemovePanel}
+                        >
+                        <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
+                          <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
+                        </svg>
+                        <span className="ml-2">Apply</span>
+                      </button>
+                    </div>
+                    <div className="flex justify-center">
+                      <span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
+                    </div>
+                  </div>
+                  {/* Details */}
+                  <div className={`${(removePanelOpen || addPanelOpen) || 'hidden'} drop-shadow-lg`}>
+                    {/* Top */}
+                    <div className="bg-white rounded-t-xl px-5 pb-4 text-center">
+                      <div className="mb-3 text-center">
+                        <img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
+                      </div>
+                      <div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
+                      <div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
+                    </div>
+                    {/* Divider */}
+                    <div className="flex justify-between items-center" aria-hidden="true">
+                      <svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
+                      </svg>
+                      <div className="grow w-full h-5 bg-white flex flex-col justify-center">
+                        <div className="h-px w-full border-t border-dashed border-slate-200" />
+                      </div>
+                      <svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
+                      </svg>
+                    </div>
+                    {/* Bottom */}
+                    <div className="bg-white rounded-b-xl p-5 pt-[22px] pb-10 text-sm space-y-3">
+                      <div className="flex justify-between space-x-1">
+                        <span className="italic">Validator:</span>
+                        <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
+                      </div>
+                      <div className="flex justify-between space-x-1">
+                        <span className="italic">Recipient:</span>
+                        <span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
+                      </div>
+                      <div className="flex justify-between space-x-1">
+                        <span className="italic">Transacion::</span>
+                        <span className="font-medium text-slate-700 text-right">145 bytes</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {/* Change panel */}
+                <div className={`${!changePanelOpen && 'hidden'} ml-2.5`}>
+                  <div className="flex flex-col bg-white px-5 pt-5 pb-6 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 gap-y-[8px]">
+                    <button
+                      className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
+                      onClick={openRemovePanel}
+                      >
+                      <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
+                        <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
+                      </svg>
+                      <span className="ml-2">Remove</span>
+                    </button>
+                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
+                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
+                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
+                      </svg>
+                      <span className="ml-2">Update</span>
+                    </button>
+                    <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
+                      <svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
+                        <path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
+                      </svg>
+                      <span className="ml-2">Share</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
-             {/* Table */}
-             <table className="w-[828px]">
-                <tbody className="text-sm">
-                  <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
-                  />
-                </tbody>
-              </table>
           </div>
         </main>
       </div>

src/partials/digitalId/ProfileTable.jsx

@@ -0,0 +1,108 @@
+import React, {useState, useEffect} from 'react';
+import ProfileTableItem from './ProfileTableItem';
+
+function ProfileTable({
+  selectedItems,
+  userData
+}) {
+
+  const [isCheck, setIsCheck] = useState([]);
+
+  useEffect(() => {
+    selectedItems(isCheck);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCheck]);
+
+  const handleClick = e => {
+    const { id, checked } = e.target;
+    setIsCheck([...isCheck, id]);
+    if (!checked) {
+      setIsCheck(isCheck.filter(item => item !== id));
+    }
+  };
+
+  return (
+    <>
+    {/* General */}
+      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
+      <div className="overflow-x-auto w-[828px]">
+        <table className="w-[828px] table-auto w-full">
+          <tbody className="divide-slate-200 divide-y">
+            {userData.filter(data => data.category === 'General')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(data.id)}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+      {/* Nationality */}
+      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
+      <div className="overflow-x-auto w-[828px]">
+        <table className="w-[828px] table-auto w-full">
+          <tbody className="text-sm divide-slate-200 divide-y ">
+            {userData.filter(data => data.category === 'Nationality')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(data.id)}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+      {/* Social */}
+      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
+      <div className="overflow-x-auto w-[828px]">
+        <table className="w-[828px] table-auto w-full">
+          <tbody className="text-sm divide-slate-200 divide-y ">
+            {userData.filter(data => data.category === 'Social')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                    handleClick={handleClick}
+                    isChecked={isCheck.includes(data.id)}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}
+
+export default ProfileTable;

src/partials/digitalId/ProfileTableItem.jsx

@@ -5,7 +5,7 @@ function ProfileTableItem(props) {
 
   return (
     <>
-      <tr className="bg-[#eaf0f6]">
+      <tr className={`${props.status !== 'Progress' || 'bg-[#eaf0f6]'}`}>
         <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
@@ -28,20 +28,20 @@ function ProfileTableItem(props) {
         <td className="py-3 whitespace-nowrap w-px">
           <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
             {(props.status === 'Progress') ? (
-                <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
-                  {props.status}
-                </div>) : 
-              (props.status === 'Stored') ? (
-                <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
-                  {props.status}
-                </div>) :
-              (props.status === 'Completed') ? (
-                <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
-                  {props.status}
-                </div>) : (
-                <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
-                  {props.status}
-                </div>)
+              <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>) : 
+            (props.status === 'Stored') ? (
+              <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>) :
+            (props.status === 'Completed') ? (
+              <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>) : (
+              <div className="bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">
+                {props.status}
+              </div>)
             }
           </div>
         </td>
@@ -89,7 +89,7 @@ function ProfileTableItem(props) {
             </div>
           </td>
       </tr>
-      <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
+      <tr className={`${!descriptionOpen && 'hidden'} ${props.status !== 'Progress' || 'bg-[#eaf0f6]'}` }>
         <td colSpan="10" className="px-12 py-3.5">
           <div className="flex items-center gap-x-5">
             <div>
@@ -122,8 +122,8 @@ function ProfileTableItem(props) {
                           </svg>
                         </div>
                         <h3 className="pl-9 whitespace-nowrap">
-                          <span className="text-validateLg font-bold text-slate-800">Validate by </span>
-                          <a href="" className="font-bold text-validateLg underline text-indigo-500">{data}</a>
+                          <span className="text-validateSize font-bold text-slate-800">Validate by </span>
+                          <a href="" className="font-bold text-validateSize underline text-indigo-500">{data}</a>
                         </h3>
                       </div>
                       <div className="pl-9">