Center align the aside headers

This commit is contained in:
harshithpabbati 2022-01-28 16:48:36 +05:30
parent 648159bf79
commit 0927582f5c
4 changed files with 14 additions and 11 deletions

View File

@ -1,6 +1,6 @@
# Fitness Demo
![Basic Call](./image.png)
![Fitness Demo](./image.png)
### Live example

View File

@ -10,34 +10,37 @@ export const AsideHeader = () => {
<>
<div className="aside-header">
<div
className={`header ${showAside === PEOPLE_ASIDE && 'active'}`}
className={`tab ${showAside === PEOPLE_ASIDE && 'active'}`}
onClick={() => setShowAside(PEOPLE_ASIDE)}
>
People
<p>People</p>
</div>
<div
className={`header ${showAside === CHAT_ASIDE && 'active'}`}
className={`tab ${showAside === CHAT_ASIDE && 'active'}`}
onClick={() => setShowAside(CHAT_ASIDE)}
>
Chat
<p>Chat</p>
</div>
</div>
<style jsx>{`
.aside-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 5vh;
text-align: center;
}
.aside-header .header {
height: 100%;
width: 50%;
background: var(--gray-wash);
color: var(--gray-dark);
}
.tab {
height: 100%;
width: 50%;
cursor: pointer;
}
.header.active {
.tab.active {
background: var(--reverse)!important;
color: var(--text-default)!important;
font-weight: 900;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@ -240,7 +240,7 @@ export const ParticipantBar = ({
const maybePromoteActiveSpeaker = () => {
const fixedOther = fixed.find((f) => !f.isLocal);
// Ignore when speaker is already at first position or component unmounted
if (!fixedOther || fixedOther?.id === activeSpeakerId || !scrollEl) {
if (!fixedOther || fixedOther?.id === currentSpeakerId || !scrollEl) {
return false;
}