🎨 style: overall UI improvements (#3576)

* stlye: new dialogs

* style: DashGroupItem

* style: bookmarks update

client/src/components/Conversations/DeleteButton.tsx

@@ -5,15 +5,15 @@ import { useParams, useNavigate } from 'react-router-dom';
 import type { TMessage } from 'librechat-data-provider';
 import { useDeleteConversationMutation } from '~/data-provider';
 import {
-  Dialog,
-  DialogTrigger,
+  OGDialog,
+  OGDialogTrigger,
   Label,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '~/components/ui';
-import DialogTemplate from '~/components/ui/DialogTemplate';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { TrashIcon, CrossIcon } from '~/components/svg';
 import { useLocalize, useNewConvo } from '~/hooks';
 
@@ -42,7 +42,7 @@ export default function DeleteButton({
 
   const confirmDelete = useCallback(() => {
     const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
-    const thread_id = messages?.[messages?.length - 1]?.thread_id;
+    const thread_id = messages?.[messages.length - 1]?.thread_id;
 
     deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
   }, [conversationId, deleteConvoMutation, queryClient]);
@@ -72,11 +72,11 @@ export default function DeleteButton({
   };
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>
+    <OGDialog>
+      <OGDialogTrigger asChild>
         <button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
-      </DialogTrigger>
-      <DialogTemplate
+      </OGDialogTrigger>
+      <OGDialogTemplate
         showCloseButton={false}
         title={localize('com_ui_delete_conversation')}
         className="max-w-[450px]"
@@ -98,6 +98,6 @@ export default function DeleteButton({
           selectText: localize('com_ui_delete'),
         }}
       />
-    </Dialog>
+    </OGDialog>
   );
 }

client/src/components/Conversations/ShareButton.tsx

@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import {
-  Dialog,
+  OGDialog,
   Tooltip,
-  DialogTrigger,
+  OGDialogTrigger,
   TooltipContent,
   TooltipTrigger,
   TooltipProvider,
 } from '~/components/ui';
 import { Share2Icon } from 'lucide-react';
 import type { TSharedLink } from 'librechat-data-provider';
-import DialogTemplate from '~/components/ui/DialogTemplate';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import SharedLinkButton from './SharedLinkButton';
 import ShareDialog from './ShareDialog';
 import { useLocalize } from '~/hooks';
@@ -78,8 +78,8 @@ export default function ShareButton({
     setOpen(open);
   };
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>
+    <OGDialog open={open} onOpenChange={onOpenChange}>
+      <OGDialogTrigger asChild>
         <button
           className={cn(
             'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
@@ -88,8 +88,8 @@ export default function ShareButton({
         >
           {renderShareButton()}
         </button>
-      </DialogTrigger>
-      <DialogTemplate
+      </OGDialogTrigger>
+      <OGDialogTemplate
         buttons={buttons}
         showCloseButton={true}
         showCancelButton={false}
@@ -108,6 +108,6 @@ export default function ShareButton({
           </>
         }
       />
-    </Dialog>
+    </OGDialog>
   );
 }

client/src/components/Conversations/SharedLinkButton.tsx

@@ -80,7 +80,7 @@ export default function SharedLinkButton({
         ),
       };
     }
-    if (share?.isPublic) {
+    if (share.isPublic) {
       return {
         handler: async () => {
           await updateSharedLink();
@@ -107,12 +107,12 @@ export default function SharedLinkButton({
 
   const handlers = getHandler();
   return (
-    <Button
+    <button
       disabled={isLoading || isCopying}
       onClick={() => {
         handlers.handler();
       }}
-      className="min-w-32 whitespace-nowrap bg-green-500 text-white hover:bg-green-600 dark:bg-green-600 dark:text-white dark:hover:bg-green-800"
+      className="btn btn-primary flex items-center"
     >
       {isCopying && (
         <>
@@ -122,6 +122,6 @@ export default function SharedLinkButton({
       )}
       {!isCopying && !isLoading && handlers.label}
       {!isCopying && isLoading && <Spinner className="h-4 w-4" />}
-    </Button>
+    </button>
   );
 }