Replace p-progressbar and bootstrap progressbar with pure CSS alt

5 files changed, 31 insertions, 12 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 413f8c49d..089a58009 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -181,6 +181,7 @@ label {
 
 .title-page-about,
 .title-page-settings {
+  white-space: nowrap;
   font-size: 115%;
   font-weight: $font-regular;
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 6c42acaff..5c1ce1028 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -236,10 +236,3 @@ ngb-tooltip-window {
     background-color: var(--secondaryColor);
   }
 }
-
-.progress-bar {
-  background-color: var(--mainColor);
-}
-.progress-bar-secondary {
-  background-color: var(--secondaryColor);
-}
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 61bb4739d..b1a23be6b 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -26,7 +26,7 @@
 @import '~bootstrap/scss/badge';
 //@import '~bootstrap/scss/jumbotron';
 @import '~bootstrap/scss/alert';
-@import '~bootstrap/scss/progress';
+//@import '~bootstrap/scss/progress';
 //@import '~bootstrap/scss/media';
 //@import '~bootstrap/scss/list-group';
 @import '~bootstrap/scss/close';
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 5163ea056..e8dfb79bc 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -225,6 +225,7 @@
   overflow: hidden;
   display: inline-block;
   width: $width;
+  min-height: 30px;
 
   @include peertube-button;
   @include orange-button;
@@ -233,8 +234,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    min-width: 100%;
-    min-height: 100%;
+    width: 100%;
+    height: 100%;
     font-size: 100px;
     text-align: right;
     filter: alpha(opacity=0);
@@ -596,3 +597,27 @@
     top: -2px;
   }
 }
+
+@mixin progressbar {
+  background-color: $grey-background-color;
+  display: flex;
+  height: 1rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+
+  .progress-bar {
+    color: var(--mainBackgroundColor);
+    background-color: var(--mainColor);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    transition: width 0.6s ease;
+
+    &.secondary {
+      background-color: var(--secondaryColor);
+    }
+  }
+}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index fbba2ad5c..0a3634c94 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -416,9 +416,9 @@ p-toast {
   .ui-toast-close-icon {
     font-family: "Glyphicons Halflings";
 
-    opacity: .5;
+    opacity: .3;
     &:hover {
-      opacity: .8;
+      opacity: .5;
     }
 
     &:after {