Hover on the highlight cards

packages/web/components/nav-containers/HighlightsContainer.tsx

@@ -128,9 +128,8 @@ function HighlightCard(props: HighlightCardProps): JSX.Element {
   const [isOpen, setIsOpen] = useState(false)
   const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
     useState<undefined | string>(undefined)
-  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [labelsTarget, setLabelsTarget] =
+    useState<Highlight | undefined>(undefined)
 
   const viewInReader = useCallback(
     (highlightId: string) => {
@@ -187,9 +186,21 @@ function HighlightCard(props: HighlightCardProps): JSX.Element {
         fontFamily: '$inter',
         padding: '20px',
         marginBottom: '20px',
-        bg: '$thBackground2',
+        bg: '$readerBg',
         borderRadius: '8px',
         cursor: 'pointer',
+        border: '1px solid $thLeftMenuBackground',
+        '&:focus': {
+          outline: 'none',
+          '> div': {
+            outline: 'none',
+            bg: '$thBackgroundActive',
+          },
+        },
+        '&:hover': {
+          bg: '$thBackgroundActive',
+          boxShadow: '$cardBoxShadow',
+        },
       }}
     >
       <Box