From 9e92ba9845930abf2a79534b1770e2a297828402 Mon Sep 17 00:00:00 2001
From: AlasdairSwan <aswan@edx.org>
Date: Tue, 16 Jan 2018 14:39:41 -0500
Subject: [PATCH] LEARNER-3429 Learner Analytics Dashboard Style updates

---
 .../Discussions.jsx                           |  3 +-
 .../LearnerAnalyticsDashboard.jsx             |  7 ++-
 .../_learner-analytics-dashboard.scss         | 63 ++++++++++---------
 3 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/lms/static/js/learner_analytics_dashboard/Discussions.jsx b/lms/static/js/learner_analytics_dashboard/Discussions.jsx
index a2ae32fb0c..2036b4a6a2 100644
--- a/lms/static/js/learner_analytics_dashboard/Discussions.jsx
+++ b/lms/static/js/learner_analytics_dashboard/Discussions.jsx
@@ -8,8 +8,9 @@ class Discussions extends React.Component {
   }
 
   getComparisons() {
+    const experiments = window.experimentVariables || {};
     const {content_authored, profileImages} = this.props;
-    const content_average = 7;
+    const content_average = experiments.learnerAnalyticsDiscussionAverage || 4;
     let average_percent = 1;
     let authored_percent = 0;
 
diff --git a/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx b/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx
index acba4da9b8..e67cdf0650 100644
--- a/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx
+++ b/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx
@@ -3,6 +3,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import CircleChart from './CircleChart';
 import CircleChartLegend from './CircleChartLegend';
 import GradeTable from './GradeTable';
@@ -104,7 +105,11 @@ export function LearnerAnalyticsDashboard(props) {
           <Discussions {...discussion_info} profileImages={profile_images} />
         </div>
       </div>
-      <div className="analytics-group sidebar">
+      <div className={classNames(
+             'analytics-group',
+             'sidebar',
+             {'week-streak': week_streak > 0}
+           )}>
         <h2 className="group-heading">Timing</h2>
         <h3 className="section-heading">Course due dates</h3>
         <DueDates dates={schedule} assignmentCounts={assignmentCounts} />
diff --git a/lms/static/sass/features/_learner-analytics-dashboard.scss b/lms/static/sass/features/_learner-analytics-dashboard.scss
index 267459bc20..e092892830 100644
--- a/lms/static/sass/features/_learner-analytics-dashboard.scss
+++ b/lms/static/sass/features/_learner-analytics-dashboard.scss
@@ -19,30 +19,34 @@ $trophy-gold: #f39c12;
   .sidebar {
     position: relative;
 
-    &::before {
-      content: '';
-      width: 100%;
-      height: 100px;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background: {
-        image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
-        repeat: no-repeat;
-        position: center;
+    &.week-streak {
+      &::before {
+        content: '';
+        width: 100%;
+        height: 100px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: {
+          image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
+          position: center;
+          repeat: no-repeat;
+          size: cover;
+        }
       }
-    }
-    &::after {
-      content: '';
-      width: 151px;
-      height: 192px;
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      background: {
-        image: url('#{$static-path}/images/learner_analytics_dashboard/streak-trophy.png');
-        repeat: no-repeat;
-        position: bottom right;
+
+      &::after {
+        content: '';
+        width: 151px;
+        height: 192px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: {
+          image: url('#{$static-path}/images/learner_analytics_dashboard/streak-trophy.png');
+          repeat: no-repeat;
+          position: bottom right;
+        }
       }
     }
   }
@@ -339,8 +343,10 @@ $trophy-gold: #f39c12;
 
   @include media-breakpoint-up(md) {
     .sidebar {
-      &::before {
-        background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-1140x768.jpg');
+      &.week-streak {
+        &::before {
+          background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-1140x768.jpg');
+        }
       }
     }
 
@@ -374,8 +380,10 @@ $trophy-gold: #f39c12;
 
   @include media-breakpoint-up(xl) {
     .sidebar {
-      &::before {
-        background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
+      &.week-streak {
+        &::before {
+          background-image: url('#{$static-path}/images/learner_analytics_dashboard/streak-768x517.jpg');
+        }
       }
     }
 
@@ -396,4 +404,3 @@ $trophy-gold: #f39c12;
     }
   }
 }
-