From 94d78e68cd72b1aa2dedc841b43b18b319c9791e Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 21 Oct 2024 10:57:30 +0200
Subject: [PATCH] Box shadow on review panel entry hover and focus (#21055)

* Box shadow on review panel entry hover and focus

* fix formatting

* added box-shadow in scss

* css priority

* fix styling lint

GitOrigin-RevId: fdf4ff0fbef6c9a924e83d40703958eb28caaa49
---
 .../stylesheets/app/editor/review-panel-new.less     | 12 ++++++++++--
 .../bootstrap-5/pages/editor/review-panel-new.scss   | 10 ++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
index 20d6c425a4..ac329f176c 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -30,6 +30,10 @@
     margin-left: @spacing-02;
     z-index: 1;
   }
+  .review-panel-entry:hover {
+    // shadow-sm
+    box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
+  }
 
   .review-panel-entry.review-panel-entry-disabled {
     opacity: 0.5;
@@ -47,10 +51,14 @@
     gap: @spacing-04;
   }
 
-  .review-panel-entry-focused,
-  .review-panel-entry-highlighted {
+  .review-panel-entry.review-panel-entry-focused,
+  .review-panel-entry.review-panel-entry-highlighted {
     margin-left: @spacing-01;
     border: 1px solid @blue-50;
+    // shadow-md
+    box-shadow:
+      0px 4px 12px rgba(30, 37, 48, 0.12),
+      0px 2px 4px rgba(30, 37, 48, 0.08);
   }
 
   .review-panel-entry-header {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index 14d2ee2afc..31bf1b4954 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -36,6 +36,10 @@
     z-index: 1;
   }
 
+  .review-panel-entry:hover {
+    @include shadow-sm;
+  }
+
   .review-panel-entry.review-panel-entry-disabled {
     opacity: 0.5;
     pointer-events: none;
@@ -52,10 +56,12 @@
     gap: var(--spacing-04);
   }
 
-  .review-panel-entry-focused,
-  .review-panel-entry-highlighted {
+  .review-panel-entry.review-panel-entry-focused,
+  .review-panel-entry.review-panel-entry-highlighted {
     margin-left: var(--spacing-01);
     border: 1px solid var(--border-active);
+
+    @include shadow-md;
   }
 
   .review-panel-entry-header {