From 889eb922eb11a1c7db1ec1a5118fc3a65cb723a2 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 20:01:28 +0700
Subject: [PATCH] map: move attribution to top-right below Near Me, add Vibed
 with Shakespeare below Quick Snap

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/SpotMap.tsx | 35 +----------------------------------
 src/pages/MapPage.tsx      | 26 ++++++++++++++++++++++----
 2 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/components/SpotMap.tsx b/src/components/SpotMap.tsx
index 055d7f4..de68094 100644
--- a/src/components/SpotMap.tsx
+++ b/src/components/SpotMap.tsx
@@ -1139,40 +1139,7 @@ export function SpotMap({
     <div className={className}>
       <div className="relative h-full w-full">
         <div ref={mapRef} className="h-full w-full rounded-xl" />
-        {/* OpenStreetMap Attribution */}
-        <div className="absolute bottom-2 left-2 z-[1000] bg-black/80 backdrop-blur px-2 py-1 rounded text-[10px] text-gray-400">
-          Map data ©{' '}
-          <a
-            href="https://carto.com/attributions"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-[#ccff00] hover:underline"
-          >
-            CARTO
-          </a>
-          {' '}·{' '}
-          <a
-            href="https://www.openstreetmap.org/copyright"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-[#ccff00] hover:underline"
-          >
-            OSM
-          </a>
-          {showBtcMap && (
-            <>
-              {' • '}
-              <a
-                href="https://btcmap.org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[#f7931a] hover:underline"
-              >
-                BTC Map
-              </a>
-            </>
-          )}
-        </div>
+
       </div>
     </div>
   );
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 46be49a..5fcd383 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1273,8 +1273,8 @@ export default function MapPage() {
                 ))}
               </div>
 
-              {/* Near Me button — floating top-right */}
-              <div className="absolute top-4 right-4 z-[1000]">
+              {/* Near Me button + attribution — floating top-right */}
+              <div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5">
                 <Button
                   onClick={handleNearMe}
                   disabled={nearMeLoading}
@@ -1288,20 +1288,38 @@ export default function MapPage() {
                     <Target className="h-4 w-4 text-[#ccff00]" />
                   )}
                 </Button>
+                {/* Map attribution */}
+                <div className="bg-black/70 backdrop-blur px-2 py-1 rounded text-[10px] text-gray-400 text-right leading-snug">
+                  ©{' '}
+                  <a href="https://carto.com/attributions" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:underline">CARTO</a>
+                  {' · '}
+                  <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:underline">OSM</a>
+                  {showBtcMap && (
+                    <>{' · '}<a href="https://btcmap.org" target="_blank" rel="noopener noreferrer" className="text-[#f7931a] hover:underline">BTC Map</a></>
+                  )}
+                </div>
               </div>
 
               {/* Quick Capture FAB - only show for logged in users on mobile */}
               {user && (
-                <div className="absolute bottom-24 right-4 z-[1000] md:hidden">
+                <div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-1">
                   <Button
                     onClick={() => setShowQuickCamera(true)}
                     className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
                   >
                     <Camera className="h-6 w-6" />
                   </Button>
-                  <span className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
+                  <span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
                     Quick Snap
                   </span>
+                  <a
+                    href="https://shakespeare.diy"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[10px] text-white/40 hover:text-white/70 whitespace-nowrap transition-colors"
+                  >
+                    Vibed with Shakespeare
+                  </a>
                 </div>
               )}
             </>