From 1cdd77e73adc29e1f4c2ff08b4a7a7d836085e8a Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 26 Apr 2024 17:17:50 +0300
Subject: [PATCH] progress bar styling changes

---
 ...mp-form-progress-indication.component.scss | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
index a15510639..b3aa2b404 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
@@ -1,16 +1,39 @@
-.percentage {
-	color: #212121;
-	opacity: 0.7;
-	font-weight: 400;
-	font-size: 0.875rem;
-}
+// .percentage {
+// 	color: #212121;
+// 	opacity: 0.7;
+// 	font-weight: 400;
+// 	font-size: 0.875rem;
+// }
 
+// .progress-bar {
+// 	border-radius: 20px;
+// 	height: 11px;
+
+// }
+
+// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
+// 	border-radius: 20px !important;
+// }
+
+
+// Bar container
 .progress-bar {
+	--mdc-linear-progress-active-indicator-height: 11px !important;
 	border-radius: 20px;
-	height: 11px;
-
 }
 
-::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
+//Progress bar
+::ng-deep .mdc-linear-progress__bar-inner {
+	--mdc-linear-progress-active-indicator-color: var(--primary-color) !important;
 	border-radius: 20px !important;
 }
+
+// Buffer bar
+::ng-deep .mdc-linear-progress__buffer {
+	--mdc-linear-progress-track-height: 11px !important;
+	--mdc-linear-progress-active-indicator-color: var(--secondary-color) !important;
+}
+
+::ng-deep .mdc-linear-progress__buffer-bar {
+	--mdc-linear-progress-track-color: var(--secondary-color) !important;
+}