made the dock translucent!

Author: phillipnguyenn

client/src/components/ui/search-dock.tsx

@@ -1,5 +1,7 @@
 import { Filter, Search } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 import { Button } from "./button";
 
 export default function SearchDock() {
@@ -9,7 +11,7 @@ export default function SearchDock() {
         <div className="rounded-full px-3 py-1.5">
           <input
             placeholder="Search events"
-            className="w-full bg-transparent text-base outline-none"
+            className={cn("w-full bg-transparent text-base outline-none")}
           />
         </div>
       </div>

client/src/pages/layouts/docklayout.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 // this layout takes a children prop and bottomoverlay
 // whichever page uses DockLayout can **OPTIONALLY** declare an element to sit above the NAV bar
 
+// PHILLIPS EXTRA NOTE: the dock is set to 80% opacity with a blur! try to keep it consistent
+
 type DockLayoutProps = {
   children: React.ReactNode;
   bottomOverlay?: React.ReactNode;
@@ -25,7 +27,7 @@ export default function DockLayout({
 
       <nav className="fixed bottom-0 left-0 right-0 z-50">
         <div className="mx-auto max-w-md px-4 pb-3">
-          <div className="flex items-center justify-around rounded-full bg-[#000912] px-6 py-4 shadow-lg">
+          <div className="flex items-center justify-around rounded-full bg-[#000912]/85 px-6 py-4 shadow-lg backdrop-blur-md">
             <Link href="/home" className="text-gray-300 hover:text-white">
               <Home className="h-6 w-6" />
             </Link>