From 9a78432dc013210fe7c79579d84f427dad441506 Mon Sep 17 00:00:00 2001 From: gopu-bruno Date: Mon, 29 Dec 2025 20:57:15 +0530 Subject: [PATCH] fix: unify hover and keyboard focus styles for collection component (#6544) --- .../Sidebar/Collections/Collection/StyledWrapper.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js index f1dd970f0..aa4e5dd4c 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js @@ -15,9 +15,11 @@ const Wrapper = styled.div` visibility: hidden; } + /* Single source of truth for hover/focus states: background and menu icon visibility */ &:hover, &:focus-within, &.collection-keyboard-focused { + background: ${(props) => props.theme.sidebar.collection.item.hoverBg}; .collection-actions { visibility: visible; background-color: transparent !important; @@ -78,10 +80,11 @@ const Wrapper = styled.div` } &.collection-keyboard-focused { - background: ${(props) => props.theme.sidebar.collection.item.keyboardFocusBg}; + border-top: 1px solid ${(props) => props.theme.sidebar.collection.item.focusBorder}; + border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.focusBorder}; outline: none; - &:hover { + &:hover { background: ${(props) => props.theme.sidebar.collection.item.keyboardFocusBg} !important; } }