Skip to content

Commit 0b60637

Browse files
authored
fix: remove hover styles for touch devices inside the message menu (#307)
### 🎯 Goal On touch devices, you don't need special styles for hover action. However, mobile OS-es still handle the `:hover` CSS selector, but it can be confusing to the user when they accidentally activate the `:hover` selector, this PR removes the `:hover` styles for touch devices inside the message menu. ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
1 parent 8a0bda6 commit 0b60637

2 files changed

Lines changed: 14 additions & 0 deletions

File tree

src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,11 @@
6767
}
6868
}
6969
}
70+
71+
@media (hover: none) {
72+
.str-chat__message-actions-box {
73+
.str-chat__message-actions-list-item-button:hover {
74+
background-color: transparent;
75+
}
76+
}
77+
}

src/v2/styles/MessageReactions/MessageReactionsSelector-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,11 @@
8484
background-color: var(--str-chat__message-reactions-option-selected-background-color);
8585
}
8686
}
87+
88+
@media (hover: none) {
89+
.str-chat__message-reactions-option:hover {
90+
background-color: transparent;
91+
}
92+
}
8793
}
8894
}

0 commit comments

Comments
 (0)