fix: popup centrado con estilo Confirm (botones sin iconos, titulo 'Personalizar')

- Dialog centrado (no bottom-sheet) con ThemeProvider
- Botones Cancelar/Guardar en texto plano (sin iconos), mismo patrón que Confirm.tsx
- Recibe valores actuales por props para no depender de store global
- Titulo dice 'Personalizar' solamente
- Cierre se hace con icono X en el title bar

txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx

@@ -1,8 +1,10 @@
 "use client";
 import { useState, useEffect } from "react";
-import { Grid2, IconButton, Dialog, DialogContent, DialogTitle, Box, Divider } from "@mui/material";
+import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import SaveIcon from "@mui/icons-material/Save";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import Button from "@mui/material/Button";
+import { ThemeProvider } from "@emotion/react";
 import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
 import ImagePicker from "@components/ImagePicker/ImagePicker";
 import { useAlert } from "@core/Store/Alert.Store";
@@ -15,32 +17,33 @@ interface HeaderEditPopupProps {
     open: boolean;
     onClose: () => void;
     companyId: string;
+    headerColor: string;
+    headerFontColor: string;
+    headerFontShadowColor: string;
+    headerImage: string;
     onSaved: () => void;
 }
 
 export default function HeaderEditPopup(props: HeaderEditPopupProps) {
-    const { open, onClose, companyId, onSaved } = props;
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved } = props;
     const alert = useAlert();
     const SessionInfo = useSessionStore();
     const organizationHeader = useOrganizationHeaderStore();
 
-    const [headerImage, setHeaderImage] = useState("");
+    const [headerColorState, setHeaderColorState] = useState("");
-    const [headerColor, setHeaderColor] = useState("");
+    const [headerFontColorState, setHeaderFontColorState] = useState("");
-    const [headerFontColor, setHeaderFontColor] = useState("");
+    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
-    const [headerFontShadowColor, setHeaderFontShadowColor] = useState("");
     const [loading, setLoading] = useState(false);
 
-    // Load current values from store when opening
+    // Sync local state when values change externally
     useEffect(() => {
-        if (!open) return;
+        if (open) {
-
+            setHeaderColorState(headerColor || "");
-        // Get current values from the organization header store
+            setHeaderFontColorState(headerFontColor || "");
-        const current = useOrganizationHeaderStore.getState();
+            setHeaderFontShadowColorState(headerFontShadowColor || "");
-        setHeaderColor(current.headerColor || "");
+            setLoading(false);
-        setHeaderFontColor(current.headerFontColor || "");
+        }
-        setHeaderFontShadowColor(current.headerFontShadowColor || "");
+    }, [open, headerColor, headerFontColor, headerFontShadowColor]);
-        setHeaderImage("");
-    }, [open]);
 
     const handleSaveColors = async () => {
         setLoading(true);
@@ -48,18 +51,17 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
         try {
             const updData: UpdateCompanyParams = {
                 id: companyId,
-                headerColor: headerColor,
+                headerColor: headerColorState,
-                headerFontColor: headerFontColor,
+                headerFontColor: headerFontColorState,
-                headerFontShadowColor: headerFontShadowColor,
+                headerFontShadowColor: headerFontShadowColorState,
                 sessionUser: SessionInfo.userId,
             };
 
             await updateOrganizationsById(updData);
 
-            // Update the header store so colors apply immediately
+            organizationHeader.setHeaderColor(headerColorState);
-            organizationHeader.setHeaderColor(headerColor);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
-            organizationHeader.setHeaderFontColor(headerFontColor);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
-            organizationHeader.setHeaderFontShadowColor(headerFontShadowColor);
 
             alert.showSuccess("Colores actualizados");
         } catch (error) {
@@ -70,7 +72,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
         }
     };
 
-    const handleSaveImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) return;
 
@@ -82,18 +84,24 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
             formData.append("sessionUser", SessionInfo.userId);
             formData.append("file", file);
 
-            await uploadHeaderImage(formData);
+            uploadHeaderImage(formData).then(() => {
                 alert.showSuccess("Imagen actualizada");
                 onSaved();
+            }).catch((error) => {
+                const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+                alert.showError(formatted || "Error al guardar la imagen");
+            }).finally(() => {
+                setLoading(false);
+            });
         } catch (error) {
             const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
             alert.showError(formatted || "Error al guardar la imagen");
-        } finally {
             setLoading(false);
         }
     };
 
     return (
+        <ThemeProvider theme={turnosXpressTheme}>
             <Dialog
                 open={open}
                 onClose={onClose}
@@ -101,92 +109,74 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
                 fullWidth
                 PaperProps={{
                     sx: {
-                    borderRadius: "16px 16px 0 0",
+                        borderRadius: 2,
-                    borderTop: "none",
-                    position: "absolute",
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    maxHeight: "85vh",
-                    overflow: "auto",
                     },
                 }}
             >
-            <DialogTitle sx={{ m: 0, p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                <span style={{ fontWeight: "bold" }}>Personalizar header</span>
+                    Personalizar
-                <IconButton onClick={onClose} sx={{ color: (theme) => theme.palette.grey[500] }}>
+                    <IconButton onClick={onClose} size="small">
                         <CloseIcon />
                     </IconButton>
                 </DialogTitle>
 
                 <DialogContent dividers sx={{ p: 3 }}>
                     {/* Colores */}
-                <Box mb={3}>
+                    <Grid2 container spacing={1} mb={3}>
-                    <Box fontWeight="bold" mb={1.5}>Colores</Box>
-                    <Grid2 container spacing={2}>
                         <Grid2 size={4}>
                             <PopoverPicker
                                 placeholder="Fondo"
-                                color={headerColor}
+                                color={headerColorState}
                                 onChange={(color: string) => {
-                                    setHeaderColor(color);
+                                    setHeaderColorState(color);
                                 }}
                             />
                         </Grid2>
                         <Grid2 size={4}>
                             <PopoverPicker
                                 placeholder="Fuente"
-                                color={headerFontColor}
+                                color={headerFontColorState}
                                 onChange={(color: string) => {
-                                    setHeaderFontColor(color);
+                                    setHeaderFontColorState(color);
                                 }}
                             />
                         </Grid2>
                         <Grid2 size={4}>
                             <PopoverPicker
                                 placeholder="Sombra"
-                                color={headerFontShadowColor}
+                                color={headerFontShadowColorState}
                                 onChange={(color: string) => {
-                                    setHeaderFontShadowColor(color);
+                                    setHeaderFontShadowColorState(color);
                                 }}
                             />
                         </Grid2>
                     </Grid2>
-                </Box>
-
-                <Divider sx={{ my: 2 }} />
 
                     {/* Imagen */}
-                <Box mb={3}>
-                    <Box fontWeight="bold" mb={1.5}>Imagen de cabecera</Box>
                     <ImagePicker
                         src={headerImage}
                         alt="Cabecera"
-                        style={{ width: "100%", height: "120px", borderRadius: "8px" }}
+                        style={{ width: "100%", height: 120, borderRadius: 8 }}
                         readOnly={false}
-                        onChange={handleSaveImage}
+                        onChange={handleImageChange}
                         imageSizeSrc="/org-header-size.webp"
                         mbLimit={5}
                     />
-                </Box>
-
-                <Divider sx={{ my: 2 }} />
-
-                {/* Botón guardar */}
-                <Box display="flex" justifyContent="flex-end" gap={2}>
-                    <IconButton color="inherit" onClick={onClose} disabled={loading}>
-                        <CloseIcon />
-                    </IconButton>
-                    <IconButton
-                        color="primary"
-                        onClick={handleSaveColors}
-                        disabled={loading}
-                        sx={{ fontWeight: "bold" }}
-                    >
-                        <SaveIcon />
-                    </IconButton>
-                </Box>
                 </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={handleSaveColors}
+                        autoFocus
+                        color="success"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
             </Dialog>
+        </ThemeProvider>
     );
 }

txclient/src/app/landing/org/[oid]/page.tsx

@@ -591,11 +591,15 @@ export default function OrganizationPublicProfile() {
     return (
         <>
             <HeaderConfProvider />
-            {isOrgAdmin && oid && (
+            {isOrgAdmin && oid && orgData && (
                 <HeaderEditPopup
                     open={showEditPopup}
                     onClose={() => setShowEditPopup(false)}
                     companyId={oid}
+                    headerColor={orgData.headerColor}
+                    headerFontColor={orgData.headerFontColor}
+                    headerFontShadowColor={orgData.headerFontShadowColor}
+                    headerImage={orgData.headerFile}
                     onSaved={() => {
                         setShowEditPopup(false);
                     }}