make media play icon more apparent for visually impaired

Fixes: CNVS-36212

test plan:
- initial set-up needs to happen at <Your Canvas URL>/plugins/kaltura
  (_read wiki for setting up kaltura/notorious_)
- once kaltura is activated - navigate to a course - select "pages"
  from the sub-nav... click the + Page button to create a new one
- within the tinymce toolbar there should now be an option to
  "Record/Upload Media" click that option (locally there may be some
  limitations with uploading an audio-only file [???]) if so try the
  "record option"...
  example with record option: https://screencast.com/t/LlImaQmz5e
  example with default image: https://www.screencast.com/t/YlUaGOIBGnB9
  (had to fake the 2nd screenshot from sandbox version vs local)

Change-Id: I5c62c3128e39c1a1152c01d295844c93d7cacbdf
Reviewed-on: https://gerrit.instructure.com/109734
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Pierce Arner <pierce@instructure.com>

Author: pamhiett

app/coffeescripts/jquery/mediaCommentThumbnail.coffee

@@ -54,7 +54,9 @@ define [
                         class='media_comment_thumbnail media_comment_thumbnail-#{htmlEscape(size)}'
                       >
                         <span class='media_comment_thumbnail_play_button'>
-                          #{htmlEscape I18n.t 'click_to_view', 'Click to view'}
+                          <span class='screenreader-only'>
+                            #{htmlEscape I18n.t 'click_to_view', 'Click to view'}
+                          </span>
                         </span>
                       </span>"
 

app/stylesheets/components/_g_media_comments.scss

@@ -1,3 +1,5 @@
+@import "base/environment";
+
 #media_record_option_holder .record_option {
   display: block;
   margin: 0 2px 2px 2px;
@@ -213,30 +215,34 @@ div#audio_upload, div#video_upload {
   width: 140px;
   height: 100px;
   margin: 3px 5px;
+  box-sizing: border-box;
   background: url(/images/blank.png) no-repeat center center;
-  background-color: #222;
-  border: 0px solid #000;
-  display: block;
-  padding: 2px;
+  background-color: $electric;
+  background-size: cover;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
+  padding: 0;
   &.media_comment_thumbnail-small {
     width: 70px;
     height: 50px;
   }
 }
 
 .media_comment_thumbnail_play_button {
-  display: inline-block;
-  // these are the height/width of "play_overlay.png"
-  height: 100px;
-  width: 140px;
-  // accessibly hide text
-  text-indent: -999px;
-  overflow: hidden;
-  background-image: url(/images/play_overlay.png);
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  background-image: url(/images/icon-arrow-right-white.svg);
+  background-repeat: no-repeat;
+  background-size: 40%;
+  background-position: 55%;
+  background-color: $electric;
+  border-radius: 50%;
+
   .media_comment_thumbnail-small & {
-    // these are the height/width of "play_overlay_small.png"
-    height: 50px;
-    width: 70px;
-    background-image: url(/images/play_overlay_small.png);
+    width: 25px;
+    height: 25px;
   }
 }