refactor: rename project from wedding-photo-sharing to PicPeak

- Update Docker image names and network configurations
- Rename package.json project names to picpeak-backend/frontend
- Update CI/CD configurations (Drone CI and GitHub Actions)
- Update documentation and setup scripts
- Update application branding in source code
- Change default database name to picpeak
- Update PM2 ecosystem config

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

Co-Authored-By: Claude <[email protected]>

frontend/src/components/gallery/GalleryLayout.tsx

@@ -29,6 +29,7 @@ interface GalleryLayoutProps {
   onDownloadAll?: () => void;
   isDownloading?: boolean;
   headerExtra?: React.ReactNode;
+  menuButton?: React.ReactNode;
   children: React.ReactNode;
 }
 
@@ -41,6 +42,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   onDownloadAll,
   isDownloading = false,
   headerExtra,
+  menuButton,
   children,
 }) => {
   const { t } = useTranslation();
@@ -65,6 +67,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               <div className="flex items-center justify-between">
                 {/* Left side - Menu button and other header extras */}
                 <div className="flex items-center gap-3">
+                  {menuButton}
                   {headerExtra}
                 </div>
                 
@@ -106,8 +109,15 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
         {!isNonGridLayout && theme.galleryLayout !== 'hero' && (
           <div className="container py-3">
             <div className="flex items-center justify-between gap-2 sm:gap-4">
-              {/* Left side - Logo and menu button on mobile */}
+              {/* Left side - Menu button, Logo */}
               <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0">
+                {/* Menu button */}
+                {menuButton && (
+                  <div className="flex-shrink-0">
+                    {menuButton}
+                  </div>
+                )}
+                
                 {/* Logo - Show custom logo or fallback to PicPeak logo */}
                 <div className="flex-shrink-0">
                   <img 
@@ -119,11 +129,6 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                     className="h-8 sm:h-10 lg:h-12 w-auto object-contain"
                   />
                 </div>
-                
-                {/* Menu button on mobile */}
-                <div className="flex-shrink-0 sm:hidden">
-                  {headerExtra}
-                </div>
               </div>
               
               {/* Center - Event info */}
@@ -154,10 +159,12 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               
               {/* Right side - Action buttons */}
               <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-                {/* Menu button on desktop */}
-                <div className="hidden sm:block">
-                  {headerExtra}
-                </div>
+                {/* Extra header items (upload button, etc.) */}
+                {headerExtra && (
+                  <div className="hidden sm:block">
+                    {headerExtra}
+                  </div>
+                )}
                 
                 {/* Download all button - hidden on mobile when sidebar is shown */}
                 {showDownloadAll && onDownloadAll && (
@@ -214,7 +221,8 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
           <div className="container py-3">
             <div className="flex items-center justify-between">
               {/* Left side - Menu button */}
-              <div className="flex-shrink-0">
+              <div className="flex items-center gap-3">
+                {menuButton}
                 {headerExtra}
               </div>
               
@@ -273,21 +281,27 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                     '/picpeak-logo-transparent.png'
                   } 
                   alt={brandingSettings?.company_name || 'PicPeak'}
-                  className="h-16 sm:h-20 lg:h-24 w-auto object-contain mx-auto filter brightness-0 invert"
+                  className="h-16 sm:h-20 lg:h-24 w-auto object-contain mx-auto"
+                  style={{ 
+                    filter: 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+                  }}
                 />
               </div>
               
               {/* Event Name */}
               <h1 
                 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4"
-                style={{ fontFamily: headingFontFamily }}
+                style={{ 
+                  fontFamily: headingFontFamily,
+                  textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)'
+                }}
               >
                 {event.event_name}
               </h1>
               
               {/* Event Details */}
               {(event.event_date || event.expires_at) && (
-                <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-white/80">
+                <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-white/80" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)' }}>
                   {event.event_date && (
                     <span className="flex items-center text-lg">
                       <Calendar className="w-5 h-5 mr-2" />