Center align the aside headers
This commit is contained in:
parent
648159bf79
commit
0927582f5c
|
|
@ -1,6 +1,6 @@
|
|||
# Fitness Demo
|
||||
|
||||

|
||||

|
||||
|
||||
### Live example
|
||||
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue