From 7e1ea69939ffce39e2248a68b7811bc2a704f625 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 29 Jul 2023 22:51:14 -0400
Subject: [PATCH] fix: Transparent thumbnails show document behind in hover
 previews

---
 app/components/HoverPreview/Components.tsx       | 2 +-
 app/components/HoverPreview/HoverPreviewLink.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/HoverPreview/Components.tsx b/app/components/HoverPreview/Components.tsx
index 9e2967c05..55ee05abb 100644
--- a/app/components/HoverPreview/Components.tsx
+++ b/app/components/HoverPreview/Components.tsx
@@ -56,7 +56,7 @@ export const CardContent = styled.div`
 // &:after — gradient mask for overflow text
 export const Card = styled.div<{ fadeOut?: boolean; $borderRadius?: string }>`
   backdrop-filter: blur(10px);
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   padding: ${CARD_PADDING}px;
   width: ${CARD_WIDTH}px;
   font-size: 0.9em;
diff --git a/app/components/HoverPreview/HoverPreviewLink.tsx b/app/components/HoverPreview/HoverPreviewLink.tsx
index 702fea52e..41fa4a1ab 100644
--- a/app/components/HoverPreview/HoverPreviewLink.tsx
+++ b/app/components/HoverPreview/HoverPreviewLink.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import {
   Preview,
@@ -44,6 +45,7 @@ const Thumbnail = styled.img`
   object-fit: cover;
   max-width: ${CARD_WIDTH}px;
   height: ${THUMBNAIL_HEIGHT}px;
+  background: ${s("menuBackground")};
 `;
 
 export default HoverPreviewLink;