Final UI changes?

client/src/components/WhitelistModal.jsx

@@ -105,7 +105,7 @@ export default function WhitelistModal({ businessId, template, boundProfile, onC
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm overflow-y-auto pt-10 pb-10">
       <div className="bg-surface-white border border-border-main rounded-xl p-8 w-full max-w-md shadow-xl my-auto">
-        <div className="w-12 h-12 rounded-full bg-orange-bg flex items-center justify-center mx-auto mb-4">
+        <div className="w-12 h-12 rounded-full bg-tags-bg border border-tags-border flex items-center justify-center mx-auto mb-4">
           <span className="text-xl">✅</span>
         </div>
 

client/src/pages/Events.jsx

@@ -11,7 +11,7 @@ export default function Events() {
   const [showAddForm, setShowAddForm] = useState(false);
   const [genState, setGenState] = useState({});
   const [variants, setVariants] = useState({});
-  const [selectingSlug, setSelectingSlug] = useState(null);
+  const [selectingVariantKey, setSelectingVariantKey] = useState('');
   const [error, setError] = useState('');
   const [readyToGenerate, setReadyToGenerate] = useState(false);
 
@@ -78,8 +78,9 @@ export default function Events() {
     }
   }
 
-  async function handleSelect(slug, variant) {
-    setSelectingSlug(slug);
+  async function handleSelect(slug, variant, variantIndex) {
+    const variantKey = `${slug}:${variantIndex}`;
+    setSelectingVariantKey(variantKey);
     setError('');
     try {
       await apiClient.post(`/api/businesses/${businessId}/templates/${slug}/select`, { selectedVariant: variant });
@@ -89,7 +90,7 @@ export default function Events() {
     } catch (err) {
       setError(err.response?.data?.error || 'Failed to select template');
     } finally {
-      setSelectingSlug(null);
+      setSelectingVariantKey('');
     }
   }
 
@@ -213,26 +214,38 @@ export default function Events() {
                 <div className="border-t border-gray-100 bg-gray-50/50 px-6 py-5 space-y-4">
                   <p className="text-xs text-gray-500 font-bold uppercase tracking-wider">Pick a Variant</p>
                   <div className="grid gap-4">
-                    {eventVariants.map((v, i) => (
-                      <div
-                        key={i}
-                        className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm hover:border-gray-300 transition"
-                      >
+                    {eventVariants.map((v, i) => {
+                      const variantKey = `${event.slug}:${i}`;
+                      const isSelectingThis = selectingVariantKey === variantKey;
+                      const isSelectingAnotherVariant = !!selectingVariantKey
+                        && selectingVariantKey !== variantKey
+                        && selectingVariantKey.startsWith(`${event.slug}:`);
+
+                      return (
+                        <div
+                          key={i}
+                          className={`rounded-xl border bg-white p-5 shadow-sm transition ${
+                            isSelectingThis
+                              ? 'border-indigo-300 ring-2 ring-indigo-100'
+                              : 'border-gray-200 hover:border-gray-300'
+                          }`}
+                        >
                         <p className="text-sm text-gray-800 font-mono leading-relaxed">{v}</p>
                         <div className="flex items-center justify-between mt-4">
                           <span className={`text-xs font-semibold px-2.5 py-1 rounded-md ${v.length > 160 ? 'bg-red-50 text-red-700' : 'bg-gray-100 text-gray-600'}`}>
                             {v.length} / 160
                           </span>
                           <button
-                            onClick={() => handleSelect(event.slug, v)}
-                            disabled={selectingSlug === event.slug}
-                            className="text-xs px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition disabled:opacity-50"
+                            onClick={() => handleSelect(event.slug, v, i)}
+                            disabled={isSelectingThis || isSelectingAnotherVariant}
+                            className="text-xs px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition disabled:opacity-60 disabled:cursor-not-allowed"
                           >
-                            {selectingSlug === event.slug ? 'Selecting…' : 'Use this template'}
+                            {isSelectingThis ? 'Selecting…' : 'Use this template'}
                           </button>
                         </div>
                       </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 </div>
               )}

client/src/pages/Templates.jsx

@@ -190,7 +190,7 @@ export default function Templates() {
                       {!isBoundProfileMissing && tmpl.status === 'pending_whitelisting' && (
                         <button
                           onClick={() => setWhitelistTarget(tmpl)}
-                          className="px-4 py-2 rounded-lg bg-orange-text hover:bg-[#c97b45] text-white text-sm font-semibold transition shadow-sm"
+                          className="px-4 py-2 rounded-lg bg-tags-text hover:bg-[#cf7b3f] text-white text-sm font-semibold transition shadow-sm border border-[#d47f45]"
                         >
                           Publish
                         </button>