From 2458f575478894a950a4e50232ff13d00cee02e9 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 30 May 2025 15:49:25 -0500
Subject: [PATCH] lightbox: Use icons for control elements.

Fixes #33068.

Co-Authored-By: sammamama <samridhsame@gmail.com>
---
 web/shared/icons/chevron-left.svg  |  3 +++
 web/styles/lightbox.css            | 16 ++++++----------
 web/templates/lightbox_overlay.hbs |  8 +++++---
 3 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 web/shared/icons/chevron-left.svg

diff --git a/web/shared/icons/chevron-left.svg b/web/shared/icons/chevron-left.svg
new file mode 100644
index 0000000000..814afce603
--- /dev/null
+++ b/web/shared/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.4702 3.52973C10.2105 3.27004 9.78947 3.27004 9.52977 3.52973L5.52977 7.52974C5.27008 7.78943 5.27008 8.21049 5.52977 8.47019L9.52977 12.4702C9.78947 12.7299 10.2105 12.7299 10.4702 12.4702C10.7299 12.2105 10.7299 11.7894 10.4702 11.5297L6.94045 7.99996L10.4702 4.47019C10.7299 4.21049 10.7299 3.78943 10.4702 3.52973Z" />
+</svg>
diff --git a/web/styles/lightbox.css b/web/styles/lightbox.css
index c8093444ea..11c8d5dd43 100644
--- a/web/styles/lightbox.css
+++ b/web/styles/lightbox.css
@@ -53,11 +53,8 @@
         flex-shrink: 0;
 
         color: hsl(0deg 0% 100% / 80%);
-        font-size: 2rem;
-        line-height: 1.8rem;
-
-        transform: scaleY(0.75);
-        font-weight: 300;
+        font-size: 14px;
+        line-height: 31px;
 
         opacity: 0;
         pointer-events: none;
@@ -180,13 +177,12 @@
         padding: 12px 20px;
 
         .arrow {
-            padding: 0 10px;
             color: hsl(0deg 0% 100%);
-            font-size: 1.8rem;
-            line-height: 1.6rem;
-            font-weight: 200;
+            /* The thumbnails do not scale, so we express these
+               dimensions as pixels, too. */
+            font-size: 35px;
+            line-height: 25.6px;
 
-            transform: scaleY(2);
             cursor: pointer;
 
             opacity: 0.5;
diff --git a/web/templates/lightbox_overlay.hbs b/web/templates/lightbox_overlay.hbs
index d6411e52d3..b8dc16fdd2 100644
--- a/web/templates/lightbox_overlay.hbs
+++ b/web/templates/lightbox_overlay.hbs
@@ -9,7 +9,9 @@
             <a class="button open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
             <a class="button download" download>{{t "Download" }}</a>
         </div>
-        <div class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">x</span></div>
+        <div class="exit" aria-label="{{t 'Close' }}">
+            <span aria-hidden="true" class="zulip-icon zulip-icon-close"></span>
+        </div>
     </div>
 
     <div class="image-preview no-select">
@@ -18,8 +20,8 @@
     <div class="video-player"></div>
     <div class="player-container"></div>
     <div class="center">
-        <div class="arrow no-select" data-direction="prev">&lt;</div>
+        <div class="arrow no-select" data-direction="prev"><i class="zulip-icon zulip-icon-chevron-left"></i></div>
         <div class="image-list"></div>
-        <div class="arrow no-select" data-direction="next">&gt;</div>
+        <div class="arrow no-select" data-direction="next"><i class="zulip-icon zulip-icon-chevron-right"></i></div>
     </div>
 </div>