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

|

|
||||||
|
|
||||||
### Live example
|
### Live example
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,34 +10,37 @@ export const AsideHeader = () => {
|
||||||
<>
|
<>
|
||||||
<div className="aside-header">
|
<div className="aside-header">
|
||||||
<div
|
<div
|
||||||
className={`header ${showAside === PEOPLE_ASIDE && 'active'}`}
|
className={`tab ${showAside === PEOPLE_ASIDE && 'active'}`}
|
||||||
onClick={() => setShowAside(PEOPLE_ASIDE)}
|
onClick={() => setShowAside(PEOPLE_ASIDE)}
|
||||||
>
|
>
|
||||||
People
|
<p>People</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`header ${showAside === CHAT_ASIDE && 'active'}`}
|
className={`tab ${showAside === CHAT_ASIDE && 'active'}`}
|
||||||
onClick={() => setShowAside(CHAT_ASIDE)}
|
onClick={() => setShowAside(CHAT_ASIDE)}
|
||||||
>
|
>
|
||||||
Chat
|
<p>Chat</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style jsx>{`
|
<style jsx>{`
|
||||||
.aside-header {
|
.aside-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5vh;
|
height: 5vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
|
||||||
.aside-header .header {
|
|
||||||
height: 100%;
|
|
||||||
width: 50%;
|
|
||||||
background: var(--gray-wash);
|
background: var(--gray-wash);
|
||||||
color: var(--gray-dark);
|
color: var(--gray-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.active {
|
.tab.active {
|
||||||
background: var(--reverse)!important;
|
background: var(--reverse)!important;
|
||||||
color: var(--text-default)!important;
|
color: var(--text-default)!important;
|
||||||
font-weight: 900;
|
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 maybePromoteActiveSpeaker = () => {
|
||||||
const fixedOther = fixed.find((f) => !f.isLocal);
|
const fixedOther = fixed.find((f) => !f.isLocal);
|
||||||
// Ignore when speaker is already at first position or component unmounted
|
// 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;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue