fix: use correct header page background after initial page load

lifinance · Aug 13, 2024 · 75d3471 · 75d3471
1 parent 6936909
commit 75d3471
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
@@ -2,6 +2,7 @@ import { defaultMaxHeight } from '@lifi/widget';
 import { MenuItem, type SelectChangeEvent } from '@mui/material';
 import type { CSSProperties } from 'react';
 import { type ChangeEventHandler, useEffect, useId, useState } from 'react';
+import { useDefaultViewportColor } from '../../../hooks';
 import {
   type Layout,
   useConfig,
@@ -84,6 +85,7 @@ export const LayoutControls = () => {
   const inputId = useId();
   const { config } = useConfig();
   const { viewportColor } = usePlaygroundSettingValues();
+  const { defaultColor } = useDefaultViewportColor();
 
   const { variant } = useConfigVariant();
   const { showMockHeader } = useHeaderAndFooterToolValues();
@@ -138,7 +140,7 @@ export const LayoutControls = () => {
         setHeader({
           position: 'fixed',
           top: showMockHeader ? 48 : 0,
-          pageBackground: viewportColor,
+          pageBackground: viewportColor ?? defaultColor,
           ...(getCurrentConfigTheme()?.container?.borderRadius
             ? {
                 borderTopLeftRadius:

diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts
@@ -207,7 +207,6 @@ export const widgetBaseConfig: WidgetConfig = {
 export const defaultWidgetConfig: Partial<WidgetConfig> = {
   ...widgetBaseConfig,
   appearance: 'light',
-  variant: 'compact',
   theme: {
     palette: {
       primary: {
@@ -220,17 +219,17 @@ export const defaultWidgetConfig: Partial<WidgetConfig> = {
     typography: {
       fontFamily: 'Inter, sans-serif',
     },
-    header: {
-      position: 'fixed',
-      top: 0,
-      borderTopLeftRadius: '16px',
-      borderTopRightRadius: '16px',
-      boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
-      pageBackground: '#F5F5F5',
-    },
+    // header: {
+    //   position: 'fixed',
+    //   top: 0,
+    //   borderTopLeftRadius: '16px',
+    //   borderTopRightRadius: '16px',
+    //   boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
+    //   pageBackground: '#F5F5F5',
+    // },
     container: {
-      display: 'flex',
-      height: '100%',
+      // display: 'flex',
+      // height: '100%',
       boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
       borderRadius: '16px',
     },