From 5d1427db311ca259521ac82133429ecf467df88a Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Wed, 9 Jul 2025 14:37:15 +0800
Subject: [PATCH] feat: update client select button style

---
 src/components/ClientSelect/index.tsx       | 18 ++++++++----------
 src/components/Embedded/EmbeddedNote.tsx    |  2 +-
 src/components/Note/CommunityDefinition.tsx |  2 +-
 src/components/Note/GroupMetadata.tsx       |  7 +------
 src/components/Note/LiveEvent.tsx           |  4 ++--
 src/components/Note/LongFormArticle.tsx     |  4 ++--
 src/components/Note/UnknownNote.tsx         |  2 +-
 7 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/components/ClientSelect/index.tsx b/src/components/ClientSelect/index.tsx
index 48ca4164..612b57a8 100644
--- a/src/components/ClientSelect/index.tsx
+++ b/src/components/ClientSelect/index.tsx
@@ -159,15 +159,17 @@ export default function ClientSelect({
     </div>
   )
 
+  const trigger = (
+    <Button variant="outline" {...props}>
+      <ExternalLink /> {t('Open in another client')}
+    </Button>
+  )
+
   if (isSmallScreen) {
     return (
       <div onClick={(e) => e.stopPropagation()}>
         <Drawer open={open} onOpenChange={setOpen}>
-          <DrawerTrigger asChild>
-            <Button {...props}>
-              <ExternalLink /> {t('Open in another client')}
-            </Button>
-          </DrawerTrigger>
+          <DrawerTrigger asChild>{trigger}</DrawerTrigger>
           <DrawerOverlay
             onClick={(e) => {
               e.stopPropagation()
@@ -183,11 +185,7 @@ export default function ClientSelect({
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button {...props}>
-            <ExternalLink /> {t('Open in another client')}
-          </Button>
-        </DialogTrigger>
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
         <DialogContent className="px-8" onOpenAutoFocus={(e) => e.preventDefault()}>
           {content}
         </DialogContent>
diff --git a/src/components/Embedded/EmbeddedNote.tsx b/src/components/Embedded/EmbeddedNote.tsx
index d26477ca..a2b95766 100644
--- a/src/components/Embedded/EmbeddedNote.tsx
+++ b/src/components/Embedded/EmbeddedNote.tsx
@@ -52,7 +52,7 @@ function EmbeddedNoteNotFound({ noteId, className }: { noteId: string; className
     <div className={cn('text-left p-2 sm:p-3 border rounded-lg', className)}>
       <div className="flex flex-col items-center text-muted-foreground font-medium gap-2">
         <div>{t('Sorry! The note cannot be found 😔')}</div>
-        <ClientSelect variant="secondary" className="w-full mt-2" originalNoteId={noteId} />
+        <ClientSelect className="w-full mt-2" originalNoteId={noteId} />
       </div>
     </div>
   )
diff --git a/src/components/Note/CommunityDefinition.tsx b/src/components/Note/CommunityDefinition.tsx
index 54bc17ca..44da127f 100644
--- a/src/components/Note/CommunityDefinition.tsx
+++ b/src/components/Note/CommunityDefinition.tsx
@@ -36,7 +36,7 @@ export default function CommunityDefinition({
           {communityDescriptionComponent}
         </div>
       </div>
-      <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+      <ClientSelect className="w-full mt-2" event={event} />
     </div>
   )
 }
diff --git a/src/components/Note/GroupMetadata.tsx b/src/components/Note/GroupMetadata.tsx
index d0631281..4cdb1be1 100644
--- a/src/components/Note/GroupMetadata.tsx
+++ b/src/components/Note/GroupMetadata.tsx
@@ -38,12 +38,7 @@ export default function GroupMetadata({
           {groupAboutComponent}
         </div>
       </div>
-      <ClientSelect
-        variant="secondary"
-        className="w-full mt-2"
-        event={event}
-        originalNoteId={originalNoteId}
-      />
+      <ClientSelect className="w-full mt-2" event={event} originalNoteId={originalNoteId} />
     </div>
   )
 }
diff --git a/src/components/Note/LiveEvent.tsx b/src/components/Note/LiveEvent.tsx
index c54ab4c7..a1e686e4 100644
--- a/src/components/Note/LiveEvent.tsx
+++ b/src/components/Note/LiveEvent.tsx
@@ -51,7 +51,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
           {liveStatusComponent}
           {summaryComponent}
           {tagsComponent}
-          <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+          <ClientSelect className="w-full mt-2" event={event} />
         </div>
       </div>
     )
@@ -74,7 +74,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
           {tagsComponent}
         </div>
       </div>
-      <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+      <ClientSelect className="w-full mt-2" event={event} />
     </div>
   )
 }
diff --git a/src/components/Note/LongFormArticle.tsx b/src/components/Note/LongFormArticle.tsx
index de8eacf3..3d04bba4 100644
--- a/src/components/Note/LongFormArticle.tsx
+++ b/src/components/Note/LongFormArticle.tsx
@@ -46,7 +46,7 @@ export default function LongFormArticle({
           {titleComponent}
           {summaryComponent}
           {tagsComponent}
-          <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+          <ClientSelect className="w-full mt-2" event={event} />
         </div>
       </div>
     )
@@ -68,7 +68,7 @@ export default function LongFormArticle({
           {tagsComponent}
         </div>
       </div>
-      <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+      <ClientSelect className="w-full mt-2" event={event} />
     </div>
   )
 }
diff --git a/src/components/Note/UnknownNote.tsx b/src/components/Note/UnknownNote.tsx
index 46297466..45d3457d 100644
--- a/src/components/Note/UnknownNote.tsx
+++ b/src/components/Note/UnknownNote.tsx
@@ -14,7 +14,7 @@ export function UnknownNote({ event, className }: { event: Event; className?: st
       )}
     >
       <div>{t('Cannot handle event of kind k', { k: event.kind })}</div>
-      <ClientSelect event={event} variant="secondary" />
+      <ClientSelect event={event} />
     </div>
   )
 }