From 4bdaa28fff32201ccbfb03d983892555e034af69 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 24 May 2022 18:40:13 +0300
Subject: [PATCH 1/8] create profile table item

---
 src/css/tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js
index cb18732..5f9a059 100644
--- a/src/css/tailwind.config.js
+++ b/src/css/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
         inter: ['Inter', 'sans-serif'],
       },
       fontSize: {
+        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' }],

From 7ff6d08fc8310122d3b996606f87cd847d0e0890 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 24 May 2022 18:43:23 +0300
Subject: [PATCH 2/8] create profile table item

---
 src/images/profile-icon.svg                 | 10 +++
 src/pages/digitalId/ProfileId.jsx           | 23 ++++++
 src/partials/digitalId/ProfileTableItem.jsx | 92 +++++++++++++++++++++
 3 files changed, 125 insertions(+)
 create mode 100644 src/images/profile-icon.svg
 create mode 100644 src/partials/digitalId/ProfileTableItem.jsx

diff --git a/src/images/profile-icon.svg b/src/images/profile-icon.svg
new file mode 100644
index 0000000..e9bfe8a
--- /dev/null
+++ b/src/images/profile-icon.svg
@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="18" cy="18" r="18" fill="#E1E1F7"/>
+<rect x="6" y="6" width="24" height="24" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_21_1525" transform="scale(0.0125)"/>
+</pattern>
+<image id="image0_21_1525" width="80" height="80" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index bd1f75a..1155f1b 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -2,10 +2,20 @@ import React, { useState } from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  const data = {
+      id: '0',
+      image: ProfileIcon,
+      value: 'Passport',
+      property: 'Document type',
+      status: 'Stored'
+    };
+
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -24,6 +34,19 @@ function Profile () {
               {/* Title */}
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
             </div>
+             {/* Table */}
+             <table className="table-auto w-full">
+                <tbody className="text-sm divide-y divide-slate-200">
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                  />
+                </tbody>
+              </table>
           </div>
         </main>
 
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
new file mode 100644
index 0000000..c94749a
--- /dev/null
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Avatar01 from '../../images/avatar-01.jpg';
+import Avatar02 from '../../images/avatar-02.jpg';
+import Avatar03 from '../../images/avatar-03.jpg';
+
+function ProfileTableItem(props) {
+  const [descriptionOpen, setDescriptionOpen] = useState(false);
+
+  return (
+    <tr>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <div className="flex items-center">
+          <label className="inline-flex">
+            <span className="sr-only">Select</span>
+            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+          </label>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="flex items-center">
+          <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
+            <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
+          </div>
+          <div className="flex flex-col w-60"> 
+            <div className="font-semibold text-slate-800 text-base">{props.value}</div>
+            <div className="font-normal text-xxs">{props.property}</div>
+          </div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        {(props.status === 'Progress') ? (
+          <div className="m-1.5 w-fit">
+            <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+          </div>) : 
+          (props.status === 'Stored') ? (
+          <div className="m-1.5 w-fit">
+            <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
+          </div>) :
+          (props.status === 'Completed') ? (
+          <div className="m-1.5 w-fit">
+            <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+          </div>) : (
+          <div className="m-1.5 w-fit">
+            <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+          </div>)
+        }
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+        <div className="flex flex-wrap items-center -m-1.5">
+          <div className="flex -space-x-3 -ml-0.5">
+            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
+            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
+            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
+            <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
+                <span className="sr-only">Add avatar</span>
+                <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                  <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+                </svg>
+            </button>
+          </div>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        {/* Menu button */}
+        <div className="flex items-center">
+          <button className="text-slate-400 hover:text-slate-500 rounded-full">
+            <span className="sr-only">Link</span>
+            <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+              <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
+            </svg>
+          </button>
+        </div>
+      </td>
+      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <button
+              className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+              aria-expanded={descriptionOpen}
+              onClick={() => setDescriptionOpen(!descriptionOpen)}
+            >
+              <span className="sr-only">Menu</span>
+              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+              </svg>
+            </button>
+          </div>
+        </td>
+    </tr>
+  );
+}
+
+export default ProfileTableItem;

From 1ab53990a1c4b5e06fd6365dbf15a7394af2769c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 25 May 2022 01:30:58 +0300
Subject: [PATCH 3/8] add input

---
 src/pages/digitalId/ProfileId.jsx           |   4 +-
 src/partials/digitalId/ProfileTableItem.jsx | 165 +++++++++++---------
 2 files changed, 93 insertions(+), 76 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 1155f1b..4100a3f 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -35,8 +35,8 @@ function Profile () {
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
             </div>
              {/* Table */}
-             <table className="table-auto w-full">
-                <tbody className="text-sm divide-y divide-slate-200">
+             <table className="w-[828px]">
+                <tbody className="text-sm">
                   <ProfileTableItem
                     key={data.id}
                     id={data.id}
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index c94749a..3f1ecb0 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -7,85 +7,102 @@ function ProfileTableItem(props) {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
   return (
-    <tr>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        <div className="flex items-center">
-          <label className="inline-flex">
-            <span className="sr-only">Select</span>
-            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
-          </label>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-        <div className="flex items-center">
-          <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
-            <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
-          </div>
-          <div className="flex flex-col w-60"> 
-            <div className="font-semibold text-slate-800 text-base">{props.value}</div>
-            <div className="font-normal text-xxs">{props.property}</div>
-          </div>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        {(props.status === 'Progress') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) : 
-          (props.status === 'Stored') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) :
-          (props.status === 'Completed') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) : (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>)
-        }
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-        <div className="flex flex-wrap items-center -m-1.5">
-          <div className="flex -space-x-3 -ml-0.5">
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
-            <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
-                <span className="sr-only">Add avatar</span>
-                <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
-                  <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
-                </svg>
-            </button>
-          </div>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        {/* Menu button */}
-        <div className="flex items-center">
-          <button className="text-slate-400 hover:text-slate-500 rounded-full">
-            <span className="sr-only">Link</span>
-            <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
-              <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
-            </svg>
-          </button>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+    <>
+      <tr className="bg-[#F8FAFC] mix-blend-multiply">
+        <td className="px-2 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
-            <button
-              className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
-              aria-expanded={descriptionOpen}
-              onClick={() => setDescriptionOpen(!descriptionOpen)}
-            >
-              <span className="sr-only">Menu</span>
-              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
-                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+            <label className="inline-flex">
+              <span className="sr-only">Select</span>
+              <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+            </label>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 w-60 whitespace-nowrap">
+          <div className="flex items-center">
+            <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
+              <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
+            </div>
+            <div className="flex flex-col"> 
+              <div className="font-semibold text-slate-800 text-base">{props.value}</div>
+              <div className="font-normal text-xxs">{props.property}</div>
+            </div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          {(props.status === 'Progress') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) : 
+            (props.status === 'Stored') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) :
+            (props.status === 'Completed') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) : (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>)
+          }
+        </td>
+        <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
+          <div className="flex flex-wrap items-center -m-1.5 justify-center">
+            <div className="flex -space-x-3 -ml-0.5">
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
+              <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
+                  <span className="sr-only">Add avatar</span>
+                  <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                    <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+                  </svg>
+              </button>
+            </div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          {/* Menu button */}
+          <div className="flex items-center">
+            <button className="text-slate-400 hover:text-slate-500 rounded-full">
+              <span className="sr-only">Link</span>
+              <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+                <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
               </svg>
             </button>
           </div>
         </td>
-    </tr>
+        <td className="py-3 whitespace-nowrap w-px">
+            <div className="flex items-center">
+              <button
+                className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+                aria-expanded={descriptionOpen}
+                onClick={() => setDescriptionOpen(!descriptionOpen)}
+                aria-controls={`description-${props.id}`}
+              >
+                <span className="sr-only">Menu</span>
+                <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                  <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+                </svg>
+              </button>
+            </div>
+          </td>
+      </tr>
+      <tr className={`${!descriptionOpen && 'hidden'} bg-[#F8FAFC] mix-blend-multiply` }>
+        <td colSpan="10" className="px-12 py-3.5">
+          <div className="flex items-center gap-x-5">
+            <div>
+              <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
+              <input id="placeholder" className="form-input w-[396px]" type="text" placeholder="2342423423423234223" />
+            </div>
+            <div>
+              <span className="block text-sm font-medium mb-1">Transaction</span>
+              <a href="" className="w-[396px] underline">0x12831823791203192418234841238468</a>
+            </div>
+          </div>
+        </td>
+       </tr>
+   </>
   );
 }
 

From c44516a2f79e117934037526d1deb9548aaf82ad Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 25 May 2022 15:09:00 +0300
Subject: [PATCH 4/8] done validation bar

---
 src/css/tailwind.config.js                  |  1 +
 src/pages/digitalId/ProfileId.jsx           |  2 +-
 src/partials/digitalId/ProfileTableItem.jsx | 89 ++++++++++++++++++---
 3 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js
index 5f9a059..4d79d5f 100644
--- a/src/css/tailwind.config.js
+++ b/src/css/tailwind.config.js
@@ -25,6 +25,7 @@ module.exports = {
         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' }],
         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' }],
diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 4100a3f..1703232 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -13,7 +13,7 @@ function Profile () {
       image: ProfileIcon,
       value: 'Passport',
       property: 'Document type',
-      status: 'Stored'
+      status: 'Progress'
     };
 
   return (
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index 3f1ecb0..3ab2af0 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -8,8 +8,8 @@ function ProfileTableItem(props) {
 
   return (
     <>
-      <tr className="bg-[#F8FAFC] mix-blend-multiply">
-        <td className="px-2 py-3 whitespace-nowrap w-px">
+      <tr className="bg-[#eaf0f6]">
+        <td className="pl-2 pr-4 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
               <span className="sr-only">Select</span>
@@ -17,18 +17,18 @@ function ProfileTableItem(props) {
             </label>
           </div>
         </td>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 w-60 whitespace-nowrap">
+        <td className="py-3 whitespace-nowrap">
           <div className="flex items-center">
             <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
               <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
             </div>
-            <div className="flex flex-col"> 
+            <div className="flex flex-col w-60"> 
               <div className="font-semibold text-slate-800 text-base">{props.value}</div>
               <div className="font-normal text-xxs">{props.property}</div>
             </div>
           </div>
         </td>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <td className="px-2 py-3 whitespace-nowrap w-px">
           {(props.status === 'Progress') ? (
             <div className="w-fit">
               <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
@@ -61,7 +61,7 @@ function ProfileTableItem(props) {
             </div>
           </div>
         </td>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <td className="px-1 py-3 whitespace-nowrap w-px">
           {/* Menu button */}
           <div className="flex items-center">
             <button className="text-slate-400 hover:text-slate-500 rounded-full">
@@ -80,7 +80,7 @@ function ProfileTableItem(props) {
                 onClick={() => setDescriptionOpen(!descriptionOpen)}
                 aria-controls={`description-${props.id}`}
               >
-                <span className="sr-only">Menu</span>
+                <span className="sr-only">Show more</span>
                 <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
                   <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
                 </svg>
@@ -88,16 +88,83 @@ function ProfileTableItem(props) {
             </div>
           </td>
       </tr>
-      <tr className={`${!descriptionOpen && 'hidden'} bg-[#F8FAFC] mix-blend-multiply` }>
+      <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
         <td colSpan="10" className="px-12 py-3.5">
           <div className="flex items-center gap-x-5">
-            <div>
+            <div className='isolate'>
               <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
-              <input id="placeholder" className="form-input w-[396px]" type="text" placeholder="2342423423423234223" />
+              <input id="placeholder" className="form-input w-[396px] bg-white isolate" type="text" placeholder="2342423423423234223" />
             </div>
             <div>
               <span className="block text-sm font-medium mb-1">Transaction</span>
-              <a href="" className="w-[396px] underline">0x12831823791203192418234841238468</a>
+              <a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">0x12831823791203192418234841238468</a>
+            </div>
+          </div>
+          {/* Progress validation bar */}
+          <div className="pt-[18px] pb-8">
+            <div className="h-full max-w-md w-full flex flex-row">
+              <div className="w-32 shrink-0">
+                <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Today</h2>
+              </div>
+              <div>
+                <ul className="-my-2">
+                  {/* List item */}
+                  <li className="relative py-2">
+                    <div className="flex items-center mb-2.5">
+                      <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
+                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                        </svg>
+                      </div>
+                      <h3 className="pl-9 whitespace-nowrap">
+                        <span className="text-validateLg font-bold text-slate-800">Validate by </span>
+                        <span className="font-bold text-validateLg underline text-indigo-500">0x7324ABC342342352345</span>
+                      </h3>
+                    </div>
+                    <div className="pl-9">
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">0x7324ABC342342352345</a>
+                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
+                    </div>
+                    <div className="pl-9">
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">7324ABC342342352345</a>
+                      <span className="block text-xxs font-normal mb-1">Validated data</span>
+                    </div>
+                    <div className="pl-9 pt-[14px]">
+                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                        Explore -&gt;
+                      </a>
+                    </div>
+                  </li>     
+                  {/* List item */}
+                  <li className="relative py-2">
+                    <div className="flex items-center mb-2.5">
+                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                        </svg>
+                      </div>
+                      <h3 className="pl-9 whitespace-nowrap">
+                        <span className="text-validateLg font-bold text-slate-800">Validate by </span>
+                        <span className="font-bold text-validateLg underline text-indigo-500">0x7324ABC342342352345</span>
+                      </h3>
+                    </div>
+                    <div className="pl-9">
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">0x7324ABC342342352345</a>
+                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
+                    </div>
+                    <div className="pl-9">
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">7324ABC342342352345</a>
+                      <span className="block text-xxs font-normal mb-1">Validated data</span>
+                    </div>
+                    <div className="pl-9 pt-[14px]">
+                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                        Explore -&gt;
+                      </a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </td>

From 6580c211ffba4c61607e80552405cdb34dccb80c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 25 May 2022 15:40:45 +0300
Subject: [PATCH 5/8] add props

---
 src/pages/digitalId/ProfileId.jsx           |  6 +++++-
 src/partials/digitalId/ProfileTableItem.jsx | 12 ++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 1703232..5a06620 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -13,7 +13,9 @@ function Profile () {
       image: ProfileIcon,
       value: 'Passport',
       property: 'Document type',
-      status: 'Progress'
+      status: 'Progress',
+      transactions: '0x7234ABC342342352345',
+      validatedData: '7234ABC342342352345'
     };
 
   return (
@@ -44,6 +46,8 @@ function Profile () {
                     value={data.value}
                     property={data.property}
                     status={data.status}
+                    transactions={data.transactions}
+                    validatedData={data.validatedData}
                   />
                 </tbody>
               </table>
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index 3ab2af0..19dee16 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -119,15 +119,15 @@ function ProfileTableItem(props) {
                       </div>
                       <h3 className="pl-9 whitespace-nowrap">
                         <span className="text-validateLg font-bold text-slate-800">Validate by </span>
-                        <span className="font-bold text-validateLg underline text-indigo-500">0x7324ABC342342352345</span>
+                        <a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a>
                       </h3>
                     </div>
                     <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">0x7324ABC342342352345</a>
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
                       <span className="block text-xxs font-normal mb-1">Transactions ID</span>
                     </div>
                     <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">7324ABC342342352345</a>
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
                       <span className="block text-xxs font-normal mb-1">Validated data</span>
                     </div>
                     <div className="pl-9 pt-[14px]">
@@ -146,15 +146,15 @@ function ProfileTableItem(props) {
                       </div>
                       <h3 className="pl-9 whitespace-nowrap">
                         <span className="text-validateLg font-bold text-slate-800">Validate by </span>
-                        <span className="font-bold text-validateLg underline text-indigo-500">0x7324ABC342342352345</span>
+                        <a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a>
                       </h3>
                     </div>
                     <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">0x7324ABC342342352345</a>
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
                       <span className="block text-xxs font-normal mb-1">Transactions ID</span>
                     </div>
                     <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">7324ABC342342352345</a>
+                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
                       <span className="block text-xxs font-normal mb-1">Validated data</span>
                     </div>
                     <div className="pl-9 pt-[14px]">

From 60194da89baf694d1adb97728513121359f54e54 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 25 May 2022 16:03:52 +0300
Subject: [PATCH 6/8] fix status chips

---
 src/partials/digitalId/ProfileTableItem.jsx | 36 +++++++++++----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index 19dee16..d00669d 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -18,7 +18,7 @@ function ProfileTableItem(props) {
           </div>
         </td>
         <td className="py-3 whitespace-nowrap">
-          <div className="flex items-center">
+          <div className="flex">
             <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
               <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
             </div>
@@ -29,22 +29,24 @@ function ProfileTableItem(props) {
           </div>
         </td>
         <td className="px-2 py-3 whitespace-nowrap w-px">
-          {(props.status === 'Progress') ? (
-            <div className="w-fit">
-              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-            </div>) : 
-            (props.status === 'Stored') ? (
-            <div className="w-fit">
-              <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
-            </div>) :
-            (props.status === 'Completed') ? (
-            <div className="w-fit">
-              <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-            </div>) : (
-            <div className="w-fit">
-              <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-            </div>)
-          }
+          <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>
         </td>
         <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
           <div className="flex flex-wrap items-center -m-1.5 justify-center">

From 5f1e8c55ff0bc3264f10a495e2c62f6bab779dcf Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 26 May 2022 12:29:12 +0300
Subject: [PATCH 7/8] fix validate prop

---
 src/pages/digitalId/ProfileId.jsx           |  10 +-
 src/partials/digitalId/ProfileTableItem.jsx | 104 ++++++++------------
 2 files changed, 46 insertions(+), 68 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 5a06620..75103fe 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -4,6 +4,9 @@ import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
 import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
 import ProfileIcon from '../../images/profile-icon.svg';
+import Avatar01 from '../../images/avatar-01.jpg';
+import Avatar02 from '../../images/avatar-02.jpg';
+import Avatar03 from '../../images/avatar-03.jpg';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -14,8 +17,8 @@ function Profile () {
       value: 'Passport',
       property: 'Document type',
       status: 'Progress',
-      transactions: '0x7234ABC342342352345',
-      validatedData: '7234ABC342342352345'
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
     };
 
   return (
@@ -47,13 +50,12 @@ function Profile () {
                     property={data.property}
                     status={data.status}
                     transactions={data.transactions}
-                    validatedData={data.validatedData}
+                    avatars={data.avatars}
                   />
                 </tbody>
               </table>
           </div>
         </main>
-
       </div>
     </div>
   )
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index d00669d..5a17432 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-import Avatar01 from '../../images/avatar-01.jpg';
-import Avatar02 from '../../images/avatar-02.jpg';
-import Avatar03 from '../../images/avatar-03.jpg';
 
 function ProfileTableItem(props) {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
@@ -9,7 +6,7 @@ function ProfileTableItem(props) {
   return (
     <>
       <tr className="bg-[#eaf0f6]">
-        <td className="pl-2 pr-4 py-3 whitespace-nowrap w-px">
+        <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
               <span className="sr-only">Select</span>
@@ -28,7 +25,7 @@ function ProfileTableItem(props) {
             </div>
           </div>
         </td>
-        <td className="px-2 py-3 whitespace-nowrap w-px">
+        <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">
@@ -51,9 +48,11 @@ function ProfileTableItem(props) {
         <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
           <div className="flex flex-wrap items-center -m-1.5 justify-center">
             <div className="flex -space-x-3 -ml-0.5">
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
-              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
+              {(props.avatars) ? (
+                props.avatars.map((avatar, index) => (
+                  <img className="rounded-full border-2 border-slate-100 box-content" key={index} src={avatar} width="32" height="32" alt="Avatar" />
+                ))
+              ): null}
               <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
                   <span className="sr-only">Add avatar</span>
                   <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
@@ -64,7 +63,7 @@ function ProfileTableItem(props) {
           </div>
         </td>
         <td className="px-1 py-3 whitespace-nowrap w-px">
-          {/* Menu button */}
+          {/* Button */}
           <div className="flex items-center">
             <button className="text-slate-400 hover:text-slate-500 rounded-full">
               <span className="sr-only">Link</span>
@@ -74,7 +73,7 @@ function ProfileTableItem(props) {
             </button>
           </div>
         </td>
-        <td className="py-3 whitespace-nowrap w-px">
+        <td className="py-3 whitespace-nowrap w-px pr-1.5">
             <div className="flex items-center">
               <button
                 className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
@@ -93,9 +92,9 @@ function ProfileTableItem(props) {
       <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
         <td colSpan="10" className="px-12 py-3.5">
           <div className="flex items-center gap-x-5">
-            <div className='isolate'>
+            <div>
               <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
-              <input id="placeholder" className="form-input w-[396px] bg-white isolate" type="text" placeholder="2342423423423234223" />
+              <input id="placeholder" className="form-input w-[396px] bg-white" type="text" placeholder="2342423423423234223" />
             </div>
             <div>
               <span className="block text-sm font-medium mb-1">Transaction</span>
@@ -111,60 +110,37 @@ function ProfileTableItem(props) {
               <div>
                 <ul className="-my-2">
                   {/* List item */}
-                  <li className="relative py-2">
-                    <div className="flex items-center mb-2.5">
-                      <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
-                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
-                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
-                        </svg>
+                  {props.transactions.map((data, index) => (
+                    <li className="relative py-2" key={index}>
+                      <div className="flex items-center mb-2.5">
+                        {(props.transactions[index+1]) ? (
+                          <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
+                        ) : null}
+                        <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                            <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                          </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>
+                        </h3>
                       </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">{props.transactions}</a>
-                      </h3>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
-                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
-                      <span className="block text-xxs font-normal mb-1">Validated data</span>
-                    </div>
-                    <div className="pl-9 pt-[14px]">
-                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
-                        Explore -&gt;
-                      </a>
-                    </div>
-                  </li>     
-                  {/* List item */}
-                  <li className="relative py-2">
-                    <div className="flex items-center mb-2.5">
-                      <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
-                        <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
-                          <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
-                        </svg>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
+                        <span className="block text-xxs font-normal mb-1">Transactions ID</span>
                       </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">{props.transactions}</a>
-                      </h3>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a>
-                      <span className="block text-xxs font-normal mb-1">Transactions ID</span>
-                    </div>
-                    <div className="pl-9">
-                      <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</a>
-                      <span className="block text-xxs font-normal mb-1">Validated data</span>
-                    </div>
-                    <div className="pl-9 pt-[14px]">
-                      <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
-                        Explore -&gt;
-                      </a>
-                    </div>
-                  </li>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
+                        <span className="block text-xxs font-normal mb-1">Validated data</span>
+                      </div>
+                      <div className="pl-9 pt-[14px]">
+                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                          Explore -&gt;
+                        </a>
+                      </div>
+                    </li>     
+                  ))}
                 </ul>
               </div>
             </div>

From 13136d2712b196d5f65231fd54aea7efa762f5ec Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 26 May 2022 12:35:32 +0300
Subject: [PATCH 8/8] delete spaces

---
 src/pages/digitalId/ProfileId.jsx     | 3 ---
 src/pages/digitalId/Validate.jsx      | 4 ----
 src/pages/digitalId/ValidationLog.jsx | 4 ----
 src/pages/digitalId/Verify.jsx        | 4 ----
 4 files changed, 15 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 75103fe..4d85496 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -25,15 +25,12 @@ function Profile () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  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 */}
diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx
index 5ef3b28..fa5c2f0 100644
--- a/src/pages/digitalId/Validate.jsx
+++ b/src/pages/digitalId/Validate.jsx
@@ -10,15 +10,12 @@ function Validate () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  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 */}
@@ -26,7 +23,6 @@ function Validate () {
             </div>
           </div>
         </main>
-
       </div>
     </div>
   )
diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx
index ddcf0dc..1376ddf 100644
--- a/src/pages/digitalId/ValidationLog.jsx
+++ b/src/pages/digitalId/ValidationLog.jsx
@@ -10,15 +10,12 @@ function ValidationLog () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  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 */}
@@ -26,7 +23,6 @@ function ValidationLog () {
             </div>
           </div>
         </main>
-
       </div>
     </div>
   )
diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx
index 8510b51..ff9ccff 100644
--- a/src/pages/digitalId/Verify.jsx
+++ b/src/pages/digitalId/Verify.jsx
@@ -10,15 +10,12 @@ function Verify () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  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 */}
@@ -26,7 +23,6 @@ function Verify () {
             </div>
           </div>
         </main>
-
       </div>
     </div>
   )