better search btn

app/(app)/_layout/components/Search.tsx

@@ -3,16 +3,28 @@
 import { Input } from "@/components/ui/input";
 import { commandDialogAtom } from "./CommandDialog";
 import { useAtom } from "jotai";
+import { Button } from "@/components/ui/button";
 export default function Search() {
   const [open, setOpen] = useAtom(commandDialogAtom);
   return (
     <div>
-      <Input
+      {/* <Input
         type="search"
         placeholder="Search..."
         className="sm:w-[200px] lg:w-[300px]"
         onFocus={() => setOpen(true)}
-      />
+      /> */}
+      <Button
+        onClick={() => setOpen(true)}
+        variant={"outline"}
+        className="items-center justify-start rounded-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
+      >
+        <span className="hidden lg:inline-flex">Search...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
     </div>
   );
 }

components/TextRendering/EventMention.tsx

@@ -9,7 +9,7 @@ export default function EventMention({ mention }: EventMentionProps) {
   //   const { user } = useProfile(mention);
   return (
     <Link href={`/${mention}`}>
-      <span className="text-primary-foreground hover:underline">{`*\$${mention}`}</span>
+      <span className="text-primary hover:underline">{`*\$${mention}`}</span>
     </Link>
   );
 }

components/TextRendering/ProfileMention.tsx

@@ -27,7 +27,7 @@ export default function ProfileMention({ mention }: ProfileMentionProps) {
   const profile = getProfile(mention);
   return (
     <Link href={`/${mention}`}>
-      <span className="text-primary-foreground hover:underline">{`@${
+      <span className="text-primary hover:underline">{`@${
         profile?.name ?? mention
       }`}</span>
     </Link>

components/TextRendering/index.tsx

@@ -30,7 +30,7 @@ const RenderText = ({ text }: { text?: string }) => {
       if (specialValuesArray[index]?.match(urlRegex)) {
         specialElement = (
           <a
-            className="text-primary-foreground hover:underline"
+            className="text-primary hover:underline"
             href={cleanUrl(specialValuesArray[index])}
             target="_blank"
             rel="noreferrer"
@@ -43,7 +43,7 @@ const RenderText = ({ text }: { text?: string }) => {
       } else if (specialValuesArray[index]?.match(hashtagRegex)) {
         specialElement = (
           <Link href={`/?t=${specialValuesArray[index]?.substring(1)}`}>
-            <span className="break-words text-primary-foreground hover:underline">
+            <span className="break-words text-primary hover:underline">
               {specialValuesArray[index]}
             </span>
           </Link>