Cleaned up /my page look.

src/app/[sdSlug]/my/[pageSlug]/components/TabsClient.tsx

@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
 
 import { UserHelper } from "@churchapps/apphelper";
 import { ApiHelper } from "@churchapps/apphelper";
+import { Permissions } from "@churchapps/helpers";
 import { PersonHelper } from "@/helpers"
 import UserContext from "@/context/UserContext";
 import Link from "next/link";
@@ -36,7 +37,8 @@ export const TabsClient = (props: Props) => {
       showPlans = false,
       showDirectory = memberStatus === "member" || memberStatus === "staff",
       showLessons = classRoooms.length > 0,
-      showCheckin = campuses.length > 0;
+      showCheckin = campuses.length > 0,
+      showAdmin = UserHelper.checkAccess(Permissions.membershipApi.people.view);
 
     if (context.userChurch) {
       showMyGroups = context.userChurch?.groups?.length > 0;
@@ -52,15 +54,14 @@ export const TabsClient = (props: Props) => {
     if (showCheckin) tabs.push({url:"/my/checkin", label:"Check-in"});
     if (showLessons) tabs.push({url:"/my/lessons", label:"Lessons"});
     if (showDonations) tabs.push({url:"/my/donate", label:"Donations"});
+    if (showAdmin) tabs.push({url:`https://admin.b1.church/login?jwt=${context.userChurch.jwt}&churchId=${context.userChurch.church.id}&returnUrl=/`, label:"Admin"});
     return tabs;
   }
 
   useEffect(() => { loadData() }, [context.userChurch])
 
 
-  const getItem = (tab:any) =>
-    //if (tab.key === selectedTab) return (<li className="active"><a href="about:blank" onClick={(e) => { e.preventDefault(); setSelectedTab(tab.key); }}><Icon>{tab.icon}</Icon> {tab.label}</a></li>)
-    (<li><Link href={tab.url} data-testid={`my-tab-${tab.label.toLowerCase()}`} aria-label={`Go to ${tab.label}`}>{tab.label}</Link></li>)
+  const getItem = (tab:any) => (<li><Link href={tab.url} data-testid={`my-tab-${tab.label.toLowerCase()}`} aria-label={`Go to ${tab.label}`}>{tab.label}</Link></li>)
 
   return <ul data-testid="my-portal-tabs" aria-label="Member portal navigation">
     {getTabs().map((tab, index) => getItem(tab))}

src/components/Header.tsx

@@ -50,6 +50,7 @@ export function Header(props: Props) {
   const [open, setOpen] = useState(false);
   const [menuAnchor, setMenuAnchor] = useState<any>(null);
   const [showLogin, setShowLogin] = useState<boolean>(false);
+  const [logoError, setLogoError] = useState(false);
   const pathname = usePathname()
   const context = useContext(UserContext);
 
@@ -87,6 +88,11 @@ export function Header(props: Props) {
     }
   }, [props.config?.church?.id, props.overlayContent]);
 
+  // Reset logo error state when logo URL changes
+  useEffect(() => {
+    setLogoError(false);
+  }, [props.config?.appearance?.logoLight, props.config?.appearance?.logoDark, transparent]);
+
   // const pathName = usePathname();
   // const returnUrl = (pathName === "/") ? "" :  `?returnUrl=${encodeURIComponent(pathName)}`;
 
@@ -238,12 +244,19 @@ export function Header(props: Props) {
     //:  "transparent";
   }
 
+  const logo = getLogo();
+  const showLogoImage = logo && !logoError;
+
   return (
     <div>
       <AppBar id="navbar" position={(props.editMode) ? "relative" : "fixed"} className={appBarClass} style={(props.editMode) ? { marginBottom: 0 } : {}}>
         <Container style={{ height: 71 }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Link href="/" data-testid="header-logo-link" aria-label="Go to homepage"><img src={getLogo()} alt={props.config?.church.name} id="headerLogo" data-testid="header-logo" /></Link>
+            <Link href="/" data-testid="header-logo-link" aria-label="Go to homepage">
+              {showLogoImage
+                ? (<img src={logo} alt={props.config?.church.name} id="headerLogo" data-testid="header-logo" onError={() => setLogoError(true)} />)
+                : (<Box component="span" id="headerLogo" data-testid="header-church-name" sx={{ fontSize: "1.5rem", fontWeight: 600, display: "inline-block", lineHeight: 1 }}>{props.config?.church.name}</Box>)}
+            </Link>
             <Box sx={{ display: { xs: "none", md: "flex" }, alignItems: "center", whiteSpace: "nowrap", }}>
               {getLinks()}
               {userAction}

src/components/layouts/Footer.tsx

@@ -19,7 +19,7 @@ export function Footer(props: Props) {
   }
   else {
     let logoUrl = AppearanceHelper.getLogoDark(props.config?.appearance, "/images/logo.png");
-    const photo = <img src={logoUrl} className="img-fluid" id={"el-footer-logo"} alt={props.config?.church.name} />
+    const photo = <img src={logoUrl} className="img-fluid" id={"el-footer-logo"} alt={props.config?.church.name} style={{ maxWidth: "200px" }} />
 
     return (
       <>