fix: visual bugs in table (#583)

blockchain-lab-um · Mar 11, 2024 · 1149402 · 1149402
1 parent a764a99
commit 1149402
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/.changeset/strong-pens-thank.md 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
@@ -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
@@ -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>