🏗️ Added icons and details to metadata

src/client/components/Library/Library.tsx

@@ -53,8 +53,9 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <dl className="flex flex-col text-md p-4 mx-4 my-3 rounded-lg bg-amber-400 w-max">
-        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+      <dl className="flex flex-col text-md p-3 mx-4 my-3 rounded-lg bg-yellow-500 w-max">
+        {/* Series Name */}
+        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
           <span className="pr-1 pt-1">
             <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
           </span>
@@ -62,26 +63,27 @@ export const Library = (): ReactElement => {
             {ellipsize(value.data.series[0], 45)}
           </span>
         </span>
-        <div className="field is-grouped is-grouped-multiline">
-          <div className="control">
-            <span className="tags has-addons is-size-7  mt-2">
-              <span className="tag">Pages</span>
-              <span className="tag is-info is-light has-text-weight-bold">
-                {value.data.pagecount[0]}
-              </span>
+        <div className="flex flex-row mt-2 gap-2">
+          {/* Pages */}
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="pr-1 pt-1">
+              <i className="icon-[solar--notebook-minimalistic-bold-duotone] w-5 h-5"></i>
             </span>
-          </div>
-
-          <div className="control">
-            <span className="tags has-addons is-size-7 mt-2">
-              <span className="tag">Issue</span>
+            <span className="text-md text-slate-900 dark:text-slate-900">
+              Pages: {value.data.pagecount[0]}
+            </span>
+          </span>
+          {/* Issue number */}
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="pr-1 pt-1">
+              <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
+            </span>
+            <span className="text-slate-900 dark:text-slate-900">
               {!isNil(value.data.number) && (
-                <span className="tag has-text-weight-bold is-success is-light">
-                  {parseInt(value.data.number[0], 10)}
-                </span>
+                <span>{parseInt(value.data.number[0], 10)}</span>
               )}
             </span>
-          </div>
+          </span>
         </div>
       </dl>
     ) : null;
@@ -112,7 +114,7 @@ export const Library = (): ReactElement => {
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
               ) : (
-                <span className="text-sm p-4">No ComicInfo.xml</span>
+                <div className="text-sm mx-4 my-3">No comicinfo.xml</div>
               ),
           },
         ],
@@ -126,9 +128,7 @@ export const Library = (): ReactElement => {
             cell: (info) => {
               return !isNil(info.getValue()) ? (
                 <h6>{info.getValue().publisher.name}</h6>
-              ) : (
-                "Chimin"
-              );
+              ) : null;
             },
           },
           {

src/client/components/shared/Carda.tsx

@@ -141,7 +141,7 @@ const renderCard = (props: ICardProps): ReactElement => {
       return (
         <>
           {/* thumbnail */}
-          <div className="rounded-lg overflow-hidden w-fit h-fit">
+          <div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
             <img src={props.imageUrl} />
           </div>
         </>

src/client/components/shared/MetadataPanel.tsx

@@ -36,13 +36,17 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
             <p className="text-lg">{issueName}</p>
           </dt>
           <dd className="text-sm">
-            Is a part of <span>{inferredMetadata.issue.name}</span>
+            is a part of{" "}
+            <span className="underline">
+              {inferredMetadata.issue.name}
+              <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
+            </span>
           </dd>
 
           {/* Issue number */}
           {inferredMetadata.issue.number && (
             <dd className="my-2">
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                 <span className="pr-1 pt-1">
                   <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
                 </span>
@@ -54,7 +58,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
           )}
           <dd className="flex flex-row gap-2 w-max">
             {/* File extension */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
               <span className="pr-1 pt-1">
                 <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
               </span>
@@ -65,7 +69,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
             </span>
 
             {/* size */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
               <span className="pr-1 pt-1">
                 <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
               </span>

src/client/components/shared/T2Table.tsx

@@ -78,54 +78,40 @@ export const T2Table = (tableOptions): ReactElement => {
         </div>
         {/* pagination controls */}
         <nav className="pagination columns">
-          <div className="mr-4 has-text-weight-semibold has-text-left">
-            <p className="is-size-5">
-              Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-            </p>
-            <p>{totalPages} comics in all</p>
-          </div>
-          <div className="field has-addons">
-            <div className="control">
-              <button
-                className="button"
-                onClick={() => goToPreviousPage()}
-                disabled={pageIndex === 1}
-              >
-                <i className="fas fa-chevron-left"></i>
-              </button>
-            </div>
-            <div className="control">
-              <button
-                className="button"
-                onClick={() => goToNextPage()}
-                disabled={pageIndex > Math.floor(totalPages / pageSize)}
-              >
-                <i className="fas fa-chevron-right"></i>
-              </button>
-            </div>
-
-            <div className="field has-addons ml-5">
-              <p className="control">
-                <button className="button">
-                  <span className="icon is-small">
-                    <i className="fa-solid fa-list"></i>
-                  </span>
-                </button>
-              </p>
-              <p className="control">
-                <button className="button">
-                  <Link to="/library-grid">
-                    <span className="icon is-small">
-                      <i className="fa-solid fa-image"></i>
-                    </span>
-                  </Link>
-                </button>
-              </p>
-            </div>
+          Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
+          <p>{totalPages} comics in all</p>
+          {/* Prev/Next buttons */}
+          <div className="inline-flex flex-row mt-4 mb-4">
+            <button
+              onClick={() => goToPreviousPage()}
+              disabled={pageIndex === 1}
+              className="bg-slate-500 rounded-l border-slate-600 border-r pt-2 px-2"
+            >
+              <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
+            </button>
+            <button
+              className="bg-slate-500 rounded-r pt-2 px-2"
+              onClick={() => goToNextPage()}
+              disabled={pageIndex > Math.floor(totalPages / pageSize)}
+            >
+              <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
+            </button>
           </div>
+          <button className="button">
+            <span className="icon is-small">
+              <i className="fa-solid fa-list"></i>
+            </span>
+          </button>
+          <button className="button">
+            <Link to="/library-grid">
+              <span className="icon is-small">
+                <i className="fa-solid fa-image"></i>
+              </span>
+            </Link>
+          </button>
         </nav>
       </div>
-      <table className="table-auto">
+      <table className="table-auto border-collapse overflow-auto">
         <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
           {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>