Refine calendar filters

Improve the aesthetics of the filters on the calendar view and add a "deselect all" option.

src/components/FilterBar.tsx

@@ -1,6 +1,7 @@
 
 import { useMemo } from "react";
 import conferencesData from "@/data/conferences.yml";
+import { X } from "lucide-react";
 
 interface FilterBarProps {
   selectedTag: string;
@@ -27,23 +28,38 @@ const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
   }, []);
 
   return (
-    <div className="w-full py-4 overflow-x-auto bg-white border-b border-neutral-light animate-fade-in">
+    <div className="w-full py-6 bg-white border-b border-neutral-200 animate-fade-in shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex space-x-4">
+        <div className="flex flex-wrap gap-3">
           {uniqueTags.map((filter) => (
             <button
               key={filter.id}
               title={filter.description}
               onClick={() => onTagSelect(filter.id)}
-              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                selectedTag === filter.id 
-                  ? "bg-primary text-white" 
-                  : "hover:bg-primary/10 hover:text-primary"
-              }`}
+              className={`
+                px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
+                filter-tag
+                ${selectedTag === filter.id 
+                  ? "bg-primary text-white shadow-sm filter-tag-active" 
+                  : "bg-neutral-50 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
+                }
+              `}
             >
               {filter.label}
             </button>
           ))}
+          
+          {selectedTag !== "All" && (
+            <button
+              onClick={() => onTagSelect("All")}
+              className="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
+                bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700
+                flex items-center gap-2"
+            >
+              <X className="h-4 w-4" />
+              Deselect All
+            </button>
+          )}
         </div>
       </div>
     </div>

src/styles/globals.css

@@ -1,3 +1,4 @@
+
 /* Add these styles to make the filter tags more interactive */
 .filter-tag {
   @apply transition-all duration-200;
@@ -16,4 +17,4 @@
 
 .filter-tag-active {
   animation: subtle-pulse 2s infinite;
-} 
+}