sceyt-chat-react-uikit 1.6.5-beta.2 → 1.6.5-beta.3

package/index.js

@@ -10960,7 +10960,7 @@ var CustomInput = styled__default.input(_templateObject10 || (_templateObject10
 }, function (props) {
   return props.color;
 }, function (props) {
-  return props.error ? "1px solid " + props.errorColor : colors.primary;
+  return props.error ? "1px solid " + props.errorColor : 'transparent';
 }, function (props) {
   return props.error ? "1px solid " + colors.errorBlur : props.theme !== THEME.DARK ? "2px solid " + props.borderColor : 'none';
 }, colors.gray0, function (props) {
@@ -19054,7 +19054,7 @@ var Channel = function Channel(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     surface2 = _useColor[THEME_COLORS.SURFACE_2],
     errorColor = _useColor[THEME_COLORS.WARNING],
@@ -19131,7 +19131,7 @@ var Channel = function Channel(_ref) {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
-    selectedBackgroundColor: selectedChannelBackground || focusBackground,
+    selectedBackgroundColor: selectedChannelBackground || hoverBackground,
     selectedChannelPaddings: selectedChannelPaddings,
     channelsPaddings: channelsPaddings,
     selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -19692,7 +19692,8 @@ var UsersPopup = function UsersPopup(_ref) {
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var selfUser = ChatClient.user;
@@ -19937,7 +19938,7 @@ var UsersPopup = function UsersPopup(_ref) {
     var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
     return /*#__PURE__*/React__default.createElement(ListRow, {
       isAdd: actionType !== 'createChat',
-      hoverBackground: colors.hoverBackgroundColor,
+      hoverBackground: hoverBackground,
       key: user.id,
       onClick: function onClick() {
         return actionType === 'createChat' && handleAddMember(user);
@@ -20712,7 +20713,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     uploadPhotoIcon = _ref.uploadPhotoIcon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var _useState = React.useState(false),
     showAddMemberPopup = _useState[0],
@@ -20737,14 +20738,14 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       leftAuto: !showSearch,
       iconColor: accentColor
     }, createChannelIcon || /*#__PURE__*/React__default.createElement(SvgAddChat, null))
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('broadcast');
     },
@@ -20752,7 +20753,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newChannelIcon || /*#__PURE__*/React__default.createElement(SvgCreateChannel, null), "New channel"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('group');
     },
@@ -20760,7 +20761,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newGroupIcon || /*#__PURE__*/React__default.createElement(SvgCreateGroup, null), "New group"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 3,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('direct');
     },
@@ -21834,7 +21835,8 @@ function ChatHeader(_ref) {
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    borderColor = _useColor[THEME_COLORS.BORDER];
+    borderColor = _useColor[THEME_COLORS.BORDER],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -21876,12 +21878,12 @@ function ChatHeader(_ref) {
     onClick: handleBackToChannels
   }, MobileBackButton || (/*#__PURE__*/React__default.createElement(MobileBackButtonWrapper, {
     onClick: handleBackToChannels,
-    hoverBackground: colors.primaryLight
+    hoverBackground: hoverBackground
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
   })))), activeChannel.isLinkedChannel && (/*#__PURE__*/React__default.createElement(BackButtonWrapper, {
     onClick: handleSwitchChannel,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     order: backButtonOrder
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
@@ -31499,12 +31501,12 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -32600,13 +32602,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: errorColor
   }, uploadErrorMessage), selectedMessagesMap && selectedMessagesMap.size > 0 ? (/*#__PURE__*/React__default.createElement(SelectedMessagesWrapper, null, selectedMessagesMap.size, " ", selectedMessagesMap.size > 1 ? ' messages selected' : ' message selected', /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleForwardMessagePopup,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '32px',
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forward"), /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleDeleteMessagePopup,
     color: errorColor,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '16px'
   }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
     onClick: handleCloseSelectMessages
@@ -32742,7 +32744,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, showChooseMediaAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader(mediaExtensions);
     },
@@ -32751,7 +32753,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null), chooseMediaAttachmentText != null ? chooseMediaAttachmentText : 'Photo or video')), showChooseFileAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader('');
     },
@@ -33266,7 +33268,7 @@ var Actions = function Actions(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     borderThemeColor = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
@@ -33436,7 +33438,7 @@ var Actions = function Actions(_ref) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: textPrimary,
       key: value + index,
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       onClick: function onClick() {
         return handleNotificationOnOff(value * oneHour);
       }
@@ -33444,28 +33446,28 @@ var Actions = function Actions(_ref) {
   }) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 1,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneHour);
     }
   }, "Mute for 1 hour"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 2,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(twoHours);
     }
   }, "Mute for 2 hours"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 3,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneDay);
     }
   }, "Mute for 1 day"))), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 4,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff();
     }
@@ -33753,7 +33755,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var _useState = React.useState(false),
     isChanged = _useState[0],
@@ -33812,7 +33815,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     theme: theme
   }, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       key: role.name,
       onClick: function onClick() {
         return onChangeFunction(role.name);
@@ -33865,7 +33868,7 @@ var Members = function Members(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = reactRedux.useDispatch();
@@ -34012,14 +34015,14 @@ var Members = function Members(_ref) {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
-    hoverBackground: hoverBackgroundColor || focusBackground,
+    hoverBackground: hoverBackgroundColor || hoverBackground,
     addMemberIconColor: accentColor,
     fontSize: addMemberFontSize
   }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
     return /*#__PURE__*/React__default.createElement(MemberItem$1, {
       key: member.id + index,
       color: textPrimary,
-      hoverBackground: hoverBackgroundColor || focusBackground,
+      hoverBackground: hoverBackgroundColor || hoverBackground,
       onClick: function onClick() {
         return handleCreateChat(member);
       },
@@ -34054,7 +34057,7 @@ var Members = function Members(_ref) {
         setCloseMenu('1');
       },
       key: 1,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Change role")), showMakeMemberAdmin && checkActionPermission('changeMemberRole') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34063,7 +34066,7 @@ var Members = function Members(_ref) {
       },
       textColor: member.role === 'admin' ? errorColor : '',
       key: 2,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, member.role === 'admin' ? 'Revoke Admin' : 'Make Admin')), showKickMember && checkActionPermission('kickMember') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34072,11 +34075,11 @@ var Members = function Members(_ref) {
       },
       textColor: errorColor,
       key: 3,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Remove")), showKickAndBlockMember && checkActionPermission('kickAndBlockMember') && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: errorColor,
       key: 4,
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       onClick: function onClick(e) {
         setSelectedMember(member);
         toggleBlockMemberPopup(e);
@@ -34981,7 +34984,8 @@ var EditChannel = function EditChannel(_ref) {
     borderColor = _useColor[THEME_COLORS.BORDER],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = reactRedux.useDispatch();
@@ -35126,7 +35130,7 @@ var EditChannel = function EditChannel(_ref) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader();
     },
@@ -35138,7 +35142,7 @@ var EditChannel = function EditChannel(_ref) {
     type: 'file'
   })), newAvatar.url && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     textColor: errorColor,
     onClick: handleToggleDeleteAvatarPopup,
     iconWidth: '20px'

package/index.modern.js

@@ -10937,7 +10937,7 @@ var CustomInput = styled.input(_templateObject10 || (_templateObject10 = _tagged
 }, function (props) {
   return props.color;
 }, function (props) {
-  return props.error ? "1px solid " + props.errorColor : colors.primary;
+  return props.error ? "1px solid " + props.errorColor : 'transparent';
 }, function (props) {
   return props.error ? "1px solid " + colors.errorBlur : props.theme !== THEME.DARK ? "2px solid " + props.borderColor : 'none';
 }, colors.gray0, function (props) {
@@ -19031,7 +19031,7 @@ var Channel = function Channel(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     surface2 = _useColor[THEME_COLORS.SURFACE_2],
     errorColor = _useColor[THEME_COLORS.WARNING],
@@ -19108,7 +19108,7 @@ var Channel = function Channel(_ref) {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
-    selectedBackgroundColor: selectedChannelBackground || focusBackground,
+    selectedBackgroundColor: selectedChannelBackground || hoverBackground,
     selectedChannelPaddings: selectedChannelPaddings,
     channelsPaddings: channelsPaddings,
     selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -19669,7 +19669,8 @@ var UsersPopup = function UsersPopup(_ref) {
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var selfUser = ChatClient.user;
@@ -19914,7 +19915,7 @@ var UsersPopup = function UsersPopup(_ref) {
     var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
     return /*#__PURE__*/React__default.createElement(ListRow, {
       isAdd: actionType !== 'createChat',
-      hoverBackground: colors.hoverBackgroundColor,
+      hoverBackground: hoverBackground,
       key: user.id,
       onClick: function onClick() {
         return actionType === 'createChat' && handleAddMember(user);
@@ -20689,7 +20690,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     uploadPhotoIcon = _ref.uploadPhotoIcon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var _useState = useState(false),
     showAddMemberPopup = _useState[0],
@@ -20714,14 +20715,14 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       leftAuto: !showSearch,
       iconColor: accentColor
     }, createChannelIcon || /*#__PURE__*/React__default.createElement(SvgAddChat, null))
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('broadcast');
     },
@@ -20729,7 +20730,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newChannelIcon || /*#__PURE__*/React__default.createElement(SvgCreateChannel, null), "New channel"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('group');
     },
@@ -20737,7 +20738,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newGroupIcon || /*#__PURE__*/React__default.createElement(SvgCreateGroup, null), "New group"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 3,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('direct');
     },
@@ -21811,7 +21812,8 @@ function ChatHeader(_ref) {
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    borderColor = _useColor[THEME_COLORS.BORDER];
+    borderColor = _useColor[THEME_COLORS.BORDER],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -21853,12 +21855,12 @@ function ChatHeader(_ref) {
     onClick: handleBackToChannels
   }, MobileBackButton || (/*#__PURE__*/React__default.createElement(MobileBackButtonWrapper, {
     onClick: handleBackToChannels,
-    hoverBackground: colors.primaryLight
+    hoverBackground: hoverBackground
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
   })))), activeChannel.isLinkedChannel && (/*#__PURE__*/React__default.createElement(BackButtonWrapper, {
     onClick: handleSwitchChannel,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     order: backButtonOrder
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
@@ -31476,12 +31478,12 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -32577,13 +32579,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: errorColor
   }, uploadErrorMessage), selectedMessagesMap && selectedMessagesMap.size > 0 ? (/*#__PURE__*/React__default.createElement(SelectedMessagesWrapper, null, selectedMessagesMap.size, " ", selectedMessagesMap.size > 1 ? ' messages selected' : ' message selected', /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleForwardMessagePopup,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '32px',
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forward"), /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleDeleteMessagePopup,
     color: errorColor,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '16px'
   }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
     onClick: handleCloseSelectMessages
@@ -32719,7 +32721,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, showChooseMediaAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader(mediaExtensions);
     },
@@ -32728,7 +32730,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null), chooseMediaAttachmentText != null ? chooseMediaAttachmentText : 'Photo or video')), showChooseFileAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader('');
     },
@@ -33243,7 +33245,7 @@ var Actions = function Actions(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     borderThemeColor = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
@@ -33413,7 +33415,7 @@ var Actions = function Actions(_ref) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: textPrimary,
       key: value + index,
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       onClick: function onClick() {
         return handleNotificationOnOff(value * oneHour);
       }
@@ -33421,28 +33423,28 @@ var Actions = function Actions(_ref) {
   }) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 1,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneHour);
     }
   }, "Mute for 1 hour"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 2,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(twoHours);
     }
   }, "Mute for 2 hours"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 3,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneDay);
     }
   }, "Mute for 1 day"))), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 4,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff();
     }
@@ -33730,7 +33732,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = useDispatch();
   var _useState = useState(false),
     isChanged = _useState[0],
@@ -33789,7 +33792,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     theme: theme
   }, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       key: role.name,
       onClick: function onClick() {
         return onChangeFunction(role.name);
@@ -33842,7 +33845,7 @@ var Members = function Members(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = useDispatch();
@@ -33989,14 +33992,14 @@ var Members = function Members(_ref) {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
-    hoverBackground: hoverBackgroundColor || focusBackground,
+    hoverBackground: hoverBackgroundColor || hoverBackground,
     addMemberIconColor: accentColor,
     fontSize: addMemberFontSize
   }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
     return /*#__PURE__*/React__default.createElement(MemberItem$1, {
       key: member.id + index,
       color: textPrimary,
-      hoverBackground: hoverBackgroundColor || focusBackground,
+      hoverBackground: hoverBackgroundColor || hoverBackground,
       onClick: function onClick() {
         return handleCreateChat(member);
       },
@@ -34031,7 +34034,7 @@ var Members = function Members(_ref) {
         setCloseMenu('1');
       },
       key: 1,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Change role")), showMakeMemberAdmin && checkActionPermission('changeMemberRole') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34040,7 +34043,7 @@ var Members = function Members(_ref) {
       },
       textColor: member.role === 'admin' ? errorColor : '',
       key: 2,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, member.role === 'admin' ? 'Revoke Admin' : 'Make Admin')), showKickMember && checkActionPermission('kickMember') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34049,11 +34052,11 @@ var Members = function Members(_ref) {
       },
       textColor: errorColor,
       key: 3,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Remove")), showKickAndBlockMember && checkActionPermission('kickAndBlockMember') && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: errorColor,
       key: 4,
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       onClick: function onClick(e) {
         setSelectedMember(member);
         toggleBlockMemberPopup(e);
@@ -34958,7 +34961,8 @@ var EditChannel = function EditChannel(_ref) {
     borderColor = _useColor[THEME_COLORS.BORDER],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = useDispatch();
@@ -35103,7 +35107,7 @@ var EditChannel = function EditChannel(_ref) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader();
     },
@@ -35115,7 +35119,7 @@ var EditChannel = function EditChannel(_ref) {
     type: 'file'
   })), newAvatar.url && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     textColor: errorColor,
     onClick: handleToggleDeleteAvatarPopup,
     iconWidth: '20px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.6.5-beta.2",
+  "version": "1.6.5-beta.3",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",