From 612ea2f5f255098c7c574faa2ed6f2eea700a95c Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Mon, 5 Feb 2024 19:56:43 +0700
Subject: [PATCH] Added default background color to preview iframes (#19651)

fixes DES-88

- preview iframes should have default background as they simulate
browser windows
- transparent background causes unexpected inconsistency when themes
don't have default background color set
---
 .../settings/site/announcementBar/AnnouncementBarPreview.tsx    | 2 +-
 .../components/settings/site/designAndBranding/ThemePreview.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/announcementBar/AnnouncementBarPreview.tsx b/apps/admin-x-settings/src/components/settings/site/announcementBar/AnnouncementBarPreview.tsx
index 6bd8ae2737..d8b90310c3 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcementBar/AnnouncementBarPreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcementBar/AnnouncementBarPreview.tsx
@@ -71,7 +71,7 @@ const AnnouncementBarPreview: React.FC<AnnouncementBarSettings> = ({announcement
     return (
         <IframeBuffering
             addDelay={true}
-            className="absolute h-[110%] w-[110%] origin-top-left scale-[.90909] max-[1600px]:h-[130%] max-[1600px]:w-[130%] max-[1600px]:scale-[.76923]"
+            className="absolute h-[110%] w-[110%] origin-top-left scale-[.90909] bg-white max-[1600px]:h-[130%] max-[1600px]:w-[130%] max-[1600px]:scale-[.76923]"
             generateContent={injectContentIntoIframe}
             height='100%'
             parentClassName="relative h-full w-full"
diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
index ce155836b4..aafa37ebdd 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
@@ -105,7 +105,7 @@ const ThemePreview: React.FC<ThemePreviewProps> = ({settings,url}) => {
     return (
         <IframeBuffering
             addDelay={false}
-            className="absolute h-[110%] w-[110%] origin-top-left scale-[.90909] max-[1600px]:h-[130%] max-[1600px]:w-[130%] max-[1600px]:scale-[.76923]"
+            className="absolute h-[110%] w-[110%] origin-top-left scale-[.90909] bg-white max-[1600px]:h-[130%] max-[1600px]:w-[130%] max-[1600px]:scale-[.76923]"
             generateContent={injectContentIntoIframe}
             height='100%'
             parentClassName="relative h-full w-full"