use refactored trophy components

refs VICE-574
flag=trophy_case

test plan:
  - visit /trophy_case
  - past view should load

qa risk: low

Change-Id: Id3d241c592ed5272881d1123bdff79a571763fe7
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241341
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Matthew Lemon <mlemon@instructure.com>
QA-Review: Matthew Lemon <mlemon@instructure.com>
Product-Review: Matthew Lemon <mlemon@instructure.com>

app/jsx/trophy_case/components/past/TrophyDisplay.js

@@ -17,30 +17,11 @@
  */
 
 import React from 'react'
-import {Img} from '@instructure/ui-img'
 import {Flex} from '@instructure/ui-flex'
 import cx from 'classnames'
-
-// TODO: figure out the long term strategy for rendering assets.
-// for now, just grab a few from confetti
-const assetFor = key => {
-  switch (key) {
-    case 'Ninja':
-      return require('../../../confetti/svg/Ninja.svg')
-    case 'FourLeafClover':
-      return require('../../../confetti/svg/FourLeafClover.svg')
-    default:
-      return require('../../../confetti/svg/Trophy.svg')
-  }
-}
+import ImageDisplay from '../ImageDisplay'
 
 export default function TrophyDisplay(props) {
-  const options = !props.unlocked_at
-    ? {
-        withGrayscale: true,
-        withBlur: true
-      }
-    : {}
   const containerClass = cx('image-container', {
     'image-container__unlocked': props.unlocked_at,
     'image-container__locked': !props.unlocked_at
@@ -49,13 +30,7 @@ export default function TrophyDisplay(props) {
     <div className={containerClass}>
       <Flex alignItems="center" justifyItems="center">
         <Flex.Item>
-          <Img
-            alt={props.trophy_key}
-            height={90}
-            width={90}
-            src={assetFor(props.trophy_key)}
-            {...options}
-          />
+          <ImageDisplay height={90} width={90} {...props} />
         </Flex.Item>
       </Flex>
     </div>