📋 UI improvements in the Library section

src/client/components/Library/ComicVineDetails.tsx

@@ -16,7 +16,7 @@ export const ComicVineDetails = (comicVineData): ReactElement => {
               <div className="columns mt-2">
                 <div className="column is-3">
                   <Card
-                    imageUrl={data.comicvine.image.thumb_url}
+                    imageUrl={data.comicvine.image.small_url}
                     orientation={"vertical"}
                     hasDetails={false}
                     // cardContainerStyle={{ maxWidth: 200 }}

src/client/components/Library/Library.tsx

@@ -81,7 +81,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "File Details",
             id: "fileDetails",
-            minWidth: 450,
+            minWidth: 400,
             accessor: (row) =>
               !isEmpty(row._source.rawFileDetails)
                 ? {
@@ -104,7 +104,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "ComicInfo.xml",
             accessor: "_source.sourcedMetadata.comicInfo",
-            minWidth: 300,
             align: "right",
             Cell: ({ value }) =>
               !isEmpty(value) ? (

src/client/components/Library/LibraryContainer.tsx

@@ -17,6 +17,7 @@ const LibraryContainer = () => {
             size: 25,
             from: 0,
           },
+          type: "all",
         },
       ),
     );

src/client/components/Library/SearchBar.tsx

@@ -21,6 +21,7 @@ export const SearchBar = (): ReactElement => {
             size: 25,
             from: 0,
           },
+          type: "volumeName",
         },
       ),
     );
@@ -32,27 +33,30 @@ export const SearchBar = (): ReactElement => {
         initialValues={{}}
         render={({ handleSubmit, form, submitting, pristine, values }) => (
           <form onSubmit={handleSubmit}>
-            <div className="column is-three-quarters search">
-              <label>Search</label>
-              <Field name="search">
-                {({ input, meta }) => {
-                  return (
-                    <input
-                      {...input}
-                      className="input main-search-bar is-medium"
-                      placeholder="Type an issue/volume name"
-                    />
-                  );
-                }}
-              </Field>
-              <button className="button" type="submit">
-                Search
-              </button>
+            <div className="field is-grouped">
+              <div className="control is-expanded search">
+                <Field name="search">
+                  {({ input, meta }) => {
+                    return (
+                      <input
+                        {...input}
+                        className="input main-search-bar is-medium"
+                        placeholder="Type an issue/volume name"
+                      />
+                    );
+                  }}
+                </Field>
+              </div>
+              <div className="control">
+                <button className="button is-medium" type="submit">
+                  Search
+                </button>
+              </div>
             </div>
           </form>
         )}
       />
-      <div className="column one-fifth">
+      {/* <div className="column one-fifth">
         <div className="field has-addons">
           <p className="control">
             <button className="button">
@@ -71,7 +75,7 @@ export const SearchBar = (): ReactElement => {
             </button>
           </p>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };