From 5972b40b2fd28745c56ef54adfeb1278140da30c Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Mon, 13 May 2024 08:49:30 +0200
Subject: [PATCH] fix: styles for share video functionality of the video xblock

---
 lms/templates/video.html                      | 47 ++++------
 .../css-builtin-blocks/VideoBlockDisplay.css  | 86 +++++++++++++++++++
 2 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/lms/templates/video.html b/lms/templates/video.html
index ae984f3197..f2506e3613 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -66,31 +66,23 @@ from openedx.core.djangolib.js_utils import (
                     % endif
                     % if sharing_sites_info:
                         <div class="wrapper-social-share">
-                            <button
-                                style="background-image: none; background-color: rgb(0, 38, 43); border-radius: 0px; color: white"
-                                class="social-toggle-btn btn"
-                            >
-                                <span class="icon fa fa-share-alt mr-2" style="text-shadow: none"></span>
+                            <button class="social-toggle-btn btn">
+                                <span class="icon fa fa-share-alt"></span>
                                 ${_('Share this video')}
                             </button>
-                            <div
-                                hidden
-                                class="container-social-share color-black p-2"
-                                style="width: 300px; border-radius: 6px; background-color: white; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15),0 .25rem .625rem rgba(0,0,0,.15)"
-                            >
+                            <div hidden class="container-social-share">
                                 ${_('Share this video')}
-                                <div class="btn-link close-btn float-right">
-                                    <span style="color: black" class="icon fa fa-close" />
+                                <div class="btn-link close-btn">
+                                    <span class="icon fa fa-close"></span>
                                 </div>
 
                                 % for sharing_site_info in sharing_sites_info:
                                     <a
-                                        class="btn-link social-share-link"
-                                        data-source="${sharing_site_info['name']}"
-                                        href="${sharing_site_info['sharing_url']}"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        style="font-size: 1.5rem"
+                                        class="social-share-link"
+                                    data-source="${sharing_site_info['name']}"
+                                    href="${sharing_site_info['sharing_url']}"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
                                     >
                                         % if (sharing_site_info['name'] == 'twitter'):
                                             <!--
@@ -110,23 +102,14 @@ from openedx.core.djangolib.js_utils import (
                                         <span class="sr">${_("Share on {site}").format(site=sharing_site_info['name'])}</span>
                                     </a>
                                 % endfor
-                                <div style="background-color: #F2F0EF" class="public-video-url-container p-2">
-                                    <a href=${public_video_url} class="d-inline-block align-middle" style="width: 200px">
-                                        <div
-                                            class="text-nowrap"
-                                            style="color: black; overflow: hidden; text-overflow: ellipsis; vertical-align: middle"
-                                        >
-                                            ${public_video_url}
-                                        </div>
+                                <div class="public-video-url-container">
+                                    <a href=${public_video_url} class="public-video-url-link">
+                                        ${public_video_url}
                                     </a>
-                                    <div
-                                        class="public-video-copy-btn btn-link d-inline-block float-right"
-                                        data-url=${public_video_url}
-                                    >
-                                        <span class="icon fa fa-link pr-1"></span>
+                                    <div class="public-video-copy-btn" data-url=${public_video_url}>
+                                        <span class="icon fa fa-link"></span>
                                         <span>${_('Copy')}</span>
                                     </div>
-                                  <span>
                                 </div>
                             </div>
                         </div>
diff --git a/xmodule/static/css-builtin-blocks/VideoBlockDisplay.css b/xmodule/static/css-builtin-blocks/VideoBlockDisplay.css
index 66c0a90cad..7f95111469 100644
--- a/xmodule/static/css-builtin-blocks/VideoBlockDisplay.css
+++ b/xmodule/static/css-builtin-blocks/VideoBlockDisplay.css
@@ -1163,3 +1163,89 @@
     bottom: 0;
     background-color: transparent;
 }
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn {
+    background: var(--primary);
+    font-size: 13px;
+    font-weight: 700;
+    padding: calc(var(--baseline) * 0.35) calc(var(--baseline) * 0.9);
+    color: var(--white);
+    box-shadow: none;
+    text-shadow: none;
+    border-radius: 3px;
+    border: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:hover,
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn:focus {
+    background: var(--btn-brand-focus-background);
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .social-toggle-btn .fa {
+    margin-right: calc(var(--baseline) * 0.4);
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share {
+    padding: calc(var(--baseline) * 0.4);
+    width: 300px;
+    border-radius: 6px;
+    background-color: var(--white);
+    box-shadow: rgba(0, 0, 0, 0.15) 0 0.5rem 1rem, rgba(0, 0, 0, 0.15) 0 0.25rem 0.625rem;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .close-btn {
+    float: right;
+    cursor: pointer;
+    vertical-align: top;
+    display: inline-flex;
+    color: var(--black);
+    text-decoration: none !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link {
+    margin-right: calc(var(--baseline) * 0.2);
+    font-size: 24px;
+    height: 24px;
+    vertical-align: middle;
+    text-decoration: none;
+    display: inline-flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .social-share-link > span > svg {
+    width: auto;
+    height: 24px;
+    vertical-align: top;
+    display: inline-flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-container {
+    padding: calc(var(--baseline) * 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #f2f0ef;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link {
+    color: var(--black);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-url-link:hover {
+    text-decoration: underline;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn {
+    margin-left: calc(var(--baseline) * 0.7);
+    flex-shrink: 0;
+    color: var(--primary);
+    cursor: pointer;
+}
+
+.xmodule_display.xmodule_VideoBlock .wrapper-social-share .container-social-share .public-video-copy-btn:hover {
+    text-decoration: none;
+    color: var(--link-hover-color);
+}