theme issue fixed

Author: Bhupesh-mfsi

packages/messenger-demo/src/theme.ts

@@ -10,17 +10,17 @@ export const themeColors = {
     activeContactBackgroundColor: 'dimgray',
     configurationBoxBackgroundColor: 'darkgrey',
     configurationBoxBorderColor: '#666876',
-    chatBakgroundColor: '#5c5e54',
+    chatBackgroundColor: '#5c5e54',
     disabledButtonTextColor: 'burlywood',
     errorTextColor: '#C30F1A',
     errorBackgroundColor: '#830B12',
     attachmentBackgroundColor: '#202129',
     selectedContactBorderColor: 'orange',
     profileConfigurationTextColor: 'pink',
     receivedMessageBackgroundColor: 'pink',
-    receivedMessageTextColor: 'white',
+    receivedMessageTextColor: 'orange',
     sentMessageBackgroundColor: 'blue',
-    sentMessageTextColor: 'white',
+    sentMessageTextColor: 'black',
     infoBoxBackgroundColor: 'green',
     infoBoxTextColor: 'yellow',
     buttonShadow: '#000000',

packages/messenger-widget/src/components/Contacts/Contacts.css

@@ -1,5 +1,5 @@
 .contacts-scroller {
-    height: calc(100% - 65px) !important;
+    height: calc(100% - 50px) !important;
     padding-left: 1rem;
     margin-top: 2px;
 }

packages/messenger-widget/src/components/Message/Message.css

@@ -49,7 +49,7 @@
     background-color: var(--received-message-background-color);
 }
 
-.msg:hover div .content-style + .msg-action-container {
+.msg:hover div .content-style+.msg-action-container {
     visibility: visible;
 }
 
@@ -69,11 +69,11 @@
     flex-direction: column;
 }
 
-.reply-preview-own{
+.reply-preview-own {
     background-color: var(--scrollbar-background-color);
 }
 
-.reply-preview-contact{
+.reply-preview-contact {
     background-color: var(--scrollbar-background-color);
 }
 
@@ -118,9 +118,9 @@
 }
 
 .own-msg-text {
-    background: var(--sent-message-text-color);
+    color: var(--sent-message-text-color);
 }
 
 .contact-msg-text {
-    background: var(--received-message-text-color);
-}
+    color: var(--received-message-text-color);
+}

packages/messenger-widget/src/components/Message/Message.tsx

@@ -57,14 +57,14 @@ export function Message(props: MessageProps) {
                                   state.uiView.selectedMessageView.messageData
                                       ?.envelop.id === props.envelop.id
                                 ? 'msg-editing-active'
-                                : 'ms-3 own-msg-background'
+                                : 'ms-3 own-msg-background own-msg-text'
                             : !props.message &&
                               props.envelop.message.metadata.type ===
                                   MessageActionType.DELETE &&
                               (!props.envelop.message.attachments ||
                                   props.envelop.message.attachments.length < 1)
                             ? 'contact-deleted-msg'
-                            : 'contact-msg-background'
+                            : 'contact-msg-background contact-msg-text'
                         ).concat(
                             ' ',
                             props.reactions.length > 0
@@ -210,8 +210,8 @@ export function Message(props: MessageProps) {
                         className={'reacted d-flex'.concat(
                             ' ',
                             props.ownMessage
-                                ? 'background-config-box'
-                                : 'normal-btn-hover',
+                                ? 'own-msg-background'
+                                : 'contact-msg-background',
                         )}
                     >
                         {props.reactions.map((item, index) => {

packages/messenger-widget/src/components/Message/bl.ts

@@ -51,6 +51,15 @@ export const deleteEmoji = async (
 ) => {
     const userDb = state.userDb;
 
+    /**
+     * User can't remove reactions on his own messages.
+     * As the other account can only react to my messages.
+     * And only that other account can remove those reactions.
+     **/
+    if (props.ownMessage) {
+        return;
+    }
+
     if (!userDb) {
         throw Error('userDB not found');
     }

packages/messenger-widget/src/utils/theme-utils.ts

@@ -72,7 +72,7 @@ export const getCustomizedTheme = (themeCss: any) => {
             ? `1px solid ${themeCss.configurationBoxBorderColor}`
             : defaultTheme.backgroundConfigBoxBorder,
         chatBackground:
-            themeCss.chatBakgroundColor ?? defaultTheme.chatBackground,
+            themeCss.chatBackgroundColor ?? defaultTheme.chatBackground,
         disabledBtnText:
             themeCss.disabledButtonTextColor ?? defaultTheme.disabledBtnText,
         textError: themeCss.errorTextColor ?? defaultTheme.textError,