From df6a60b0e08b9b0f8331796eac3f36154ef16368 Mon Sep 17 00:00:00 2001
From: Nathan Sprenkle <nsprenkle@users.noreply.github.com>
Date: Mon, 24 Apr 2023 10:04:03 -0400
Subject: [PATCH] feat: video share icons (#32111)

* feat: replace video share links with icons

* feat: add download / share icons to video block

* feat: consistent styling for transcript links

* feat: change order of download/share for videos
---
 lms/templates/video.html       | 28 +++++++++++++++++-----------
 xmodule/css/video/display.scss |  5 +++++
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/lms/templates/video.html b/lms/templates/video.html
index af361db82d..f4f4ec9a55 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -52,15 +52,8 @@ from openedx.core.djangolib.js_utils import (
         % if download_video_link or public_video_url:
             <div class="wrapper-download-video">
                 <h4 class="hd hd-5">${_('Video')}</h4>
-                % if download_video_link:
-                    <a class="btn-link video-sources video-download-button" href="${download_video_link}">
-                        ${_('Download video file')}
-                    </a>
-                % endif
-                % if download_video_link and public_video_url:
-                    <br>
-                % endif
                 % if public_video_url:
+                    <span class="icon fa fa-share-alt" aria-hidden="true"></span>
                     ${_('Share on:')}
                     <a
                         class="btn-link"
@@ -68,7 +61,8 @@ from openedx.core.djangolib.js_utils import (
                         href="${public_video_url}"
                         target="_blank"
                     >
-                        ${_('Twitter')}
+                        <span class="icon fa fa-twitter-square" aria-hidden="true"></span>
+                        <span class="sr">${_('Share on Twitter')}</span>
                     </a>
                     <a
                         class="btn-link"
@@ -76,7 +70,8 @@ from openedx.core.djangolib.js_utils import (
                         href="${public_video_url}"
                         target="_blank"
                     >
-                        ${_('Facebook')}
+                        <span class="icon fa fa-facebook-square" aria-hidden="true"></span>
+                        <span class="sr">${_('Share on Facebook')}</span>
                     </a>
                     <a
                         class="btn-link"
@@ -84,7 +79,17 @@ from openedx.core.djangolib.js_utils import (
                         href="${public_video_url}"
                         target="_blank"
                     >
-                        ${_('Linkedin')}
+                        <span class="icon fa fa-linkedin-square" aria-hidden="true"></span>
+                        <span class="sr">${_('Share on LinkedIn')}</span>
+                    </a>
+                % endif
+                % if download_video_link and public_video_url:
+                    <br>
+                % endif
+                % if download_video_link:
+                    <span class="icon fa fa-download" aria-hidden="true"></span>
+                    <a class="btn-link video-sources video-download-button" href="${download_video_link}">
+                        ${_('Download video file')}
                     </a>
                 % endif
             </div>
@@ -96,6 +101,7 @@ from openedx.core.djangolib.js_utils import (
             <ul class="list-download-transcripts">
                 % for item in transcript_download_formats_list:
                     <li class="transcript-option">
+                        <span class="icon fa fa-download" aria-hidden="true"></span>
                         <% dname = _("Download {file}").format(file=item['display_name']) %>
                         <a class="btn btn-link" href="${track}" data-value="${item['value']}">${dname}</a>
                     </li>
diff --git a/xmodule/css/video/display.scss b/xmodule/css/video/display.scss
index 93a8f2f5a3..b4c6eb4c42 100644
--- a/xmodule/css/video/display.scss
+++ b/xmodule/css/video/display.scss
@@ -118,6 +118,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
         .transcript-option {
           margin: 0;
+
+          a.btn , a.btn-link{
+            font-size: 16px !important;
+            font-weight: unset;
+          }
         }
       }
     }