Enhance email templates with clickable links, branding, and improved styling

- Add clickable gallery links in all email templates
- Include application logo in email header and footer (custom or PicPeak default)
- Redesign emails with professional styling matching gallery login page
  - Gray background with white content box
  - PicPeak green header with centered logo
  - Clean typography and proper spacing
  - Responsive design for mobile devices
  - Styled call-to-action buttons
  - Footer with branding and copyright
- Update email processor to fetch branding settings dynamically
- Use proper API URLs for logo images in emails

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/admin/ThemeCustomizerEnhanced.tsx

@@ -13,6 +13,7 @@ interface ThemeCustomizerEnhancedProps {
   onPresetChange?: (presetName: string) => void;
   isPreviewMode?: boolean;
   showGalleryLayouts?: boolean;
+  hideActions?: boolean;
 }
 
 const layoutIcons: Record<GalleryLayoutType, React.ReactNode> = {
@@ -24,14 +25,7 @@ const layoutIcons: Record<GalleryLayoutType, React.ReactNode> = {
   mosaic: <LayoutGrid className="w-5 h-5" />
 };
 
-const layoutDescriptions: Record<GalleryLayoutType, string> = {
-  grid: 'Classic grid layout with consistent photo sizes',
-  masonry: 'Pinterest-style layout with varied heights',
-  carousel: 'Full-screen slideshow with navigation',
-  timeline: 'Photos organized by date',
-  hero: 'Featured image with grid below',
-  mosaic: 'Artistic layout with mixed sizes'
-};
+// Layout descriptions will use translation keys
 
 export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = ({
   value,
@@ -39,10 +33,10 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
   presetName = 'default',
   onPresetChange,
   isPreviewMode = false,
-  showGalleryLayouts = true
+  showGalleryLayouts = true,
+  hideActions = false
 }) => {
   const { t } = useTranslation();
-  t; // Use to prevent unused warning
   const [localTheme, setLocalTheme] = useState<ThemeConfig>(value);
   const [selectedPreset, setSelectedPreset] = useState(presetName);
   const [customCss, setCustomCss] = useState(value.customCss || '');
@@ -60,6 +54,13 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
   const handleChange = (key: keyof ThemeConfig, newValue: any) => {
     const updated = { ...localTheme, [key]: newValue };
     setLocalTheme(updated);
+    
+    // When any change is made, mark it as custom
+    if (selectedPreset !== 'custom' && onPresetChange) {
+      setSelectedPreset('custom');
+      onPresetChange('custom');
+    }
+    
     if (isPreviewMode) {
       onChange(updated);
     }
@@ -124,7 +125,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
       <Card className="p-6">
         <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
           <Sparkles className="w-5 h-5" />
-          Theme Presets
+          {t('branding.themePresets')}
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {Object.entries(GALLERY_THEME_PRESETS).map(([key, theme]) => (
@@ -179,7 +180,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
         <Card className="p-6">
           <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
             <Layout className="w-5 h-5" />
-            Gallery Layout
+            {t('branding.galleryLayout')}
           </h3>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {(Object.keys(layoutIcons) as GalleryLayoutType[]).map((layout) => (
@@ -198,7 +199,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                   </div>
                   <span className="font-medium text-sm capitalize">{layout}</span>
                   <span className="text-xs text-neutral-600 mt-1">
-                    {layoutDescriptions[layout]}
+                    {t(`branding.layoutDescriptions.${layout}`)}
                   </span>
                 </div>
                 {localTheme.galleryLayout === layout && (
@@ -211,38 +212,38 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
           {/* Layout-specific settings */}
           {localTheme.galleryLayout && (
             <div className="mt-6 space-y-4 pt-6 border-t border-neutral-200">
-              <h4 className="font-medium text-sm text-neutral-700">Layout Settings</h4>
+              <h4 className="font-medium text-sm text-neutral-700">{t('branding.layoutSettings')}</h4>
               
               {/* Common settings */}
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 mb-2">
-                    Photo Spacing
+                    {t('branding.photoSpacing')}
                   </label>
                   <select
                     value={localTheme.gallerySettings?.spacing || 'normal'}
                     onChange={(e) => updateGallerySettings('spacing', e.target.value)}
                     className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                   >
-                    <option value="tight">Tight</option>
-                    <option value="normal">Normal</option>
-                    <option value="relaxed">Relaxed</option>
+                    <option value="tight">{t('branding.spacing.tight')}</option>
+                    <option value="normal">{t('branding.spacing.normal')}</option>
+                    <option value="relaxed">{t('branding.spacing.relaxed')}</option>
                   </select>
                 </div>
 
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 mb-2">
-                    Photo Animation
+                    {t('branding.photoAnimation')}
                   </label>
                   <select
                     value={localTheme.gallerySettings?.photoAnimation || 'fade'}
                     onChange={(e) => updateGallerySettings('photoAnimation', e.target.value)}
                     className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                   >
-                    <option value="none">None</option>
-                    <option value="fade">Fade</option>
-                    <option value="scale">Scale</option>
-                    <option value="slide">Slide</option>
+                    <option value="none">{t('branding.animation.none')}</option>
+                    <option value="fade">{t('branding.animation.fade')}</option>
+                    <option value="scale">{t('branding.animation.scale')}</option>
+                    <option value="slide">{t('branding.animation.slide')}</option>
                   </select>
                 </div>
               </div>
@@ -251,11 +252,11 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
               {localTheme.galleryLayout === 'grid' && (
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 mb-2">
-                    Columns
+                    {t('branding.columns')}
                   </label>
                   <div className="grid grid-cols-3 gap-4">
                     <div>
-                      <label className="text-xs text-neutral-600">Mobile</label>
+                      <label className="text-xs text-neutral-600">{t('branding.mobile')}</label>
                       <Input
                         type="number"
                         min="1"
@@ -268,7 +269,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                       />
                     </div>
                     <div>
-                      <label className="text-xs text-neutral-600">Tablet</label>
+                      <label className="text-xs text-neutral-600">{t('branding.tablet')}</label>
                       <Input
                         type="number"
                         min="2"
@@ -281,7 +282,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                       />
                     </div>
                     <div>
-                      <label className="text-xs text-neutral-600">Desktop</label>
+                      <label className="text-xs text-neutral-600">{t('branding.desktop')}</label>
                       <Input
                         type="number"
                         min="3"
@@ -308,13 +309,13 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                         onChange={(e) => updateGallerySettings('carouselAutoplay', e.target.checked)}
                         className="rounded"
                       />
-                      <span className="text-sm font-medium text-neutral-700">Enable Autoplay</span>
+                      <span className="text-sm font-medium text-neutral-700">{t('branding.enableAutoplay')}</span>
                     </label>
                   </div>
                   {localTheme.gallerySettings?.carouselAutoplay && (
                     <div>
                       <label className="block text-sm font-medium text-neutral-700 mb-2">
-                        Autoplay Interval (seconds)
+                        {t('branding.autoplayInterval')}
                       </label>
                       <Input
                         type="number"
@@ -332,16 +333,16 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
               {localTheme.galleryLayout === 'timeline' && (
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 mb-2">
-                    Group Photos By
+                    {t('branding.groupPhotosBy')}
                   </label>
                   <select
                     value={localTheme.gallerySettings?.timelineGrouping || 'day'}
                     onChange={(e) => updateGallerySettings('timelineGrouping', e.target.value)}
                     className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
                   >
-                    <option value="day">Day</option>
-                    <option value="week">Week</option>
-                    <option value="month">Month</option>
+                    <option value="day">{t('branding.grouping.day')}</option>
+                    <option value="week">{t('branding.grouping.week')}</option>
+                    <option value="month">{t('branding.grouping.month')}</option>
                   </select>
                 </div>
               )}
@@ -354,12 +355,12 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
       <Card className="p-6">
         <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
           <Palette className="w-5 h-5" />
-          Colors
+          {t('branding.colors')}
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-700 mb-2">
-              Primary Color
+              {t('branding.primaryColor')}
             </label>
             <div className="flex gap-2">
               <input
@@ -379,7 +380,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
 
           <div>
             <label className="block text-sm font-medium text-neutral-700 mb-2">
-              Accent Color
+              {t('branding.accentColor')}
             </label>
             <div className="flex gap-2">
               <input
@@ -399,7 +400,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
 
           <div>
             <label className="block text-sm font-medium text-neutral-700 mb-2">
-              Background Color
+              {t('branding.backgroundColor')}
             </label>
             <div className="flex gap-2">
               <input
@@ -419,7 +420,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
 
           <div>
             <label className="block text-sm font-medium text-neutral-700 mb-2">
-              Text Color
+              {t('branding.textColor')}
             </label>
             <div className="flex gap-2">
               <input
@@ -443,13 +444,13 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
       <Card className="p-6">
         <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
           <Type className="w-5 h-5" />
-          Typography & Style
+          {t('branding.typographyAndStyle')}
         </h3>
         <div className="space-y-4">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Body Font
+                {t('branding.bodyFont')}
               </label>
               <select
                 value={localTheme.fontFamily || 'Inter, sans-serif'}
@@ -468,14 +469,14 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
 
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Heading Font
+                {t('branding.headingFont')}
               </label>
               <select
                 value={localTheme.headingFontFamily || localTheme.fontFamily || 'Inter, sans-serif'}
                 onChange={(e) => handleChange('headingFontFamily', e.target.value)}
                 className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
               >
-                <option value="">Same as body</option>
+                <option value="">{t('branding.sameAsBody')}</option>
                 <option value="'Playfair Display', serif">Playfair Display</option>
                 <option value="'Montserrat', sans-serif">Montserrat</option>
                 <option value="Georgia, serif">Georgia</option>
@@ -487,64 +488,64 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Font Size
+                {t('branding.fontSize')}
               </label>
               <select
                 value={localTheme.fontSize || 'normal'}
                 onChange={(e) => handleChange('fontSize', e.target.value)}
                 className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
               >
-                <option value="small">Small</option>
-                <option value="normal">Normal</option>
-                <option value="large">Large</option>
+                <option value="small">{t('branding.fontSizes.small')}</option>
+                <option value="normal">{t('branding.fontSizes.normal')}</option>
+                <option value="large">{t('branding.fontSizes.large')}</option>
               </select>
             </div>
 
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Border Radius
+                {t('branding.borderRadius')}
               </label>
               <select
                 value={localTheme.borderRadius || 'md'}
                 onChange={(e) => handleChange('borderRadius', e.target.value)}
                 className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
               >
-                <option value="none">None</option>
-                <option value="sm">Small</option>
-                <option value="md">Medium</option>
-                <option value="lg">Large</option>
+                <option value="none">{t('branding.borderRadiusOptions.none')}</option>
+                <option value="sm">{t('branding.borderRadiusOptions.small')}</option>
+                <option value="md">{t('branding.borderRadiusOptions.medium')}</option>
+                <option value="lg">{t('branding.borderRadiusOptions.large')}</option>
               </select>
             </div>
 
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Shadow Style
+                {t('branding.shadowStyle')}
               </label>
               <select
                 value={localTheme.shadowStyle || 'normal'}
                 onChange={(e) => handleChange('shadowStyle', e.target.value)}
                 className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
               >
-                <option value="none">None</option>
-                <option value="subtle">Subtle</option>
-                <option value="normal">Normal</option>
-                <option value="dramatic">Dramatic</option>
+                <option value="none">{t('branding.shadowOptions.none')}</option>
+                <option value="subtle">{t('branding.shadowOptions.subtle')}</option>
+                <option value="normal">{t('branding.shadowOptions.normal')}</option>
+                <option value="dramatic">{t('branding.shadowOptions.dramatic')}</option>
               </select>
             </div>
 
             <div>
               <label className="block text-sm font-medium text-neutral-700 mb-2">
-                Background
+                {t('branding.backgroundPattern')}
               </label>
               <select
                 value={localTheme.backgroundPattern || 'none'}
                 onChange={(e) => handleChange('backgroundPattern', e.target.value)}
                 className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
               >
-                <option value="none">None</option>
-                <option value="dots">Dots</option>
-                <option value="grid">Grid</option>
-                <option value="waves">Waves</option>
+                <option value="none">{t('branding.backgroundOptions.none')}</option>
+                <option value="dots">{t('branding.backgroundOptions.dots')}</option>
+                <option value="grid">{t('branding.backgroundOptions.grid')}</option>
+                <option value="waves">{t('branding.backgroundOptions.waves')}</option>
               </select>
             </div>
           </div>
@@ -553,35 +554,44 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
 
       {/* Custom CSS */}
       <Card className="p-6">
-        <h3 className="text-lg font-semibold text-neutral-900 mb-4">Custom CSS</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 mb-4">{t('branding.customCSS')}</h3>
         <textarea
           value={customCss}
-          onChange={(e) => setCustomCss(e.target.value)}
+          onChange={(e) => {
+            setCustomCss(e.target.value);
+            // Mark as custom when CSS is added
+            if (e.target.value && selectedPreset !== 'custom' && onPresetChange) {
+              setSelectedPreset('custom');
+              onPresetChange('custom');
+            }
+          }}
           placeholder="/* Add custom CSS here */"
           className="w-full h-32 px-3 py-2 font-mono text-sm border border-neutral-300 rounded-lg"
         />
         <p className="mt-2 text-sm text-neutral-600">
-          Advanced: Add custom CSS to further customize the appearance
+          {t('branding.customCSSHelp')}
         </p>
       </Card>
 
       {/* Actions */}
-      <div className="flex items-center justify-end gap-3">
-        <Button
-          variant="outline"
-          leftIcon={<RotateCcw className="w-4 h-4" />}
-          onClick={handleReset}
-        >
-          Reset to Default
-        </Button>
-        <Button
-          variant="primary"
-          leftIcon={<Palette className="w-4 h-4" />}
-          onClick={handleApply}
-        >
-          Apply Theme
-        </Button>
-      </div>
+      {!hideActions && (
+        <div className="flex items-center justify-end gap-3">
+          <Button
+            variant="outline"
+            leftIcon={<RotateCcw className="w-4 h-4" />}
+            onClick={handleReset}
+          >
+            {t('branding.resetToDefault')}
+          </Button>
+          <Button
+            variant="primary"
+            leftIcon={<Palette className="w-4 h-4" />}
+            onClick={handleApply}
+          >
+            {t('branding.applyTheme')}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };