Merge pull request #17 from franze6/Validation_merged

Fix errors and styling

src/pages/digitalId/Validate.jsx

@@ -73,7 +73,7 @@ function Validate () {
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main>
+        <main className="relative">
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
             <div className="w-fit">
             {/* Page header */}
@@ -107,8 +107,8 @@ function Validate () {
                 </ul>
               </div>
               <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
-              <div className="pb-8 border-b border-zinc-200 mt-12">
+              <div className="pb-8 border-b border-zinc-200 mt-[50px]">
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID validation log ✨</h1>
               </div>
               {validateItems.map(item => {
                 return <ValidateRoadMap season={item} key={item.id}/>

src/pages/digitalId/ValidationLog.jsx

@@ -123,17 +123,17 @@ function ValidationLog () {
               {/* Page header */}
               <div className="pb-8 border-b border-zinc-200">
                 {/* Title */}
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID transaction log ✨</h1>
+                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digital ID transaction log ✨</h1>
               </div>
               {/*Psosts*/}
-              <div className="max-w-3xl m-auto mt-8">
+              <div className="max-w-3xl m-auto mt-6">
                 <div className="xl:-translate-x-16 max-w-fit">
                   {/* PostsID */}
                   {logItems.map(item => {
                     return <ValidateRoadMap season={item} key={item.id} />
                   })}
                   {/* Post */}
-                  <article className="pt-6">
+                  <article className="pt-3">
                     <div className="xl:flex">
                       <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">Even earlier</h2>

src/partials/validate/ValidateItem.jsx

@@ -20,7 +20,7 @@ function ValidateTableItem(props) {
 
   return (
       <tr className="hover:bg-[#E2E8F0] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
-        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+        <td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
               <span className="sr-only">Select</span>

src/partials/validate/ValidatePanel.jsx

@@ -7,18 +7,19 @@ function TransactionPanel({
   setValidatePanelOpen
 }) {
 
-  const closeBtn = useRef(null);
+  const panelContent = useRef()
-  const panelContent = useRef(null);
 
   // close on click outside
   useEffect(() => {
-    const clickHandler = ({ target }) => {
+    const clickHandler = () => {
-      if (!validatePanelOpen || panelContent.current.contains(target) || closeBtn.current.contains(target)) return;
+      if (!validatePanelOpen || !panelContent.current) return;
       setValidatePanelOpen(false);
     };
     document.addEventListener('click', clickHandler);
-    return () => document.removeEventListener('click', clickHandler);
+    return () => {
-  });
+      document.removeEventListener('click', clickHandler)
+    };
+  }, []);
 
   // close if the esc key is pressed
   useEffect(() => {
@@ -28,7 +29,7 @@ function TransactionPanel({
     };
     document.addEventListener('keydown', keyHandler);
     return () => document.removeEventListener('keydown', keyHandler);
-  });
+  }, []);
 
   return (
       <div
@@ -36,9 +37,8 @@ function TransactionPanel({
           className={`absolute inset-0 sm:left-auto z-20 transition-transform duration-200 ease-in-out ${
               validatePanelOpen ? 'translate-x-' : 'translate-x-full'
           }`}>
-        <div className="sticky top-16 bg-gradient-to-b from-[#E2E8F0] via-slate-100 to-white  overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-[calc(100vh-64px)]">
+        <div className="sticky top-16 bg-gradient-to-b from-[#E2E8F0] via-slate-100 to-white shrink-0 border-l border-slate-200 w-full sm:w-[390px] h-fit">
           <button
-              ref={closeBtn}
               onClick={() => setValidatePanelOpen(false)}
               className="absolute top-0 right-0 mt-6 mr-6 group p-2"
           >
@@ -83,19 +83,19 @@ function TransactionPanel({
                     <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="italic">Transaction:</span>
                     <span className="font-medium text-slate-700 text-right">145 bytes</span>
                   </div>
                 </div>
               </div>
               {/* Receipts */}
               <div className="mt-6">
-                <div className="text-sm font-semibold text-slate-800 mb-2">Receipts</div>
+                <div className="text-sm font-semibold text-slate-800 mb-2">Private Data</div>
                 <form className="rounded bg-slate-100 border border-dashed border-slate-300 text-center px-5 py-8">
                   <svg className="inline-flex w-4 h-4 fill-slate-400 mb-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                     <path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
                   </svg>
-                  <label htmlFor="upload" className="block text-sm text-slate-500 italic">Upload exported JSON data</label>
+                  <label htmlFor="upload" className="block text-sm text-slate-400 italic">Upload exported JSON data</label>
                   <input className="sr-only" id="upload" type="file" />
                 </form>
               </div>
@@ -108,7 +108,7 @@ function TransactionPanel({
                 </form>
               </div>
               {/* Download / Report */}
-              <div className="flex items-center space-x-3 mt-6">
+              <div className="flex items-center space-x-3 mt-[84px]">
                 <div className="w-1/2">
                   <button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
                     <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

src/partials/validate/ValidateTable.jsx

@@ -83,7 +83,7 @@ function ValidateTable({
               {/* Table header */}
               <thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
               <tr>
-                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+                <th className="first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
                   <div className="flex items-center">
                     <label className="inline-flex">
                       <span className="sr-only">Select all</span>

src/partials/validationlog/ValidateRoadMap.jsx

@@ -6,7 +6,7 @@ import ValidationUsersImg from "./ValidationUsersImg";
 function ValidateRoadMap({ season }) {
 
   return (
-      <article className="pt-6">
+      <article className="pt-3">
         <div className="xl:flex">
           <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">{season.name}</h2>

src/partials/validationlog/ValidationSeasonItem.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 function ValidationSeasonItem({ length, item, index }) {
   return (
-      <li className="relative py-2">
+      <li className="relative pt-2 pb-2.5">
-        <div className="flex items-center mb-1">
+        <div className="flex items-center mb-2.5">
           {length-1!==index && <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 ${item.checked ? "bg-indigo-500" : "bg-[#FF0000]"}`} aria-hidden="true">
             <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
@@ -16,11 +16,11 @@ function ValidationSeasonItem({ length, item, index }) {
         </div>
         <div className="block text-slate-800 w-fit pl-9">
           <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.dataSeason}`}</div>
-          <span className="font-normal text-[10px]">Transactions ID</span>
+          <span className="font-normal text-slate-600 text-[10px]">Transactions ID</span>
         </div>
         <div className="mb-3.5 block text-slate-800 w-fit pl-9">
           <div className="text-base font-semibold underline mb-[-10px]">{item.dataSeason}</div>
-          <span className="font-normal text-[10px]">Validated data</span>
+          <span className="font-normal text-slate-600 text-[10px]">Validated data</span>
         </div>
         <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
       </li>