Fixed color of Logo element

ChurchApps · Nov 17, 2024 · 999dc0f · 999dc0f
1 parent f3f6b3f
commit 999dc0f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -10,6 +10,7 @@ import CascadingHoverMenus from "./CascadingMenus/CascadingHoverMenus";
 import CascadingListMenu from "./CascadingMenus/CascadingListMenu";
 import { GlobalStyleInterface, PersonHelper, SectionInterface } from "@/helpers";
 import { redirect } from "next/navigation";
+import { StyleHelper } from "@/helpers/StyleHelper";
 
 
 type Props = {
@@ -167,6 +168,16 @@ export function Header(props: Props) {
     return result;
   }
 
+  const getLogo = () => {
+    if (transparent) {
+      const textColor=StyleHelper.getTextColor(props.sections[0]?.textColor, props.globalStyles, props.churchSettings);
+      const logo = AppearanceHelper.getLogoByTextColor(props.churchSettings?.logoLight || null, props.churchSettings?.logoDark || null, textColor);
+      return logo !== "" ? logo : null;
+    }
+    else return props.churchSettings?.logoLight || null;
+  }
+
+  /*
   const getLogo = () => {
     if (transparent) {
       let textColor = props.sections[0]?.textColor || "#FFF";
@@ -181,7 +192,7 @@ export function Header(props: Props) {
     } else {
       return props.churchSettings?.logoLight || null;
     }
-  };
+  };*/
 
   // const getLogo = () => {
   //   if (transparent) {

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -8,6 +8,7 @@ import { Element } from "./Element";
 import { YoutubeBackground } from "./YoutubeBackground";
 import { ApiHelper, ChurchInterface } from "@churchapps/apphelper";
 import { DraggableWrapper } from "./admin/DraggableWrapper";
+import { StyleHelper } from "@/helpers/StyleHelper";
 
 interface Props {
   first?: boolean,
@@ -25,7 +26,8 @@ export const Section: React.FC<Props> = props => {
   const getElements = () => {
     const result: JSX.Element[] = []
     props.section.elements.forEach(e => {
-      result.push(<Element key={e.id} element={e} onEdit={props.onEdit} onMove={props.onMove} church={props.church} churchSettings={props.churchSettings} textColor={props.section.textColor} />)
+      const textColor = StyleHelper.getTextColor(props.section?.textColor, {}, props.churchSettings);
+      result.push(<Element key={e.id} element={e} onEdit={props.onEdit} onMove={props.onMove} church={props.church} churchSettings={props.churchSettings} textColor={textColor} />)
     });
     return result;
   }

diff --git a/src/components/elementTypes/LogoElement.tsx b/src/components/elementTypes/LogoElement.tsx
@@ -4,10 +4,15 @@ import { AppearanceHelper } from "@churchapps/apphelper";
 interface Props { element: ElementInterface; churchSettings: any; textColor: string; }
 
 export const LogoElement: React.FC<Props> = (props) => {
+
+
+
   let logoUrl = (props.textColor === "light")
     ? AppearanceHelper.getLogoDark(props.churchSettings.appearance ?? props.churchSettings, "/images/logo.png")
     : AppearanceHelper.getLogoLight(props.churchSettings.appearance ?? props.churchSettings, "/images/logo.png");
 
+  console.log("Text Color", props.textColor, logoUrl);
+
   const photo = <img src={logoUrl} alt={props.element.answers?.photoAlt || ""} className="img-fluid" id={"el-" + props.element.id} />
   const photoContent = (props.element.answers?.url) ? <a href={props.element.answers?.url}>{photo}</a> : photo;
 

diff --git a/src/helpers/StyleHelper.ts b/src/helpers/StyleHelper.ts
@@ -1,7 +1,24 @@
+
 import { ElementInterface, SectionInterface } from "./interfaces";
 
 export class StyleHelper {
 
+  static getTextColor = (textColor:string, globalStyles:any, churchSettings:any) => {
+    if (!textColor) textColor = "#FFF";
+    if (textColor.indexOf("var(--") > -1) {
+      if (globalStyles.palette) {
+        const palette = JSON.parse(globalStyles.palette);
+        textColor = textColor.replace("var(--", "").replace(")", "");
+        textColor = palette[textColor];
+      } else {
+        textColor="light";
+        if (textColor.indexOf("dark")>-1 || textColor.indexOf("darkAccent")>-1 || textColor.indexOf("accent")>-1) textColor="dark";
+      }
+      if (!textColor) textColor = "#FFF";
+    }
+    return textColor;
+  };
+
   private static getStyle = (id:string, styles:any) => {
     let result:string[] = [];
     Object.keys(styles).forEach((key:string) => {