Call in DM problem
ankar84 opened this issue · comments
Describe the bug
Call modals in DM are not fully correct in Dark mode
To Reproduce
Steps to reproduce the behavior:
- Start call in DM
- Check incoming call on other side
Expected behavior
All call buttons fully supported in Dark Mode
Screenshots
cam and mic issue
decline issue
Desktop (please complete the following information):
- OS: Windows 10
- Browser Chrome
- Version 107
Additional context
Call modals in DM is an Enterprise only feature.
You can, on each of the wrongly displayed buttons, right click and then hit "Inspect element", and then right-click on the button HTML block and "edit as HTML" and paste here the content, so we can find which element is missing the dark theme 😉
cam
<i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-4pvxx3">❴</i>
mic
<i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-4pvxx3"></i>
Decline button
<button type="button" class="rcx-box rcx-box--full rcx-box--animated rcx-button--secondary-danger rcx-button rcx-button-group__item rcx-css-1qcz93u">Decline</button>
I will need more HTML content, can you copy the whole div
(and all its content) that makes that call modal ? Because these icons are correctly styled when I add them somewhere in RocketChat page, so the issue must come from their parents
@ankar84 Could you get the whole div
for the call modal?
@ankar84 Could you get the whole
div
for the call modal?
In 5.4.1 Call modal looks good in general
<div class="rcx-box rcx-box--full rcx-css-i4bl7r"><div class="rcx-box rcx-box--full rcx-css-1bmjlil"><div class="rcx-box rcx-box--full rcx-css-127j9mz"><div class="rcx-box rcx-box--full rcx-css-1rfo3kt">Start a call</div></div><div role="group" class="rcx-box rcx-box--full rcx-button-group--medium rcx-button-group--align-start rcx-button-group"><button type="button" id="v64dp8a9j9j" title="Cam Off" class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"><i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-4pvxx3">❴</i></button><button type="button" id="0qrtxp2kmbbk" title="Mic On" class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-secondary-info rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"><i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-4pvxx3"></i></button></div></div><div class="rcx-box rcx-box--full rcx-css-vt0lm3"><div class="rcx-box rcx-box--full rcx-css-127j9mz"><figure aria-hidden="true" class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"><img src="/avatar/KarlanAAT01" class="rcx-avatar__element rcx-avatar__element--x40"></figure><div class="rcx-box rcx-box--full rcx-css-1cjgmiu"><span class="rcx-box rcx-box--full rcx-status-bullet rcx-status-bullet--offline " title="Offline"></span><div class="rcx-box rcx-box--full rcx-css-qwuhuw">Карлан Антон Андреевич (Test1)</div></div></div></div><div role="group" class="rcx-box rcx-box--full rcx-button-group--medium rcx-button-group--stretch rcx-button-group--align-start rcx-button-group rcx-css-hnz6cv"><button type="button" class="rcx-box rcx-box--full rcx-box--animated rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u">Start call</button></div></div>
<div class="rcx-box rcx-box--full rcx-css-i4bl7r"><div class="rcx-box rcx-box--full rcx-css-1bmjlil"><div class="rcx-box rcx-box--full rcx-css-127j9mz"><div class="rcx-box rcx-box--full rcx-css-1rfo3kt">Incoming call from</div></div><div role="group" class="rcx-box rcx-box--full rcx-button-group--medium rcx-button-group--align-start rcx-button-group"><button type="button" id="3dsfkxtrn8u" title="Cam Off" class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"><i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-video-off rcx-icon rcx-css-4pvxx3">❴</i></button><button type="button" id="y83dudj6dm" title="Mic On" class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-secondary-info rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"><i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-4pvxx3"></i></button></div></div><div class="rcx-box rcx-box--full rcx-css-vt0lm3"><div class="rcx-box rcx-box--full rcx-css-127j9mz"><figure aria-hidden="true" class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"><img src="/avatar/KarlanAAT01" class="rcx-avatar__element rcx-avatar__element--x40"></figure><div class="rcx-box rcx-box--full rcx-css-1cjgmiu"><span class="rcx-box rcx-box--full rcx-status-bullet rcx-status-bullet--online " title="Online"></span><div class="rcx-box rcx-box--full rcx-css-qwuhuw">Карлан Антон Андреевич (Test1)</div></div></div></div><div role="group" class="rcx-box rcx-box--full rcx-button-group--medium rcx-button-group--stretch rcx-button-group--align-start rcx-button-group rcx-css-hnz6cv"><button type="button" class="rcx-box rcx-box--full rcx-box--animated rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u">Accept</button><button type="button" class="rcx-box rcx-box--full rcx-box--animated rcx-button--secondary-danger rcx-button rcx-button-group__item rcx-css-1qcz93u">Decline</button><button type="button" id="mztvw44aub8" title="Mute and dismiss" class="rcx-box rcx-box--full rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"><i aria-hidden="true" class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"></i></button></div></div>