Call in DM problem

[ankar84]

Describe the bug
Call modals in DM are not fully correct in Dark mode

To Reproduce
Steps to reproduce the behavior:

1. Start call in DM
2. 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.

[ankar84]

@TBG-FR @paulchen @chotaire hello!!
I can try to get CSS items name under your instructions and can test your fix on my side.
Thank you, guys for your fantastic work!

[TBG-FR]

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 😉

[ankar84]

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>

[TBG-FR]

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

[pbaity]

@ankar84 Could you get the whole div for the call modal?

[ankar84]

@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>