Skip to content

Commit

Permalink
fix: remove hover styles for touch devices inside the message menu (#307
Browse files Browse the repository at this point in the history
)

### 🎯 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
  • Loading branch information
szuperaz authored Sep 11, 2024
1 parent 8a0bda6 commit 0b60637
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,11 @@
}
}
}

@media (hover: none) {
.str-chat__message-actions-box {
.str-chat__message-actions-list-item-button:hover {
background-color: transparent;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -84,5 +84,11 @@
background-color: var(--str-chat__message-reactions-option-selected-background-color);
}
}

@media (hover: none) {
.str-chat__message-reactions-option:hover {
background-color: transparent;
}
}
}
}

0 comments on commit 0b60637

Please sign in to comment.