From ccb35ec784af73c33ae00ebec0c0323606b2a898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 4 Oct 2018 11:55:24 +0200
Subject: [PATCH] MOBILE-2613 myoverview: Change progress bar styles

---
 src/components/progress-bar/progress-bar.scss | 15 ++++++++-------
 .../core-courses-course-progress.html         |  4 ++--
 .../course-progress/course-progress.scss      | 19 +++++++++++++------
 src/theme/variables.scss                      |  2 +-
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index cb1c71cc5..cdab090cc 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -1,4 +1,4 @@
-$core-progress-bar-height: 5px !default;
+$core-progress-bar-height: 10px !default;
 
 ion-app.app-root core-progress-bar {
     @include padding(null, 55px, null, null);
@@ -8,10 +8,10 @@ ion-app.app-root core-progress-bar {
 
     .core-progress-text {
         @include margin(null, null, null, 10px);
-        line-height: normal;
+        line-height: 40px;
         font-size: 1.4rem;
         color: $gray-darker;
-        @include position(-6px, 0, null, null);
+        @include position(-15px, 10px, null, null);
         position: absolute;
     }
 
@@ -26,15 +26,16 @@ ion-app.app-root core-progress-bar {
 
         .progress-bar-fallback,
         &[value]::-webkit-progress-bar {
-            background-color: $gray-light;
-            border-radius: 2px;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
+            background-color: $gray-lighter;
+            border-radius: 999px;
+            border: 1px solid $gray-light;
+            box-shadow: none;
         }
 
         .progress-bar-fallback span,
         &[value]::-webkit-progress-value {
             background-color: $core-progressbar-color;
-            border-radius: 2px;
+            border-radius: 999px;
         }
 
         .progress-bar-fallback {
diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index e9cca5e8a..ca7d88f2a 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -1,5 +1,5 @@
-<ion-card>
-    <div (click)="openCourse(course)" class="core-course-thumb core-course-color-{{course.id % 10}}" [class.core-course-color-img]="course.imageThumb">
+<ion-card [attr.course-color]="course.id % 10">
+    <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.imageThumb">
         <img *ngIf="course.imageThumb" [src]="course.imageThumb" core-external-content alt=""/>
     </div>
     <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0">
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 241553bd5..259eac524 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -3,6 +3,19 @@ ion-app.app-root core-courses-course-progress {
         display: flex;
         flex-direction: column;
 
+        @for $i from 0 to length($core-course-image-background) {
+            &[course-color="#{$i}"] {
+                .core-course-thumb {
+                    background: nth($core-course-image-background, $i + 1);
+                }
+
+                progress .progress-bar-fallback span,
+                progress[value]::-webkit-progress-value {
+                    background-color: nth($core-course-image-background, $i + 1);
+                }
+            }
+        }
+
         .core-course-thumb {
             height: 150px;
             width: 100%;
@@ -11,12 +24,6 @@ ion-app.app-root core-courses-course-progress {
             pointer-events: auto;
             position: relative;
 
-            @for $i from 0 to length($core-course-image-background) {
-                &.core-course-color-#{$i} {
-                    background: nth($core-course-image-background, $i + 1);
-                }
-            }
-
             &.core-course-color-img {
                 background: white;
             }
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index b83a4e539..44d572b52 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -18,7 +18,7 @@ $black:           #3a3a3a; // Headings, standard text.
 $gray-darker:     #626262; // Text (emphasis-detail), placeholder, background.
 $gray-dark:       #9e9e9e; // Borders (never text).
 $gray:            #dddddd;
-$gray-light:      #eeeeee; // Background.
+$gray-light:      #e9e9e9; // Background.
 $gray-lighter:    #f5f5f5;
 $white:           #ffffff; // Background, reversed text.