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>
This commit is contained in:
Adrian Packel 2019-08-16 13:10:31 -05:00
parent fe564598cd
commit 8f59c3abb5
2 changed files with 7 additions and 2 deletions

View File

@ -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"
/>
)

View File

@ -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;