🌄 Fixes to card component, and adding a key to DC++ search result rows

src/client/actions/airdcpp.actions.tsx

@@ -71,8 +71,6 @@ export const search = (data: SearchData) => async (dispatch) => {
       async (searchInfo) => {
         await sleep(5000);
 
-        
-
         // Check the number of received results (in real use cases we should know that even without calling the API)
         const currentInstance = await SocketService.get(
           `search/${instance.id}`,
@@ -94,10 +92,6 @@ export const search = (data: SearchData) => async (dispatch) => {
 
     // Finally, perform the actual search
     await SocketService.post(`search/${instance.id}/hub_search`, data);
-
-    // removeSearchesSentListener();
-    // removeSeachResultAddedListener();
-    // removeSearchResultUpdatedListener();
   } catch (error) {
     console.log("ERO", error);
     throw error;

src/client/assets/scss/App.scss

@@ -42,6 +42,10 @@ $border-color: red;
 
 .generic-card {
   max-width: 200px;
+  background-color: #fff;
+  border-bottom-left-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
+  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
 
   .truncate {
     width: 100px;
@@ -50,18 +54,27 @@ $border-color: red;
     text-overflow: ellipsis;
   }
   .partial-rounded-card-image {
-    img {
+    figure {
-      border-top-left-radius: 0.3rem;
+      display: flex;
-      border-top-right-radius: 0.3rem;
+      img {
-      border-bottom-left-radius: 0;
+        border-top-left-radius: 0.3rem;
-      border-bottom-right-radius: 0;
+        border-top-right-radius: 0.3rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
   .rounded-card-image {
-    img {
+    figure {
-      border-radius: 0.3rem;
+      display: flex;
+      img {
+        border-radius: 0.3rem;
+      }
     }
   }
+  .card-content {
+    padding: 1rem;
+  }
 }
 .card-container {
   display: grid;
@@ -188,6 +201,12 @@ $border-color: red;
 }
 
 // comicvine search results
+.slide-pane__content {
+  padding: 24px 12px;
+}
+.slide-pane__header {
+  margin-top: 52px;
+}
 .search-results-container {
   margin: 15px 0 0 0;
   overflow: hidden;

src/client/components/AcquisitionPanel.tsx

@@ -42,9 +42,7 @@ export const AcquisitionPanel = (
       // pattern: "Templier T2.cbr",
       extensions: ["cbz", "cbr"],
     },
-    hub_urls: [
+    hub_urls: ["comic-scans.no-ip.biz:24674"],
-      "adcs://novosibirsk.dc-dev.club:7111/?kp=SHA256/4XFHJFFBFEI2RS75FPRPPXPZMMKPXR764ABVVCC2QGJPQ34SDZGA",
-    ],
     priority: 5,
   };
 
@@ -117,9 +115,9 @@ export const AcquisitionPanel = (
               </tr>
             </thead>
             <tbody>
-              {map(airDCPPSearchResults, ({ result }) => {
+              {map(airDCPPSearchResults, ({ result }, idx) => {
                 return (
-                  <tr key={result.id}>
+                  <tr key={idx}>
                     <td>
                       <p className="mb-2">
                         {result.type.id === "directory" ? (

src/client/components/Carda.tsx

@@ -17,7 +17,7 @@ const renderCard = (props): ReactElement => {
     case "vertical":
       return (
         <div>
-          <div className="card generic-card">
+          <div className="generic-card">
             <div>
               <div
                 className={

src/client/components/ComicDetail.tsx

@@ -339,6 +339,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
             <SlidingPane
               isOpen={visible}
               onRequestClose={() => setVisible(false)}
+              title={"Comic Vine Search Matches"}
               width={"600px"}
             >
               {!isEmpty(comicVineSearchQueryObject) &&