🖼 Some UI fixes

package.json

@@ -20,7 +20,7 @@
     "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git",
     "@dnd-kit/core": "^4.0.0",
     "@dnd-kit/sortable": "^5.0.0",
-    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "@types/mime-types": "^2.1.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",

src/client/components/Dashboard/Dashboard.tsx

@@ -4,14 +4,14 @@ import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
+import { LibraryStatistics } from "./LibraryStatistics";
 import { PullList } from "./PullList";
 import {
   fetchVolumeGroups,
   getComicBooks,
 } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isUndefined, map } from "lodash";
-import prettyBytes from "pretty-bytes";
+import { isEmpty } from "lodash";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -66,115 +66,7 @@ export const Dashboard = (): ReactElement => {
             <PullList issues={recentComics} />
 
             {/* stats */}
-
-            <h4 className="title is-4 mt-2">Statistics</h4>
-            <div className="columns is-multiline">
-              <div className="column is-narrow is-two-quarter">
-                <dl className="box">
-                  <dd className="is-size-4">
-                    <span className="has-text-weight-bold">
-                      {libraryStatistics.totalDocuments}
-                    </span>{" "}
-                    files
-                  </dd>
-                  <dd className="is-size-4">
-                    Library size
-                    <span className="has-text-weight-bold">
-                      {" "}
-                      {libraryStatistics.comicDirectorySize &&
-                        prettyBytes(libraryStatistics.comicDirectorySize)}
-                    </span>
-                  </dd>
-                  {!isUndefined(libraryStatistics.statistics) &&
-                    !isEmpty(libraryStatistics.statistics[0].issues) && (
-                      <dd className="is-size-6">
-                        <span className="has-text-weight-bold">
-                          {libraryStatistics.statistics[0].issues.length}
-                        </span>{" "}
-                        tagged with ComicVine
-                      </dd>
-                    )}
-                  {!isUndefined(libraryStatistics.statistics) &&
-                    !isEmpty(
-                      libraryStatistics.statistics[0].issuesWithComicInfoXML,
-                    ) && (
-                      <dd className="is-size-6">
-                        <span className="has-text-weight-bold">
-                          {
-                            libraryStatistics.statistics[0]
-                              .issuesWithComicInfoXML.length
-                          }
-                        </span>{" "}
-                        with
-                        <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                          ComicInfo.xml
-                        </span>
-                      </dd>
-                    )}
-                </dl>
-              </div>
-
-              <div className="p-3 column is-one-quarter">
-                <dl className="box">
-                  <dd className="is-size-6">
-                    <span className="has-text-weight-bold"></span> Issues
-                  </dd>
-                  <dd className="is-size-6">
-                    <span className="has-text-weight-bold">304</span> Volumes
-                  </dd>
-                  <dd className="is-size-6">
-                    {!isUndefined(libraryStatistics.statistics) &&
-                      !isEmpty(libraryStatistics.statistics[0].fileTypes) &&
-                      map(
-                        libraryStatistics.statistics[0].fileTypes,
-                        (fileType, idx) => {
-                          return (
-                            <span key={idx}>
-                              <span className="has-text-weight-bold">
-                                {fileType.data.length}
-                              </span>
-                              <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
-                                {fileType._id}
-                              </span>
-                            </span>
-                          );
-                        },
-                      )}
-                  </dd>
-                </dl>
-              </div>
-
-              {/* file types */}
-              <div className="p-3 column is-two-fifths">
-                {/* publisher with most issues */}
-                <dl className="box">
-                  {!isUndefined(libraryStatistics.statistics) &&
-                    !isEmpty(
-                      libraryStatistics.statistics[0]
-                        .publisherWithMostComicsInLibrary[0],
-                    ) && (
-                      <dd className="is-size-6">
-                        <span className="has-text-weight-bold">
-                          {
-                            libraryStatistics.statistics[0]
-                              .publisherWithMostComicsInLibrary[0]._id
-                          }
-                        </span>
-                        {" has the most issues "}
-                        <span className="has-text-weight-bold">
-                          {
-                            libraryStatistics.statistics[0]
-                              .publisherWithMostComicsInLibrary[0].count
-                          }
-                        </span>
-                      </dd>
-                    )}
-                  <dd className="is-size-6">
-                    <span className="has-text-weight-bold">304</span> Volumes
-                  </dd>
-                </dl>
-              </div>
-            </div>
+            <LibraryStatistics stats={libraryStatistics} />
             <WantedComicsList comics={wantedComics} />
             <RecentlyImported comicBookCovers={recentComics} />
             <VolumeGroups volumeGroups={volumeGroups} />

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -0,0 +1,115 @@
+import React, { ReactElement, useEffect } from "react";
+import prettyBytes from "pretty-bytes";
+import { isEmpty, isUndefined, map } from "lodash";
+
+export const LibraryStatistics = (
+  props: ILibraryStatisticsProps,
+): ReactElement => {
+  // const { stats } = props;
+  console.log(props);
+  return (
+    <>
+      <h4 className="title is-4 mt-2">Statistics</h4>
+      <div className="columns is-multiline">
+        <div className="column is-narrow is-two-quarter">
+          <dl className="box">
+            <dd className="is-size-4">
+              <span className="has-text-weight-bold">
+                {props.stats.totalDocuments}
+              </span>{" "}
+              files
+            </dd>
+            <dd className="is-size-4">
+              Library size
+              <span className="has-text-weight-bold">
+                {" "}
+                {props.stats.comicDirectorySize &&
+                  prettyBytes(props.stats.comicDirectorySize)}
+              </span>
+            </dd>
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics[0].issues) && (
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
+                    {props.stats.statistics[0].issues.length}
+                  </span>{" "}
+                  tagged with ComicVine
+                </dd>
+              )}
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
+                    {props.stats.statistics[0].issuesWithComicInfoXML.length}
+                  </span>{" "}
+                  with
+                  <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                    ComicInfo.xml
+                  </span>
+                </dd>
+              )}
+          </dl>
+        </div>
+
+        <div className="p-3 column is-one-quarter">
+          <dl className="box">
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold"></span> Issues
+            </dd>
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold">304</span> Volumes
+            </dd>
+            <dd className="is-size-6">
+              {!isUndefined(props.stats.statistics) &&
+                !isEmpty(props.stats.statistics[0].fileTypes) &&
+                map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
+                  return (
+                    <span key={idx}>
+                      <span className="has-text-weight-bold">
+                        {fileType.data.length}
+                      </span>
+                      <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                        {fileType._id}
+                      </span>
+                    </span>
+                  );
+                })}
+            </dd>
+          </dl>
+        </div>
+
+        {/* file types */}
+        <div className="p-3 column is-two-fifths">
+          {/* publisher with most issues */}
+          <dl className="box">
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(
+                props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
+              ) && (
+                <dd className="is-size-6">
+                  <span className="has-text-weight-bold">
+                    {
+                      props.stats.statistics[0]
+                        .publisherWithMostComicsInLibrary[0]._id
+                    }
+                  </span>
+                  {" has the most issues "}
+                  <span className="has-text-weight-bold">
+                    {
+                      props.stats.statistics[0]
+                        .publisherWithMostComicsInLibrary[0].count
+                    }
+                  </span>
+                </dd>
+              )}
+            <dd className="is-size-6">
+              <span className="has-text-weight-bold">304</span> Volumes
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LibraryStatistics;

src/client/components/Dashboard/WantedComicsList.tsx

@@ -23,7 +23,14 @@ export const WantedComicsList = ({
   return (
     <>
       <div className="content">
-        <h4 className="title is-4">Wanted Comics</h4>
+        <span className="icon-text mb-1">
+          <span>
+            <span className="title is-4">Wanted Comics</span>
+          </span>
+          <span className="icon mt-1">
+          <i className="fa-regular fa-angle-right"></i>
+          </span>
+        </span>
         <p className="subtitle is-7">
           Comics marked as wanted from various sources.
         </p>

src/client/components/Library/ComicVineDetails.tsx

@@ -1,33 +1,73 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import ellipsize from "ellipsize";
+import Card from "../Carda";
+import convert from "html-to-text";
 
 export const ComicVineDetails = (comicVineData): ReactElement => {
   const { data } = comicVineData;
+  console.log(data);
   return (
-    <div className="card-container">
-      <div className="card">
-        <div className="is-horizontal">
-          <div className="card-image">
-            <figure>
-              <img className="image" src={data.comicvine.image.thumb_url} />
-            </figure>
-          </div>
-          <ul className="card-content">
-            <li className="name has-text-weight-medium">
-              {ellipsize(data.name, 18)}
-            </li>
-            <li>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag is-primary is-light">ComicVine ID</span>
-                  <span className="tag is-info is-light">
-                    {data.comicvine.id}
-                  </span>
+    <div className="columns">
+      <div className="column">
+        <div className="comic-detail issue-metadata">
+          <dl>
+            <dd>
+              <div className="columns mt-2">
+                <div className="column is-3">
+                  <Card
+                    imageUrl={data.comicvine.image.thumb_url}
+                    orientation={"vertical"}
+                    hasDetails={false}
+                    // cardContainerStyle={{ maxWidth: 200 }}
+                  />
+                </div>
+                <div className="column">
+                  <dl>
+                    <dt>
+                      <h6 className="name has-text-weight-medium mb-1">
+                        {ellipsize(data.name, 18)}
+                      </h6>
+                    </dt>
+                    <dd>
+                      <h6>{data.comicvine.name && data.comicvine.name}</h6>
+                      <span className="is-size-7">
+                        Is a part of{" "}
+                        <span className="has-text-weight-semibold">
+                          {data.comicvine.volumeInformation.name}
+                        </span>
+                      </span>
+                    </dd>
+
+                    <dd className="is-size-7 mt-2">
+                      <div className="field is-grouped is-grouped-multiline">
+                        <div className="control">
+                          <span className="tags">
+                            <span className="tag is-success is-light has-text-weight-semibold">
+                              {data.comicvine.volumeInformation.start_year}
+                            </span>
+                            <span className="tag is-success is-light">
+                              {data.comicvine.volumeInformation.count_of_issues}
+                            </span>
+                          </span>
+                        </div>
+                        <div className="control">
+                          <div className="tags has-addons">
+                            <span className="tag is-primary is-light">
+                              ComicVine ID
+                            </span>
+                            <span className="tag is-info is-light">
+                              {data.comicvine.id}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </dd>
+                  </dl>
                 </div>
               </div>
-            </li>
-          </ul>
+            </dd>
+          </dl>
         </div>
       </div>
     </div>

src/client/components/Library/Library.tsx

@@ -102,7 +102,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             },
           },
           {
-            Header: "Import Status",
+            Header: "ComicInfo.xml",
             accessor: "_source.sourcedMetadata.comicInfo",
             minWidth: 300,
             align: "right",
@@ -124,7 +124,11 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
               "_source.sourcedMetadata.comicvine.volumeInformation.publisher",
             Cell(props) {
               return (
-                !isNil(props.cell.value) && <h6>{props.cell.value.name}</h6>
+                !isNil(props.cell.value) && (
+                  <h6 className="is-size-7 has-text-weight-bold">
+                    {props.cell.value.name}
+                  </h6>
+                )
               );
             },
           },

yarn.lock

@@ -1190,10 +1190,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fortawesome/fontawesome-free@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54"
-  integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q==
+"@fortawesome/fontawesome-free@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz#bf5d45611ab74890be386712a0e5d998c65ee2a1"
+  integrity sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==
 
 "@gar/promisify@^1.0.1":
   version "1.1.2"