src/client/components/Library/Library.tsx

@@ -53,16 +53,15 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <div className="comicvine-metadata mt-3">
+      <dl className="flex flex-col text-md p-4 mx-4 my-3 rounded-lg bg-amber-400 w-max">
-        <dl>
+        <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="tags has-addons is-size-7">
+          <span className="pr-1 pt-1">
-            <span className="tag">Series</span>
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
-            <span className="tag is-warning is-light">
+          </span>
-              {ellipsize(value.data.series[0], 25)}
+          <span className="text-md text-slate-900 dark:text-slate-900">
+            {ellipsize(value.data.series[0], 45)}
           </span>
         </span>
-        </dl>
-        <dl>
         <div className="field is-grouped is-grouped-multiline">
           <div className="control">
             <span className="tags has-addons is-size-7  mt-2">
@@ -85,7 +84,6 @@ export const Library = (): ReactElement => {
           </div>
         </div>
       </dl>
-      </div>
     ) : null;
   };
 
@@ -110,13 +108,11 @@ export const Library = (): ReactElement => {
           {
             header: "ComicInfo.xml",
             accessorKey: "_source.sourcedMetadata.comicInfo",
-            align: "center",
-            minWidth: 250,
             cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
               ) : (
-                <span className="tag mt-5">No ComicInfo.xml</span>
+                <span className="text-sm p-4">No ComicInfo.xml</span>
               ),
           },
         ],
@@ -128,12 +124,10 @@ export const Library = (): ReactElement => {
             header: "Publisher",
             accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
             cell: (info) => {
-              return (
+              return !isNil(info.getValue()) ? (
-                !isNil(info.getValue()) && (
+                <h6>{info.getValue().publisher.name}</h6>
-                  <h6 className="is-size-7 has-text-weight-bold">
+              ) : (
-                    {info.getValue().publisher.name}
+                "Chimin"
-                  </h6>
-                )
               );
             },
           },

src/client/components/shared/Carda.tsx

@@ -140,10 +140,22 @@ const renderCard = (props: ICardProps): ReactElement => {
     case "cover-only":
       return (
         <>
+          {/* thumbnail */}
+          <div className="rounded-lg overflow-hidden w-fit h-fit">
+            <img src={props.imageUrl} />
+          </div>
+        </>
+      );
+    case "card-with-info-panel":
+      return (
+        <>
+          <div className="flex flex-row">
             {/* thumbnail */}
             <div className="rounded-md overflow-hidden w-fit h-fit">
               <img src={props.imageUrl} />
             </div>
+            {/* myata-dyata */}
+          </div>
         </>
       );
 

src/client/components/shared/MetadataPanel.tsx

@@ -31,61 +31,49 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl>
+        <dl className="bg-[#647587] p-3 rounded-lg">
           <dt>
-            <h6
+            <p className="text-lg">{issueName}</p>
-              className="name has-text-weight-medium mb-1"
-              style={props.titleStyle}
-            >
-              {issueName}
-            </h6>
           </dt>
-          <dd className="is-size-7">
+          <dd className="text-sm">
-            Is a part of{" "}
+            Is a part of <span>{inferredMetadata.issue.name}</span>
-            <span className="has-text-weight-semibold">
-              {inferredMetadata.issue.name}
-            </span>
           </dd>
 
-          <dd className="is-size-7 mt-2">
+          {/* Issue number */}
-            <div className="field is-grouped is-grouped-multiline">
+          {inferredMetadata.issue.number && (
-              <div className="control">
+            <dd className="my-2">
-                <span className="tags">
+              <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
+                <span className="pr-1 pt-1">
-                    className="tag is-success is-light has-text-weight-semibold"
+                  <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.extension}
                 </span>
-                  <span
+                <span className="text-md text-slate-900 dark:text-slate-900">
-                    className="tag is-success is-light has-text-weight-semibold"
+                  {inferredMetadata.issue.number}
-                    style={props.tagsStyle}
+                </span>
-                  >
+              </span>
+            </dd>
+          )}
+          <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="pr-1 pt-1">
+                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
                 {rawFileDetails.mimeType}
               </span>
-                  <span
+            </span>
-                    className="tag is-success is-light"
+
-                    style={props.tagsStyle}
+            {/* 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="pr-1 pt-1">
+                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+              </span>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
                 {prettyBytes(rawFileDetails.fileSize)}
               </span>
             </span>
-              </div>
-              <div className="control">
-                {inferredMetadata.issue.number && (
-                  <div className="tags has-addons">
-                    <span className="tag is-light" style={props.tagsStyle}>
-                      Issue #
-                    </span>
-                    <span className="tag is-warning" style={props.tagsStyle}>
-                      {inferredMetadata.issue.number}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-            </div>
-            
           </dd>
         </dl>
       ),
@@ -208,25 +196,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   });
 
   return (
-    <div className="column" style={props.containerStyle}>
+    <div className="flex gap-5 my-3">
-      <div className="comic-detail issue-metadata">
-        <dl>
-          <dd>
-            <div className="columns mt-2">
-              <div className="column is-3">
       <Card
         imageUrl={url}
-                  orientation={"vertical"}
+        orientation={"cover-only"}
         hasDetails={false}
         imageStyle={props.imageStyle}
-                // cardContainerStyle={{ maxWidth: 200 }}
       />
-              </div>
+      <div>{metadataPanel.content()}</div>
-              <div className="column">{metadataPanel.content()}</div>
-            </div>
-          </dd>
-        </dl>
-      </div>
     </div>
   );
 };

src/client/components/shared/T2Table.tsx

@@ -126,14 +126,14 @@ export const T2Table = (tableOptions): ReactElement => {
         </nav>
       </div>
       <table className="table-auto">
-        <thead>
+        <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
           {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header, idx) => (
                 <th
                   key={header.id}
                   colSpan={header.colSpan}
-                  className="sticky top-0 px-6 py-3"
+                  className="px-3 py-3"
                 >
                   {header.isPlaceholder
                     ? null
@@ -151,11 +151,16 @@ export const T2Table = (tableOptions): ReactElement => {
           {table.getRowModel().rows.map((row, idx) => {
             return (
               <tr key={row.id} onClick={() => rowClickHandler(row)}>
-                {row.getVisibleCells().map((cell) => (
+                {row.getVisibleCells().map((cell) => {
-                  <td key={cell.id}>
+                  return (
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    <td key={cell.id} className="align-top">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                     </td>
-                ))}
+                  );
+                })}
               </tr>
             );
           })}