From 542253c8a0a1987c374326ab3626ff37677a5372 Mon Sep 17 00:00:00 2001
From: bluerabbit001 <okawanori001@gmail.com>
Date: Fri, 8 Oct 2021 13:27:12 -0700
Subject: [PATCH] Update CSS

---
 ui/component/downloadProgress/view.jsx    | 18 ++++-----
 ui/scss/component/_download-progress.scss | 45 ++++++++++++++++++-----
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/ui/component/downloadProgress/view.jsx b/ui/component/downloadProgress/view.jsx
index 48e850539..dd95b5c7c 100644
--- a/ui/component/downloadProgress/view.jsx
+++ b/ui/component/downloadProgress/view.jsx
@@ -32,8 +32,6 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
     cancelHash[hash] = value;
   };
 
-  useEffect(() => {}, []);
-
   const handleStopDownload = (outpoint) => {
     const updated = [...downloading];
     removeItem(updated, outpoint);
@@ -42,7 +40,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
   };
 
   const runningByOutpoint = {};
-  const updateDownloading = [...downloading];
+  const currentDownloading = [...downloading];
 
   for (const key in byOutpoint) {
     const item = byOutpoint[key];
@@ -53,18 +51,18 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
     .filter((outpoint) => downloading.indexOf(outpoint) === -1)
     .map((outpoint) => {
       if (primary.outpoint !== outpoint && playing.outpoint !== outpoint) {
-        updateDownloading.push(outpoint);
+        currentDownloading.push(outpoint);
       }
     });
 
   downloading
     .filter((outpoint) => (byOutpoint[outpoint] && byOutpoint[outpoint].status !== 'running') || !byOutpoint[outpoint])
     .map((outpoint) => {
-      removeItem(updateDownloading, outpoint);
+      removeItem(currentDownloading, outpoint);
     });
-  if (!areEqual(downloading, updateDownloading)) setDownloading(updateDownloading);
+  if (!areEqual(downloading, currentDownloading)) setDownloading(currentDownloading);
 
-  if (updateDownloading.length === 0) return null;
+  if (currentDownloading.length === 0) return null;
 
   if (playing.outpoint !== prevPlaying.outpoint) {
     if (downloading.includes(prevPlaying.outpoint)) {
@@ -84,7 +82,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
     setPrevPrimary(primary);
   }
 
-  updateDownloading.map((outpoint) => {
+  currentDownloading.map((outpoint) => {
     if (!initDownloadingHash[outpoint]) {
       initDownloadingHash[outpoint] = true;
       doContinueDownloading(outpoint, false);
@@ -102,7 +100,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
         >
           <div className="download-progress__current-downloading">
             <span className="notification__bubble">
-              <span className="notification__count">{updateDownloading.length}</span>
+              <span className="notification__count">{currentDownloading.length}</span>
             </span>
           </div>
         </Button>
@@ -116,7 +114,7 @@ function DownloadProgress({ byOutpoint, primary, playing, currentTheme, stopDown
         <div />
       </Button>
 
-      {updateDownloading.map((outpoint, index) => {
+      {currentDownloading.map((outpoint, index) => {
         const item = runningByOutpoint[outpoint];
         let releaseTime = '';
         let isPlaying = false;
diff --git a/ui/scss/component/_download-progress.scss b/ui/scss/component/_download-progress.scss
index 9927c0802..5b0f29346 100644
--- a/ui/scss/component/_download-progress.scss
+++ b/ui/scss/component/_download-progress.scss
@@ -7,8 +7,8 @@
   display: flex;
   flex-direction: column;
   background-color: var(--color-header-background); //var(--color-gray-9):dark-mode
-  border-radius: 10px;
-  border: 1px solid var(--color-gray-3);
+  border-radius: var(--border-radius);
+  // border: 1px solid var(--color-gray-3);
   z-index: 9999;
 }
 .download-progress__top-close-button {
@@ -23,7 +23,7 @@
     height: 2px;
     width: 13px;
     background-color: var(--color-gray-4);
-    border-radius: 3px;
+    border-radius: var(--border-radius);
   }
 }
 .download-progress__state-container {
@@ -76,10 +76,10 @@
   width: 100%;
   background-color: var(--color-gray-5);
   height: 6px;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
 }
 .download-progress__bar-content {
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   height: 100%;
   background-color: var(--color-primary);
 }
@@ -92,8 +92,8 @@
 .download-progress__playing-button {
   flex-shrink: 0;
   margin-left: auto;
-  width: 25px;
-  height: 25px;
+  width: 29.6px;
+  height: 29.6px;
 }
 .download-progress__count-time {
   font-size: 11px;
@@ -144,7 +144,7 @@
   right: 10px;
   width: 400px;
   height: 300px;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   box-shadow: 2px 2px 5px var(--color-gray-4);
   background-color: var(--color-white);
   transition: width 2s;
@@ -158,7 +158,7 @@
   color: var(--color-gray-6);
   width: 50px;
   height: 50px;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   box-shadow: 0px 5px 4px var(--color-gray-4);
   display: flex;
   justify-content: center;
@@ -183,6 +183,33 @@
   animation-name: downloadcount;
   animation-duration: 1.3s;
   animation-iteration-count: infinite;
+
+  .notification__bubble {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 50%;
+    background-color: var(--color-editor-tag);
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+    color: white;
+    font-size: var(--font-small);
+    font-weight: bold;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .notification__bubble--small {
+    font-size: var(--font-xsmall);
+  }
+
+  .notification__bubble--inline {
+    @extend .notification__bubble;
+    top: 0.75rem;
+    right: 1rem;
+  }
 }
 @keyframes downloadcount {
   0% {