Merge pull request #1843 from benphelps/fix/issue-1828

Fix: apply cardBlur to header boxed / boxedWidgets

src/components/widgets/widget/container.jsx

@@ -7,6 +7,10 @@ import Raw from "./raw";
 
 export function getAllClasses(options, additionalClassNames = '') {
   if (options?.style?.header === "boxedWidgets") {
+    if (options?.style?.cardBlur !== undefined) {
+      additionalClassNames = additionalClassNames.concat(additionalClassNames, ` backdrop-blur${options.style.cardBlur.length ? '-' : ""}${options.style.cardBlur}`)
+    }
+
     return classNames(
       "flex flex-col justify-center first:ml-0 ml-2 mr-2",
       "mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3 pr-3",

src/pages/index.jsx

@@ -257,8 +257,9 @@ function Home({ initialSettings }) {
       <div className="relative container m-auto flex flex-col justify-start z-10 h-full">
         <div
           className={classNames(
-            "flex flex-row flex-wrap  justify-between",
-            headerStyles[headerStyle]
+            "flex flex-row flex-wrap justify-between",
+            headerStyles[headerStyle],
+            initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
           )}
         >
           <QuickLaunch
@@ -274,7 +275,7 @@ function Home({ initialSettings }) {
               {widgets
                 .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                 .map((widget, i) => (
-                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false}} />
+                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false, cardBlur: initialSettings.cardBlur }} />
                 ))}
 
               <div className={classNames(
@@ -284,7 +285,7 @@ function Home({ initialSettings }) {
                 {widgets
                   .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
-                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true}} />
+                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true, cardBlur: initialSettings.cardBlur }} />
                   ))}
               </div>
             </>