Merge pull request #16096 from edx/HarryRein/LEARNER-2308-update-course-goal

Harry rein/learner 2308 update course goal

lms/static/sass/features/_course-experience.scss

@@ -81,7 +81,11 @@
         color: $black-t2;
       }
     }
-    // Course Goal Styling
+    // Course Goal Message Styling
+    .success-message {
+      font-size: font-size(small);
+    }
+
     .goal-options-container {
       margin-top: $baseline;
       text-align: center;
@@ -155,8 +159,73 @@
   @include margin-left(0);
   @include padding-left($baseline);
 
-  .section-tools li:not(:first-child) {
-    margin-top: ($baseline / 5);
+  // Course Goal Updates
+  .section-goals {
+    @include float(left);
+    border: 1px solid $lms-border-color;
+    padding: $baseline*0.75 $baseline*0.75 $baseline*0.25;
+    border-radius: 5px;
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: $baseline/2;
+
+    &.hidden {
+      display: none;
+    }
+
+    .edit-goal-select {
+      display: none;
+      background-color: transparent;
+    }
+
+    .edit-icon {
+      @include right($baseline/4);
+      position: absolute;
+      top: $baseline*0.6;
+      cursor: pointer;
+      border: transparent;
+      background-color: transparent;
+
+      &:hover {
+        color: $lms-border-color;
+      }
+    }
+
+    .current-goal-container {
+      .title{
+        @include float(left);
+        @include margin-right($baseline/4);
+      }
+
+      .title-label {
+        display: none;
+      }
+
+      .goal {
+        @include float(left);
+        @include padding-left($baseline*0.4);
+
+      }
+      .response-icon {
+        @include margin-left($baseline/4);
+        @include right(-1*$baseline);
+        top: $baseline*0.75;
+        position: absolute;
+
+        &.fa-check {
+          color: $success-color;
+        }
+
+        &.fa-close {
+          color: $error-color;
+        }
+      }
+    }
+
+    .section-tools .course-tool:not(:first-child) {
+      margin-top: ($baseline / 5);
+    }
   }
 }
 

lms/static/sass/shared-v2/_variables.scss

@@ -27,7 +27,7 @@ $lms-label-color: palette(grayscale, black) !default;
 $lms-active-color: palette(primary, base) !default;
 $lms-preview-menu-color: #c8c8c8 !default;
 $lms-inactive-color: rgb(94,94,94) !default;
-$success-color: palette(success, accent) !default;
+$success-color: rgb(0, 155, 0) !default;
 $success-color-hover: palette(success, text) !default;
 
 $button-bg-hover-color: $white !default;
@@ -49,6 +49,8 @@ $light-grey-solid: rgba(200,200,200, 1) !default;
 
 $header-border-color: $gray-l1 !default;
 
+$table-bg-accent:               #f9f9f9 !default;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------
@@ -68,6 +70,13 @@ $site-status-color: rgb(182,37,103) !default;
 
 $shadow-l1: rgba(0,0,0,0.1) !default;
 
+$error-color: rgb(203, 7, 18) !default;
+$warning-color: rgb(255, 192, 31) !default;
+$confirm-color: rgb(0, 132, 1) !default;
+$active-color: $blue !default;
+$highlight-color: rgb(255,255,0) !default;
+$alert-color: rgb(212, 64, 64) !default;
+
 // ----------------------------
 // #ALERTS
 // ----------------------------