fix(voice): fixed header style

src/components/common/IconBase.tsx

@@ -21,7 +21,7 @@ interface IconModifiers {
 
 export default styled.svg<IconModifiers>`
     flex-shrink: 0;
-
+    cursor: pointer;
     img {
         width: 100%;
         height: 100%;

src/components/common/messaging/attachments/MessageReply.tsx

@@ -60,6 +60,7 @@ export const ReplyBase = styled.div<{
     }
 
     .user {
+        //margin-inline-start: 12px;
         gap: 6px;
         display: flex;
         flex-shrink: 0;
@@ -98,6 +99,10 @@ export const ReplyBase = styled.div<{
         transition: transform ease-in-out 0.1s;
         filter: brightness(1);
 
+        > svg {
+            flex-shrink: 0;
+        }
+
         > span > p {
             display: flex;
             align-items: center;

src/components/common/user/UserIcon.tsx

@@ -1,5 +1,4 @@
-import { MicrophoneOff } from "@styled-icons/boxicons-regular";
-import { VolumeMute } from "@styled-icons/boxicons-solid";
+import { VolumeMute, MicrophoneOff } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { Masquerade } from "revolt-api/types/Channels";
@@ -44,10 +43,6 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     align-items: center;
     justify-content: center;
 
-    svg {
-        stroke: white;
-    }
-
     ${(props) =>
         (props.status === "muted" || props.status === "deaf") &&
         css`

src/components/markdown/Markdown.module.scss

@@ -92,6 +92,7 @@
 
     p > code {
         padding: 1px 4px;
+        flex-shrink: 0;
     }
 
     code {

src/pages/channels/voice/VoiceHeader.tsx

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

src/pages/settings/panes/Profile.tsx

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