🔽 Downloads section building out

src/client/assets/scss/App.scss

@@ -55,13 +55,78 @@ pre {
     background-color: $bg-color;
   }
 }
-
+// Navbar
 .navbar {
   border-bottom: 1px solid #f2f1f9;
   .download-progress-meter {
     margin-left: -300px;
     min-width: 500px;
-    
+  }
+  body {
+    background: #454a59;
+  }
+
+  body {
+    background: #454a59;
+  }
+
+  .pulsating-circle {
+    position: relative;
+    left: -120%;
+    top: 20%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 15px;
+    height: 15px;
+
+    &:before {
+      content: "";
+      position: relative;
+      display: block;
+      width: 300%;
+      height: 300%;
+      box-sizing: border-box;
+      margin-left: -100%;
+      margin-top: -100%;
+      border-radius: 45px;
+      background-color: #01a4e9;
+      animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: green;
+      border-radius: 15px;
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+      animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
+    }
+  }
+
+  @keyframes pulse-ring {
+    0% {
+      transform: scale(0.33);
+    }
+    80%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulse-dot {
+    0% {
+      transform: scale(0.8);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.8);
+    }
   }
 }
 
@@ -267,11 +332,10 @@ pre {
           border-bottom-left-radius: 8px;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
-           height: 64px; 
-           object-fit: cover;
-           object-position: 100% 0;
+          height: 64px;
+          object-fit: cover;
+          object-position: 100% 0;
           //  flex: 1 1 auto;
-
         }
       }
     }
@@ -281,9 +345,7 @@ pre {
       padding-left: 0.7em;
       padding-top: 0.4em;
       padding-bottom: 0em;
-     
     }
-    
   }
 }
 

src/client/components/App.tsx

@@ -42,7 +42,7 @@ const AirDCPPSocketComponent = (): ReactElement => {
           "queue_bundle_added",
           async (data) => {
             console.log("JEMEN:", data);
-            
+
 
           }
         );
@@ -59,10 +59,12 @@ const AirDCPPSocketComponent = (): ReactElement => {
         );
         // download complete listener
         await airDCPPConfiguration.airDCPPState.socket.addListener(
-          `transfers`,
-          "transfer_completed",
-          async (transferData) => {
-            console.log(transferData)
+          `queue`,
+          "queue_bundle_status",
+          async (bundleData) => {
+            if (bundleData.status.completed && bundleData.status.downloaded) {
+              console.log("IM THE MAN UP IN THIS")
+            }
           },
         );
         console.log(

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-7-29",
+        startDate: "2022-8-9",
         pageSize: "15",
         currentPage: "1",
       }),

src/client/components/Downloads/Downloads.tsx

@@ -61,10 +61,11 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
               return <>
                 <MetadataPanel
                   data={bundle}
-                  imageStyle={{ maxWidth: 100 }}
+                  imageStyle={{ maxWidth: 80 }}
                   titleStyle={{ fontSize: "0.8rem" }}
                   tagsStyle={{ fontSize: "0.7rem" }}
                   containerStyle={{
+                    maxWidth: 400,
                     padding: 0,
                     margin: "0 0 8px 0",
                   }} />

src/client/components/Navbar.tsx

@@ -73,7 +73,7 @@ const Navbar: React.FunctionComponent = (props) => {
             <a className="navbar-link is-arrowless">
               <i className="fa-solid fa-download"></i>
               {downloadProgressTick && (
-                <i className="fa-regular fa-circle-dot ml-2 "></i>
+                <div className="pulsating-circle"></div>
               )}
             </a>
             {!isUndefined(downloadProgressTick) ? (