Fix issues introduced by #162.

Switch to more consistent naming scheme.

external/lang

@@ -1 +1 @@
-Subproject commit cab80e5c4840c91f53fbc43f97a98923ec3abc51
+Subproject commit 8676906ec594a42ee72dcc5ad227357bb300570d

src/components/common/ChannelIcon.tsx

@@ -52,9 +52,9 @@ export default observer(
         }
 
         // The border radius of the channel icon, if it's a server-channel it should be square (undefined).
-        let borderRadius;
+        let borderRadius: string | undefined = "--border-radius-channel-icon";
-        if (!isServerChannel) {
+        if (isServerChannel) {
-            borderRadius = "--border-radius-half";
+            borderRadius = undefined;
         }
 
         return (
@@ -65,7 +65,7 @@ export default observer(
                 height={size}
                 loading="lazy"
                 aria-hidden="true"
-                {...borderRadius}
+                borderRadius={borderRadius}
                 src={iconURL ?? fallback}
             />
         );

src/components/common/user/UserIcon.tsx

@@ -1,4 +1,5 @@
 import { MicrophoneOff } from "@styled-icons/boxicons-regular";
+import { VolumeMute } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { Presence } from "revolt-api/types/Users";
@@ -12,7 +13,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
-import {VolumeMute} from "@styled-icons/boxicons-solid";
 
 type VoiceStatus = "muted" | "deaf";
 interface Props extends IconBaseProps<User> {
@@ -48,7 +48,7 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     }
 
     ${(props) =>
-    (props.status === "muted" || props.status === "deaf") &&
+        (props.status === "muted" || props.status === "deaf") &&
         css`
             background: var(--error);
         `}
@@ -104,7 +104,7 @@ export default observer(
                 width={size}
                 height={size}
                 hover={hover}
-                borderRadius="--border-radius-user-profile-picture"
+                borderRadius="--border-radius-user-icon"
                 aria-hidden="true"
                 viewBox="0 0 32 32">
                 <foreignObject
@@ -127,11 +127,12 @@ export default observer(
                 {props.voice && (
                     <foreignObject x="22" y="22" width="10" height="10">
                         <VoiceIndicator status={props.voice}>
-                            {props.voice === "deaf" && (
+                            {(props.voice === "deaf" && (
                                 <VolumeMute size={6} />
-                            ) ||props.voice === "muted" && (
+                            )) ||
-                                <MicrophoneOff size={6} />
+                                (props.voice === "muted" && (
-                            )}
+                                    <MicrophoneOff size={6} />
+                                ))}
                         </VoiceIndicator>
                     </foreignObject>
                 )}

src/styles/_variables.scss

@@ -23,7 +23,9 @@
     --scrollbar-thickness-ff: thin;
     --border-radius: 6px;
     --border-radius-half: 50%;
-    --border-radius-user-profile-picture: var(--border-radius-half);
+
+    --border-radius-user-icon: var(--border-radius-half);
+    --border-radius-channel-icon: var(--border-radius-half);
     --border-radius-server-icon: var(--border-radius-half);
 
     --input-border-width: 2px;