From d1704deb525e9ff0c9c634ec31f7bf85159c992e Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 11 Mar 2025 06:03:43 +0000
Subject: [PATCH] onboarding_steps: Dim background of navigation tour video.

---
 web/src/onboarding_steps.ts | 2 ++
 web/styles/modal.css        | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/web/src/onboarding_steps.ts b/web/src/onboarding_steps.ts
index c780ac6264..89e964edeb 100644
--- a/web/src/onboarding_steps.ts
+++ b/web/src/onboarding_steps.ts
@@ -135,12 +135,14 @@ function show_navigation_tour_video(navigation_tour_video_url: string | null): v
                             "hidden",
                         );
                         video_ended_button_visible = false;
+                        $video.removeClass("dimmed-background");
                     }
                 });
 
                 $video.on("ended", () => {
                     $("#navigation-tour-video-ended-button-wrapper").css("visibility", "visible");
                     video_ended_button_visible = true;
+                    $video.addClass("dimmed-background");
                     $skip_video_button.css("visibility", "hidden");
                     $watch_later_button.css("visibility", "hidden");
                     // Exit fullscreen to make the 'video-ended-button-wrapper' button visible.
diff --git a/web/styles/modal.css b/web/styles/modal.css
index e6a9f26305..cc7971914a 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -705,6 +705,10 @@
         aspect-ratio: 16 / 9;
         cursor: pointer;
         border: 1px solid hsl(0deg 0% 50%);
+
+        &.dimmed-background {
+            opacity: 0.4;
+        }
     }
 
     #navigation-tour-video-ended-button-wrapper {