Merge branch 'develop' of https://github.com/credebl/credebl-flowbite-ui

into credential-definition-verification-fix
credebl · Oct 19, 2023 · bd903a3 · bd903a3
2 parents 1acb4c9 + cabb8ad
commit bd903a3
Show file tree

Hide file tree

Showing 22 changed files with 686 additions and 660 deletions.
diff --git a/src/common/global.css b/src/common/global.css
@@ -15,4 +15,8 @@ input[type="radio"] {
 
 ul[role="tablist"] li[role="presentation"] button[aria-selected="true"] {
   @apply text-primary-700 border-primary-700;
+}
+
+#schema-cards div[data-testid="flowbite-card"] div {
+  @apply justify-start;
 }
diff --git a/src/commonComponents/CredentialDefinitionCard.tsx b/src/commonComponents/CredentialDefinitionCard.tsx
@@ -23,10 +23,10 @@ const CredDeffCard = (props: IProps) => {
   }
 
   return (
-    <Card onClick={redirectToIssuance} className=' cursor-pointer overflow-hidden overflow-ellipsis' style={{ maxHeight: '100%', maxWidth: '100%', overflow: 'auto' }}>
-      <div className="mb-1 lg:flex lg:items-center justify-between">
-        <div className="lg:w-1/2 md:w-2/3"> {/* This will take up 2/3 of the available width on larger screens */}
-          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
+    <Card onClick={redirectToIssuance} className='cursor-pointer overflow-hidden overflow-ellipsis h-full' style={{ maxHeight: '100%', maxWidth: '100%', overflow: 'auto' }}>
+      <div className="mb-1 flex items-center justify-between flex-wrap">
+        <div className="min-w-[6rem] max-w-100/8rem"> {/* This will take up 2/3 of the available width on larger screens */}
+          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[40px] whitespace-normal" style={{ display: "-webkit-box" }}>
             {props.credDeffName}
           </h5>
         </div>
@@ -36,14 +36,13 @@ const CredDeffCard = (props: IProps) => {
             || props.userRoles.includes(Roles.ADMIN)
             || props.userRoles.includes(Roles.ISSUER)
           )
-          && <div className="p-2 lg:w-1/2 md:w-2/3 mt-2 lg:mt-0">
+          && <div className="p-2">
             <Button
               type="submit"
               color='bg-primary-800'
               title='Initiate Credential Issuance'
               className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+						ring-2 text-black font-medium rounded-lg text-sm mr-2 ml-auto dark:text-white dark:hover:text-black 
 						dark:hover:bg-primary-50'
               style={{ height: '1.5rem', width: '100%', minWidth: '2rem' }}
             >
@@ -58,14 +57,14 @@ const CredDeffCard = (props: IProps) => {
         }
 
       </div>
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 flex flex-col">
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
           ID : {props.credentialDefinitionId}
         </p>
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white pt-2 pb-1">
           Schema ID:{props.schemaId}
         </p>
-        <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
+        <div className="mt-auto inline-flex items-center text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
           Revocable:
           <>
             <span

diff --git a/src/commonComponents/DeviceDetailsCard.tsx b/src/commonComponents/DeviceDetailsCard.tsx
@@ -87,7 +87,6 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
                                     className="p-1 border border-gray-400 rounded hover:bg-gray-100 dark:hover:bg-black dark:text-white dark:hover:text-white"
                                     onClick={(e) => {
                                         e.preventDefault(); 
-                                        props.refreshList()
                                         setOpenEditModel(true)
                                     }}
                                 >

diff --git a/src/commonComponents/SchemaCard.tsx b/src/commonComponents/SchemaCard.tsx
@@ -12,14 +12,16 @@ interface IProps {
   created: string,
   onClickCallback: (schemaId: string, attributes: string[], issuerDid: string, created: string) => void;
 }
-const SchemaCard = (props: {className?:string, schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: [], created: string, onClickCallback: (schemaId: string, attributes: string[], issuerDid:string, created:string) => void; }) => {
+const SchemaCard = (props: IProps) => {
   return (
     <Card onClick={() => {
       props.onClickCallback(props.schemaId, props.attributes, props.issuerDid, props.created)
-    }} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer h-full w-full overflow-auto'>
-      <div className="flex justify-between items-start">
-        <div>
-          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
+    }}
+    id="schema-cards" 
+    className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer h-full w-full overflow-hidden'>
+      <div className="flex justify-between items-baseline">
+        <div className='min-w-[8rem] max-w-100/10rem'>
+          <h5 className="text-xl font-bold leading-[1.1] text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[43px] whitespace-normal" style={{ display: "-webkit-box" }}>
             {props.schemaName}
           </h5>
           <p className='dark:text-white'>
@@ -28,7 +30,7 @@ const SchemaCard = (props: {className?:string, schemaName: string, version: stri
         </div>
         <div className='float-right ml-auto '>
           <p className='dark:text-white'>
-          <DateTooltip date={props.created}>
+            <DateTooltip date={props.created}>
               Created: {dateConversion(props.created)}
             </DateTooltip>          </p>
         </div>
@@ -41,33 +43,33 @@ const SchemaCard = (props: {className?:string, schemaName: string, version: stri
           <span className="font-semibold">Issuer DID:</span> {props.issuerDid}
         </p>
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
-         <span className="font-semibold">Ledger:</span> {props.issuerDid.split(":")[2]}
+          <span className="font-semibold">Ledger:</span> {props.issuerDid.split(":")[2]}
         </p>
       </div>
 
       <div className="flow-root">
         <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-          <li className="py-3 sm:py-2">
+          <li className="">
             <div className="flex items-center space-x-4">
               <div className="block text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
                 Attributes:
                 <div className="flex flex-wrap items-start">
 
-                {props.attributes && props.attributes.length > 0 && (
-                  <>
-                    {props?.attributes?.slice(0, 3).map((element, index) => (
-                      <div key={index}>
-                      <span
-                        style={{ display: 'block' }}
-                        className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
-                      >
-                        {element?.attributeName}
-                      </span>
-                      </div>
-                    ))}
-                    {props?.attributes?.length > 3 && <span>...</span>}
-                  </>
-                )}
+                  {props.attributes && props.attributes.length > 0 && (
+                    <>
+                      {props?.attributes?.slice(0, 3).map((element, index) => (
+                        <div key={index}>
+                          <span
+                            style={{ display: 'block' }}
+                            className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
+                          >
+                            {element?.attributeName}
+                          </span>
+                        </div>
+                      ))}
+                      {props?.attributes?.length > 3 && <span>...</span>}
+                    </>
+                  )}
                 </div>
               </div>
             </div>

diff --git a/src/components/Authentication/SignInUser.tsx b/src/components/Authentication/SignInUser.tsx
@@ -1,5 +1,4 @@
 import '../../common/global.css'
-
 import * as yup from 'yup';
 import { Button, Label} from 'flowbite-react';
 import { Field, Form, Formik } from 'formik';

diff --git a/src/components/Authentication/SignInUserPasskey.tsx b/src/components/Authentication/SignInUserPasskey.tsx
@@ -1,5 +1,4 @@
 import '../../common/global.css'
-
 import { Alert, Button } from 'flowbite-react';
 import {
 	UserSignInData,