style: WhatsApp, WABA

src/views/Conversations/Online/Components/BubbleIM.jsx

@@ -5,6 +5,7 @@ import { MessageBox } from 'react-chat-elements';
 import { groupBy, isEmpty } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
+import { WABIcon } from '@/components/Icons';
 
 const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, setNewChatFormValues, scrollToMessage, focusMsg, ...message }) => {
   const { message: appMessage } = App.useApp();
@@ -103,21 +104,25 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
       onReplyMessageClick={() => scrollToMessage(message.reply.id)}
       onOpen={() => handlePreview(message)}
       onTitleClick={() => handlePreview(message)}
+      // title={<div className='flex justify-around items-center gap-1'><WABIcon />{message.title}</div>}
       text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} template={message.template} />}
       replyButton={['text', 'document', 'image'].includes(message.whatsapp_msg_type)}
       {...(message.sender === 'me'
         ? {
-            styles: { backgroundColor: '#ccd4ae' },
-            notchStyle: { fill: '#ccd4ae' },
+            // styles: { backgroundColor: '#ccd4ae' },
+            notchStyle: { fill: '#ccd4ae' }, // todo: channel color '#d9fdd3'
             replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
           }
         : {})}
+      // notch={false}
       className={[
         'whitespace-pre-wrap',
         message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
-        message.sender === 'me' ? 'whatsappme-container' : '',
+        // message.sender === 'me' ? 'whatsappme-container' : '',
         focusMsg === message.id ? 'message-box-focus' : '',
         message.status === 'failed' ? 'failed-msg' : '',
+        // '*:bg-waba-me'
+        message.sender === 'me' ? '*:bg-waba-me' : '', // todo: channel color
       ].join(' ')}
       {...(message.type === 'meetingLink'
         ? {

tailwind.config.js

@@ -16,12 +16,13 @@ export default {
         gossip: '#dcf8c6',
         bg: '#ece5dd', // '#efeae2' '#eae6df' '#d1d7db'
         bgdark: '#0b141a',
-        me: '#ccd5ae', // '#d9fdd3'
+        me: '#d9fdd3', // '#d9fdd3' '#e1fef2'
       },
       'waba': {
         DEFAULT: '#2ba84a',
         400: '#6bc280',
         300: '#95d4a5',
+        me: '#ccd5ae', // '#e1fef2', // '#d9fdd3' '#00a884'
       },
       'primary': '#1ba784',
     },
@@ -42,3 +43,22 @@ export default {
     divideColor: true,
   }
 };
+/**
+ * WhatsApp
+    --outgoing-background: #d9fdd3;
+    --outgoing-background-rgb: 217, 253, 211;
+    --outgoing-background-deeper: #d1f4cc;
+    --outgoing-background-deeper-rgb: 209, 244, 204;
+    --outgoing-background-highlight: #c4eec8;
+    --outgoing-background-highlight-rgb: 196, 238, 200;
+    --overlay: #0b141a;
+    --overlay-rgb: 11, 20, 26;
+    --panel-background: #f0f2f5;
+    --panel-background-rgb: 240, 242, 245;
+    --panel-background-active: #dee0e3;
+    --panel-background-active-rgb: 222, 224, 227;
+    --panel-background-colored: #008069;
+    --panel-background-colored-rgb: 0, 128, 105;
+    --panel-background-colored-deeper: #008069;
+    --shadow-rgb: 11, 20, 26;
+ */