From 723bf909515487f928394f57ccdccf246bb02b05 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           | 40 ++++----------
 xmodule/assets/video/_display.scss | 84 +++++++++++++++++++++++++++++-
 2 files changed, 94 insertions(+), 30 deletions(-)

diff --git a/lms/templates/video.html b/lms/templates/video.html
index 6401f17238a6..04d482bf5802 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -66,55 +66,37 @@ <h4 class="hd hd-5">${_('Video')}</h4>
                     % 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>
-
                                 <br />
                                 % for sharing_site_info in sharing_sites_info:
                                 <a
-                                    class="btn-link social-share-link"
+                                    class="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"
                                 >
                                     <span class="icon fa ${sharing_site_info['fa_icon_name']}" aria-hidden="true"></span>
                                     <span class="sr">${_("Share on {site}").format(site=sharing_site_info['name'])}</span>
                                 </a>
                                 % endfor
                                 <br />
-                                <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/assets/video/_display.scss b/xmodule/assets/video/_display.scss
index 1a28e9150df7..8a30f5d031c6 100644
--- a/xmodule/assets/video/_display.scss
+++ b/xmodule/assets/video/_display.scss
@@ -106,6 +106,88 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
   }
 
+  .wrapper-social-share {
+    .social-toggle-btn {
+      background: $primary;
+      font-size: 13px;
+      font-weight: 700;
+      padding: ($baseline * .35) ($baseline * .9);
+      border: 1px solid #d2c9c9;
+      border-radius: 0;
+      color: $white;
+      box-shadow: none;
+      text-shadow: none;
+
+        &:hover {
+          background: $link-hover;
+        }
+
+        .fa {
+          @include margin-right($baseline * .4);
+        }
+    }
+
+    .close-btn {
+      color: $black;
+    }
+
+    .container-social-share {
+      @include padding($baseline * .4);
+
+      width: 300px;
+      border-radius: 6px;
+      background-color: $white;
+      box-shadow: rgba($black, .15) 0 .5rem 1rem, rgba($black, .15) 0 .25rem .625rem;
+
+      .close-btn {
+        float: right;
+        cursor: pointer;
+      }
+
+      .social-share-link {
+        @include margin-right($baseline * .2);
+
+        font-size: 24px;
+        text-decoration: none;
+        display: inline-flex;
+      }
+
+      .public-video-url-container {
+        @include padding($baseline * .4);
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #f2f0ef;
+      }
+
+      .public-video-url-link {
+        color: $black;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        white-space: nowrap;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .public-video-copy-btn {
+        @include margin-left($baseline * .7);
+
+        flex-shrink: 0;
+        color: $primary;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: none;
+          color: $link-hover;
+        }
+      }
+    }
+  }
+
   .wrapper-downloads {
     @include media-breakpoint-up(md) {
       display: flex;
@@ -162,7 +244,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   .wrapper-transcript-feedback {
     display: none;
-    
+
     .transcript-feedback-buttons {
       display: flex;
     }