From dbb9640776acdae712851f9fb8e685c4101725ea Mon Sep 17 00:00:00 2001
From: Marco Bonomo <marco.bonomo@unguess.io>
Date: Mon, 27 May 2024 17:43:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(bookmark.tsx):=20improve?=
 =?UTF-8?q?=20styling=20for=20active=20bookmarks=20in=20player=20parts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/player/parts/bookmark.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/stories/player/parts/bookmark.tsx b/src/stories/player/parts/bookmark.tsx
index 6fba6278..705d9d9c 100644
--- a/src/stories/player/parts/bookmark.tsx
+++ b/src/stories/player/parts/bookmark.tsx
@@ -44,6 +44,9 @@ const StyledGrabber = styled.div<{ isEnd?: boolean }>`
 const activeBookMark = css`
   height: 250%;
   transform: translateY(-30%);
+  cursor: pointer;
+  z-index: 2;
+  border-radius: 4px;
 
   ${StyledGrabber} {
     display: block;
@@ -56,17 +59,15 @@ const Rect = styled.div<{ hue?: string; isActive?: boolean }>`
   background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
+  color: white;
+  transition: width 0.1s ease;
+
   &:hover {
-    ${activeBookMark}
-    border-radius: 4px;
     background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
-    cursor: pointer;
-    z-index: 2;
+    ${activeBookMark}
   }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
 
-  transition: width 0.1s ease;
+  ${({ isActive }) => isActive && activeBookMark}
 `;
 const StyledTooltip = styled(Tooltip)<{ tooltipColor: string }>`
   margin-bottom: ${({ theme }) => theme.space.sm};