Bug-fix for deployed theme

public/_redirects

@@ -0,0 +1 @@
+/docs  https://deepwiki.com/fac-31/Pro0428-LocalEventBackend/1-overview  302

src/components/major/events.tsx

@@ -36,7 +36,7 @@ export default function Events(props: Props) {
 
   return (
     <div
-      className="p-4 m-4 border solid white rounded w-[50%]"
+      className="p-2 pb-9 m-4 border-b-4 border-color-text w-[50%]"
       data-id={props._id}
     >
       <div>

src/components/major/nav-bar.tsx

@@ -29,7 +29,7 @@ export default function NavBar() {
   };
 
   return (
-    <div className="border-b-3 input bg-[var(--color-background)]">
+    <div className="border-b-4 input bg-[var(--color-background)] p-1">
       {/* Desktop navbar */}
       <div className="hidden md:flex justify-between items-center">
         <ThemeButton />

src/components/major/side-bar/ModeButtons.tsx

@@ -15,7 +15,7 @@ export const ModeButtons = ({
             key={id}
             onClick={() => toggleModeSelect(id)}
             title={!open ? label : undefined}
-            className={`flex items-center justify-center gap-2 p-2 w-full rounded-md 
+            className={`flex items-center justify-center gap-2 p-2 w-full rounded-md
                 ${isSelected ? 'outline-2 outline-primary' : ''}
                 hover:bg-input-bg`}
           >

src/components/major/side-bar/filters/SearchFilter.tsx

@@ -6,13 +6,13 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
   onChange,
 }) => {
   return (
-    <div className="flex items-center gap-2 w-full hover:bg-input-bg p-2 rounded-md">
+    <div className="flex items-center gap-2 w-full hover:bg-input-bg p-2 rounded-md ">
       <Search />
       <input
         type="text"
         value={search}
         onChange={(e) => onChange(e.target.value)}
-        className=" flex-1 bg-transparent outline-none text-sm px-2 py-1 rounded"
+        className=" flex-1 bg-transparent outline-none text-(-color-text) text-sm px-2 py-1 rounded"
       />
     </div>
   );

src/components/major/side-bar/index.tsx

@@ -46,7 +46,7 @@ const SideBar = ({ filters, updateFilters }: FiltersProps) => {
   return (
     <div
       ref={sidebarRef}
-      className={`fixed top-9 p-2 h-full flex flex-col items-start border-text border-r-2 bg-accent transition-all duration-300 ease-in-out ${
+      className={`fixed top-12 p-2 h-full flex flex-col items-start border-text border-r-4 bg-accent transition-all duration-300 ease-in-out ${
         open ? 'w-66' : 'w-15'
       }`}
     >

src/styles/main.css

@@ -1,31 +1,19 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-:root {
+.dark {
   --color-background: #2d272f;
   --color-accent: rgb(38, 35, 39);
   --color-text: #e1d2e5;
   --color-input-bg: #e1d2e51a;
   --color-error: rgb(248, 111, 111);
-
-  --animate-fade-in-left: fade-in-left 0.4s;
-  @keyframes fade-in-left {
-    from {
-      opacity: 0;
-      transform: translateX(-20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
 }
 
 .light {
   --color-background: #e1d2e5;
   --color-accent: #e1d2e5;
   --color-text: #2d272f;
-  --color-input-bg: rgba(255, 0, 0, 0.05);
+  --color-input-bg: rgba(38, 35, 39, 0.2);
   --color-error: rgb(215, 41, 41);
 }
 
@@ -46,4 +34,4 @@ input {
 
 input {
   background: var(--color-input-bg);
-}
+}

src/utils/filterEvents.ts

@@ -24,7 +24,6 @@ export const filterEvents = (events: FullEvent[], filters: FiltersState) => {
     const dateOnly = new Date(now.getFullYear(), now.getMonth(), now.getDate());
 
     const filterDate = new Date(dateOnly);
-
     if (filters.date === 'today') {
       filterDate.setDate(filterDate.getDate() + 1);
     } else if (filters.date === 'this week') {
@@ -43,6 +42,7 @@ export const filterEvents = (events: FullEvent[], filters: FiltersState) => {
     return priceMatch && distanceMatch && searchMatch && dateMatch;
   });
 };
+
 /*     search: '',
     price: 50,
     distance: 20,

tailwind.config.ts

@@ -1,11 +1,12 @@
-export default {
-  lightMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        background: 'var(--color-background)',
-        text: 'var(--color-text)',
-      },
-    },
-  },
-};
+// export default {
+//   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+//   lightMode: 'class',
+//   theme: {
+//     extend: {
+//       colors: {
+//         background: 'var(--color-background)',
+//         text: 'var(--color-text)',
+//       },
+//     },
+//   },
+// };