From e8c0ddaa96e50234e459a6ce7410d45d3e6bf609 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sat, 4 Mar 2023 20:56:59 +0800
Subject: [PATCH] reorder delete confirmation button

---
 src/components/Chat/ChatContent/Message/Message.tsx        | 7 ++++++-
 src/components/Chat/ChatContent/Message/MessageContent.tsx | 6 +++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Chat/ChatContent/Message/Message.tsx b/src/components/Chat/ChatContent/Message/Message.tsx
index b075b6c..f7cdc5d 100644
--- a/src/components/Chat/ChatContent/Message/Message.tsx
+++ b/src/components/Chat/ChatContent/Message/Message.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import useStore from '@store/store';
 
 import Avatar from './Avatar';
 import MessageContent from './MessageContent';
@@ -24,10 +25,14 @@ const Message = ({
   messageIndex: number;
   sticky?: boolean;
 }) => {
+  const stickyIndex = useStore((state) => state.messages.length);
+
   return (
     <div
       className={`w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group ${
-        backgroundStyle[messageIndex % 2]
+        sticky
+          ? backgroundStyle[stickyIndex % 2]
+          : backgroundStyle[messageIndex % 2]
       }`}
       key={
         messageIndex !== -1
diff --git a/src/components/Chat/ChatContent/Message/MessageContent.tsx b/src/components/Chat/ChatContent/Message/MessageContent.tsx
index 95a7451..d82ebb4 100644
--- a/src/components/Chat/ChatContent/Message/MessageContent.tsx
+++ b/src/components/Chat/ChatContent/Message/MessageContent.tsx
@@ -188,15 +188,15 @@ const ContentView = ({
         )}
         {isDelete && (
           <>
-            <button className='p-1 hover:text-white' onClick={handleDelete}>
-              <TickIcon />
-            </button>
             <button
               className='p-1 hover:text-white'
               onClick={() => setIsDelete(false)}
             >
               <CrossIcon />
             </button>
+            <button className='p-1 hover:text-white' onClick={handleDelete}>
+              <TickIcon />
+            </button>
           </>
         )}
       </div>