fix(voice): fixed header style

This commit is contained in:
trashtemp
2022-01-16 13:44:00 +01:00
parent 59fb8a3c0f
commit da5d82537d
6 changed files with 26 additions and 27 deletions

View File

@@ -1,10 +1,8 @@
import { BarChart } from "@styled-icons/boxicons-regular";
import {
Megaphone,
BarChartAlt2,
Microphone,
MicrophoneOff,
PhoneOff,
Speaker,
VolumeFull,
VolumeMute,
} from "@styled-icons/boxicons-solid";
@@ -41,16 +39,16 @@ const VoiceBase = styled.div`
align-items: center;
padding: 10px;
font-size: 14px;
font-weight: 600;
font-size: 13px;
font-weight: 500;
user-select: none;
gap: 6px;
color: var(--success);
border-radius: var(--border-radius);
background: var(--primary-background);
svg {
margin-inline-end: 4px;
cursor: help;
}
}
@@ -59,7 +57,7 @@ const VoiceBase = styled.div`
flex-direction: column;
.participants {
margin: 20px 0;
margin: 40px 20px;
justify-content: center;
user-select: none;
display: flex;
@@ -137,42 +135,42 @@ export default observer(({ id }: Props) => {
)}
</div>
<div className="status">
<BarChart size={20} />
<BarChartAlt2 size={16} />
{voiceState.status === VoiceStatus.CONNECTED && (
<Text id="app.main.channel.voice.connected" />
)}
</div>
<div className="actions">
<Tooltip content={"Leave call"} placement={"bottom"}>
<Tooltip content={"Leave call"} placement={"top"}>
<Button error onClick={voiceState.disconnect}>
<PhoneOff width={25} />
<PhoneOff width={20} />
</Button>
</Tooltip>
{voiceState.isProducing("audio") ? (
<Tooltip content={"Mute microphone"} placement={"bottom"}>
<Tooltip content={"Mute microphone"} placement={"top"}>
<Button
onClick={() => voiceState.stopProducing("audio")}>
<Microphone width={25} />
<Microphone width={20} />
</Button>
</Tooltip>
) : (
<Tooltip content={"Unmute microphone"} placement={"bottom"}>
<Tooltip content={"Unmute microphone"} placement={"top"}>
<Button
onClick={() => voiceState.startProducing("audio")}>
<MicrophoneOff width={25} />
<MicrophoneOff width={20} />
</Button>
</Tooltip>
)}
{voiceState.isDeaf() ? (
<Tooltip content={"Deafen"} placement={"bottom"}>
<Tooltip content={"Undeafen"} placement={"top"}>
<Button onClick={() => voiceState.stopDeafen()}>
<VolumeMute width={25} />
<VolumeMute width={20} />
</Button>
</Tooltip>
) : (
<Tooltip content={"Deafen"} placement={"bottom"}>
<Tooltip content={"Deafen"} placement={"top"}>
<Button onClick={() => voiceState.startDeafen()}>
<VolumeFull width={25} />
<VolumeFull width={20} />
</Button>
</Tooltip>
)}

View File

@@ -96,8 +96,8 @@ export const Profile = observer(() => {
<Text id="app.settings.pages.profile.profile_picture" />
</h3>
<FileUploader
width={80}
height={80}
width={92}
height={92}
style="icon"
fileType="avatars"
behaviour="upload"