From 8f59c3abb54f4cd71d15a367f3e5feb91a9927fa Mon Sep 17 00:00:00 2001
From: Adrian Packel <apackel@instructure.com>
Date: Fri, 16 Aug 2019 13:10:31 -0500
Subject: [PATCH] Use theme nav color for SG post/hide grades icon

Have the "Post/Hide Grades" icon in SpeedGrader use the value of the
current theme's "Nav Icon" setting to determine the icon color.
(SpeedGrader's header uses the value of the "Nav Background" setting for
its own color; if that was set to white, this icon would appear not to
be displaying.)

fixes GRADE-2371

Test plan:
- Have a course with New Gradebook and Post Policies enabled
- Set up a custom theme in Canvas
  - Set the "Nav Background" color to white
  - Set the "Nav Icon" color to something different/distinct
  - Apply your new theme
- Open SpeedGrader
  - The header should match your "Nav Background" color
  - The post/hide grades icon should match your "Nav Icon" color(*)
  - Make sure this holds for both the "post grades" and "hide grades"
    icons

(*) For whatever reason, the gradebook icon (the leftmost of the icons
in the upper-left) uses the "Nav Link" theme color instead of "Nav
Icon," so it will likely be a different color from the other two. For
our icon, we're just trying to mimic the non-post-policies muting icon.

Change-Id: I6cbc50d367e937c67422fc698dfcfa81d3c03521
Reviewed-on: https://gerrit.instructure.com/205474
Tested-by: Jenkins
Reviewed-by: Jeremy Neander <jneander@instructure.com>
Reviewed-by: Gary Mei <gmei@instructure.com>
QA-Review: Gary Mei <gmei@instructure.com>
Product-Review: Jonathan Fenton <jfenton@instructure.com>
---
 app/jsx/speed_grader/SpeedGraderPostGradesMenu.js | 5 +++--
 app/stylesheets/bundles/speed_grader.scss         | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/jsx/speed_grader/SpeedGraderPostGradesMenu.js b/app/jsx/speed_grader/SpeedGraderPostGradesMenu.js
index 2e54a595f63..a841cd577cc 100644
--- a/app/jsx/speed_grader/SpeedGraderPostGradesMenu.js
+++ b/app/jsx/speed_grader/SpeedGraderPostGradesMenu.js
@@ -26,11 +26,12 @@ import Text from '@instructure/ui-elements/lib/components/Text'
 import I18n from 'i18n!SpeedGraderPostGradesMenu'
 
 export default function SpeedGraderPostGradesMenu(props) {
+  const Icon = props.allowPostingGrades ? IconOff : IconEye
   const menuTrigger = (
     <Button
-      icon={props.allowPostingGrades ? IconOff : IconEye}
+      icon={<Icon className="speedgrader-postgradesmenu-icon" />}
       title={I18n.t('Post or Hide Grades')}
-      variant="icon-inverse"
+      variant="icon"
     />
   )
 
diff --git a/app/stylesheets/bundles/speed_grader.scss b/app/stylesheets/bundles/speed_grader.scss
index 77b5f2626e3..7d417d20934 100644
--- a/app/stylesheets/bundles/speed_grader.scss
+++ b/app/stylesheets/bundles/speed_grader.scss
@@ -586,6 +586,10 @@ body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .u
   color: var(--ic-brand-global-nav-ic-icon-svg-fill);
 }
 
+.speedgrader-postgradesmenu-icon {
+  color: var(--ic-brand-global-nav-ic-icon-svg-fill) !important;
+}
+
 .ui-selectmenu-item-icon {
   top: 6px !important;
   margin-top: 0 !important;