Improved readability of toast progress label, overflow of toast messa…

…ge with ellipsis and removed the toast close button considering the auto-dismiss.
morpheus65535 · May 12, 2021 · cf35f4a · cf35f4a
1 parent 821ff13
commit cf35f4a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/frontend/src/App/notifications/index.tsx b/frontend/src/App/notifications/index.tsx
@@ -96,7 +96,7 @@ const ProgressToast: FunctionComponent<ProgressHolderProps> = ({
 
   return (
     <Toast onClose={remove}>
-      <Toast.Header closeButton={!incomplete}>
+      <Toast.Header closeButton={false}>
         <FontAwesomeIcon className="mr-2" icon={faPaperPlane}></FontAwesomeIcon>
         <span className="mr-auto">{header}</span>
       </Toast.Header>

diff --git a/frontend/src/App/notifications/style.scss b/frontend/src/App/notifications/style.scss
@@ -1,4 +1,9 @@
 @import "../../@scss/variable.scss";
+@import "../../@scss/bazarr.scss";
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
 
 .alert-container {
   position: fixed;
@@ -17,6 +22,25 @@
 
       backdrop-filter: blur(6px);
       -webkit-backdrop-filter: blur(6px);
+
+      .toast-body {
+        span {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          width: 100%;
+          display: inline-block;
+        }
+        .progress {
+          .progress-bar {
+            text-shadow: -2px -2px 5px theme-color("primary"),
+              2px -2px 5px theme-color("primary"),
+              -2px 2px 5px theme-color("primary"),
+              2px 2px 5px theme-color("primary");
+            overflow: visible;
+          }
+        }
+      }
     }
   }
 }