From 90c8837c399f58c6bb6fe386cc6a173dedae7942 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 1 Mar 2023 20:35:16 +0800
Subject: [PATCH] Display hover menu backgrounds

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 321b949e2..fa0148ace 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -6,7 +6,7 @@ import { CoverImage } from '../../elements/CoverImage'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useState } from 'react'
-import { DotsThree } from 'phosphor-react'
+import { DotsThree, DotsThreeVertical } from 'phosphor-react'
 import Link from 'next/link'
 
 dayjs.extend(relativeTime)
@@ -160,9 +160,23 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               : null}
           </Box>
           {isHovered ? (
-            <SpanBox css={{ marginLeft: 'auto', mt: '-5px' }}>
-              <DotsThree size={25} color="#ADADAD" />
-            </SpanBox>
+            <Box
+              css={{
+                display: 'flex',
+                marginLeft: 'auto',
+                height: '30px',
+                width: '30px',
+                mt: '-5px',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '1000px',
+                '&:hover': {
+                  bg: '#EBEBEB',
+                },
+              }}
+            >
+              <DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
+            </Box>
           ) : (
             <Box
               css={{