From 114940217541d7241a8f52117ca54cf179ad4a46 Mon Sep 17 00:00:00 2001
From: Andraz <69682837+andyv09@users.noreply.github.com>
Date: Mon, 11 Mar 2024 12:00:00 +0100
Subject: [PATCH] fix: visual bugs in table (#583)

---
 .changeset/strong-pens-thank.md               |  5 +++++
 .../CreatePresentationDisplay/index.tsx       |  2 +-
 .../CredentialTable/index.tsx                 | 21 +++++++++++++------
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/strong-pens-thank.md

diff --git a/.changeset/strong-pens-thank.md b/.changeset/strong-pens-thank.md
new file mode 100644
index 000000000..c5018e5e1
--- /dev/null
+++ b/.changeset/strong-pens-thank.md
@@ -0,0 +1,5 @@
+---
+"@blockchain-lab-um/dapp": patch
+---
+
+Fix some visual bugs
diff --git a/packages/dapp/src/components/CreatePresentationDisplay/index.tsx b/packages/dapp/src/components/CreatePresentationDisplay/index.tsx
index 8cff3319a..24b8f2326 100644
--- a/packages/dapp/src/components/CreatePresentationDisplay/index.tsx
+++ b/packages/dapp/src/components/CreatePresentationDisplay/index.tsx
@@ -201,7 +201,7 @@ const CreatePresentationDisplay = () => {
                 />
               </div>
             </div>
-            {advanced && (
+            {advanced && format === 'JWT' && (
               <div className="mt-6 px-4">
                 <div className="dark:text-navy-blue-100 mt-2 text-sm font-medium text-gray-700">
                   Challenge
diff --git a/packages/dapp/src/components/DashboardDisplay/CredentialTable/index.tsx b/packages/dapp/src/components/DashboardDisplay/CredentialTable/index.tsx
index 4c501e379..b99173e42 100644
--- a/packages/dapp/src/components/DashboardDisplay/CredentialTable/index.tsx
+++ b/packages/dapp/src/components/DashboardDisplay/CredentialTable/index.tsx
@@ -57,7 +57,7 @@ const IssuerCell = ({ vc }: { vc: QueryCredentialsRequestResult }) => {
         href={`https://dev.uniresolver.io/#${issuer}`}
         target="_blank"
         rel="noreferrer"
-        className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-center text-pink-400 underline hover:text-pink-500"
+        className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-start text-pink-400 underline hover:text-pink-500"
       >{`${issuer.slice(0, 8)}....${issuer.slice(-4)}`}</a>
     </Tooltip>
   );
@@ -147,7 +147,7 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
         case 'date': {
           const date = Date.parse(vc.data.issuanceDate);
           return (
-            <span className="flex items-center justify-center">
+            <span className="flex items-center justify-start ">
               {new Date(date).toDateString()}
             </span>
           );
@@ -165,7 +165,7 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
                 href={`https://dev.uniresolver.io/#${subject}`}
                 target="_blank"
                 rel="noreferrer"
-                className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-center text-pink-400 underline hover:text-pink-500"
+                className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-start text-pink-400 underline hover:text-pink-500"
               >{`${subject.slice(0, 8)}....${subject.slice(-4)}`}</a>
             </Tooltip>
           );
@@ -174,7 +174,7 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
           return <IssuerCell vc={vc} />;
         case 'exp_date':
           return (
-            <span className="flex items-center justify-center">
+            <span className="flex items-center justify-start">
               {vc.data.expirationDate === undefined
                 ? '/'
                 : new Date(vc.data.expirationDate).toDateString()}
@@ -225,7 +225,7 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
         }
         case 'actions':
           return (
-            <div className="relative flex items-center justify-end gap-2">
+            <div className="relative flex items-start justify-center gap-2">
               <Dropdown isDismissable>
                 <DropdownTrigger>
                   <Button isIconOnly size="sm" variant="light">
@@ -361,11 +361,20 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
         <TableHeader columns={columns}>
           {(column) => (
             <TableColumn
+              align="center"
               className="dark:text-navy-blue-100"
               allowsSorting={column.allowSorting}
               key={column.key}
             >
-              {column.label}
+              <span
+                className={`${
+                  ['status', 'data_store', 'actions'].includes(column.key)
+                    ? 'flex justify-center'
+                    : ''
+                }`}
+              >
+                {column.label}
+              </span>
             </TableColumn>
           )}
         </TableHeader>