lil ui tweaks

src/components/FaviconIcon.tsx

···
+// FaviconIcon.tsx (Conceptual Component Update)
+
 import { useState } from "react";
-import { Globe, Settings as SettingsIcon } from "lucide-react";
+import { Globe } from "lucide-react";
 
 interface FaviconIconProps {
   url: string;
   alt: string;
   className?: string;
+  useButtonStyling?: boolean; // ⬅️ NEW OPTIONAL PROP
 }
 
-export default function FaviconIcon({ url, alt, className }: FaviconIconProps) {
+export default function FaviconIcon({
+  url,
+  alt,
+  className,
+  useButtonStyling = false,
+}: FaviconIconProps) {
+  const [error, setError] = useState(false);
   const [loaded, setLoaded] = useState(false);
-  const [error, setError] = useState(false);
+
+  // Define the base classes (applied to the image itself)
+  const imageClasses = "w-full h-full object-contain";
+
+  // Define the special button classes conditionally
+  const boundaryClasses = useButtonStyling
+    ? "bg-white p-1 rounded-full shadow-md flex items-center justify-center"
+    : ""; // No special styling by default
+
+  // Combine the passed-in class name (for size) with the conditional boundary classes
+  const finalWrapperClasses = `${className || "w-4 h-4"} ${boundaryClasses}`;
 
   if (error) {
     return (
-      <Globe
-        className={
-          className || "w-4 h-4 text-neutral-400 dark:text-neutral-500"
-        }
-      />
+      <div className={`${finalWrapperClasses}`}>
+        <Globe className={`${imageClasses} text-neutral-500`} />
+      </div>
     );
   }
 
   return (
-    <>
-      {/* Fallback/Placeholder */}
+    // Use the final combined classes on the wrapper
+    <div className={finalWrapperClasses}>
+      {/* Placeholder while loading */}
       {!loaded && (
         <Globe
-          className={
-            className || "w-4 h-4 text-neutral-400 dark:text-neutral-500"
-          }
+          className={`${imageClasses} text-neutral-400 dark:text-neutral-500`}
         />
       )}
 
···
       <img
         src={url}
         alt={`${alt} favicon`}
-        className={className || "h-4 w-4"}
-        // Use inline style to show only when loaded, preventing a broken image icon flicker
+        className={imageClasses}
         style={{ display: loaded ? "block" : "none" }}
         onLoad={() => {
           setLoaded(true);
···
           setError(true);
         }}
       />
-    </>
+    </div>
   );
 }

src/components/HistoryTab.tsx

···
     <div className="p-6">
       {/* Setup Assistant Banner - Only show if wizard not completed */}
       {!wizardCompleted && (
-        <div className="bg-firefly-banner-dark dark:bg-firefly-banner-dark rounded-2xl p-6 text-white">
+        <div className="bg-firefly-banner-dark dark:bg-firefly-banner-dark rounded-2xl p-6 text-white mb-3">
           <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
             <div className="flex-1">
               <h2 className="text-2xl font-bold mb-2">
···
         </div>
       )}
 
-      <div className="flex items-center space-x-3 mt-3 mb-4">
+      <div className="flex items-center space-x-3 mb-4">
         <div>
           <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
             Previously Uploaded
···
                       <span>{destApp.name}</span>
                     </a>
                   )}
-                  <div className="flex items-center flex-wrap gap-2">
+                  <div className="flex items-center flex-wrap gap-2 py-1.5">
                     <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
                       {upload.totalUsers}{" "}
                       {upload.totalUsers === 1 ? "user found" : "users found"}

src/components/PlatformSelector.tsx

···
             title={isEnabled ? `Upload ${p.name} data` : "Coming soon"}
           >
             <PlatformIcon
-              className={`w-8 h-8 mx-auto mb-2 ${isEnabled ? "text-purple-750 dark:text-cyan-250" : "text-purple-750/50 dark:text-cyan-250/50"}`}
+              className={`w-6 h-6 mx-auto mb-2 ${isEnabled ? "text-purple-750 dark:text-cyan-250" : "text-purple-750/50 dark:text-cyan-250/50"}`}
             />
             <div className="text-sm font-medium text-center text-purple-900 dark:text-cyan-100">
               {p.name}

src/components/SearchResultCard.tsx

···
 
                   {/* User Stats and Match Percent */}
                   <div className="flex items-center flex-wrap gap-2">
-                    {match.postCount && match.postCount > 0 && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                        {match.postCount.toLocaleString()} posts
-                      </span>
-                    )}
-                    {match.followerCount && match.followerCount > 0 && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                        {match.followerCount.toLocaleString()} followers
-                      </span>
-                    )}
+                    {typeof match.postCount === "number" &&
+                      match.postCount > 0 && (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+                          {match.postCount.toLocaleString()} posts
+                        </span>
+                      )}
+                    {typeof match.followerCount === "number" &&
+                      match.followerCount > 0 && (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+                          {match.followerCount.toLocaleString()} followers
+                        </span>
+                      )}
                     <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
                       {match.matchScore}% match
                     </span>

src/components/UploadTab.tsx

···
     <div className="p-6">
       {/* Upload Section */}
       <div className="space-y-3">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center space-x-3">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
+          <div className="flex items-center space-x-3 mb-2 sm:mb-0">
             <div>
               <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
                 Upload Following Data
···
               </p>
             </div>
           </div>
-          {wizardCompleted && (
+          {!wizardCompleted && (
             <button
               onClick={onShowWizard}
-              className="text-sm text-orange-650 hover:text-orange-500 dark:text-amber-400 dark:hover:text-amber-300 font-medium transition-colors flex items-center space-x-1"
+              className="text-md text-orange-650 hover:text-orange-500 dark:text-amber-400 dark:hover:text-amber-300 font-medium transition-colors flex items-center space-x-1"
             >
               <Settings className="w-4 h-4" />
-              <span>Reconfigure</span>
+              <span>Configure</span>
             </button>
           )}
         </div>

src/pages/Loading.tsx

···
         <div className="max-w-3xl mx-auto px-4 py-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
-              <div className="relative w-14 h-14">
-                <PlatformIcon className="w-12 h-12" />
+              <div className="relative w-12 h-12">
+                <PlatformIcon className="w-10 h-10" />
               </div>
               <div>
                 <h2 className="text-xl font-bold">Finding Your Fireflies</h2>

src/pages/Results.tsx

···
 import { Sparkles, Heart } from "lucide-react";
 import { PLATFORMS } from "../constants/platforms";
+import { ATPROTO_APPS } from "../constants/atprotoApps";
 import AppHeader from "../components/AppHeader";
 import SearchResultCard from "../components/SearchResultCard";
+import FaviconIcon from "../components/FaviconIcon";
 import type { AtprotoAppId } from "../types/settings";
 
 interface atprotoSession {
···
 }: ResultsPageProps) {
   const platform = PLATFORMS[sourcePlatform] || PLATFORMS.tiktok;
   const PlatformIcon = platform.icon;
+  const destinationApp = ATPROTO_APPS[destinationAppId];
 
   return (
     <div className="min-h-screen pb-24">
···
               disabled={isFollowing}
               className="w-full bg-firefly-banner dark:bg-firefly-banner-dark text-white hover:from-amber-600 hover:via-orange-600 hover:to-pink-600 py-5 rounded-2xl font-bold text-lg transition-all shadow-2xl hover:shadow-3xl flex items-center justify-center space-x-3 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
             >
-              <Sparkles className="w-6 h-6" />
+              <FaviconIcon
+                url={destinationApp.icon}
+                alt={destinationApp.name}
+                className="w-5 h-5"
+                useButtonStyling={true}
+              />
               <span>
                 Light Up {totalSelected} Connection
-                {totalSelected === 1 ? "" : "s"} ✨
+                {totalSelected === 1 ? "" : "s"}
               </span>
             </button>
           </div>

src/pages/Settings.tsx

···
                 className="flex items-center justify-between px-3 py-2 rounded-xl transition-colors"
               >
                 <div className="flex items-center space-x-3 flex-1">
-                  <Icon className="w-6 h-6 text-purple-950 dark:text-cyan-50 flex-shrink-0" />
+                  <Icon className="w-4 h-4 text-purple-950 dark:text-cyan-50 flex-shrink-0" />
                   <div className="flex-1 min-w-0">
                     <div className="font-medium text-purple-950 dark:text-cyan-50">
                       {p.name}