From 1d42f0a60a50ed842ee7aa50a990b252d3bd9355 Mon Sep 17 00:00:00 2001
From: LambdAurora <aurora42lambda@gmail.com>
Date: Mon, 30 Aug 2021 23:39:02 +0200
Subject: [PATCH] Introduce new border radius variables for stable theming.

---
 src/components/common/ChannelIcon.tsx   |  8 +++++++-
 src/components/common/IconBase.tsx      | 13 ++++++++-----
 src/components/common/ServerIcon.tsx    |  1 +
 src/components/common/user/UserIcon.tsx |  3 ++-
 src/styles/_variables.scss              |  2 ++
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/common/ChannelIcon.tsx b/src/components/common/ChannelIcon.tsx
index b49a52a5..48a88400 100644
--- a/src/components/common/ChannelIcon.tsx
+++ b/src/components/common/ChannelIcon.tsx
@@ -51,6 +51,12 @@ export default observer(
             }
         }
 
+        // The border radius of the channel icon, if it's a server-channel it should be square (undefined).
+        let borderRadius;
+        if (!isServerChannel) {
+            borderRadius = "--border-radius-half";
+        }
+
         return (
             // ! TODO: replace fallback with <picture /> + <source />
             <ImageIconBase
@@ -59,7 +65,7 @@ export default observer(
                 height={size}
                 loading="lazy"
                 aria-hidden="true"
-                square={isServerChannel}
+                {...borderRadius}
                 src={iconURL ?? fallback}
             />
         );
diff --git a/src/components/common/IconBase.tsx b/src/components/common/IconBase.tsx
index cdef1cf1..a1ee46fc 100644
--- a/src/components/common/IconBase.tsx
+++ b/src/components/common/IconBase.tsx
@@ -11,7 +11,10 @@ export interface IconBaseProps<T> {
 }
 
 interface IconModifiers {
-    square?: boolean;
+    /**
+     * If this is undefined or null then the icon defaults to square, else uses the CSS variable given.
+     */
+    borderRadius?: string;
     hover?: boolean;
 }
 
@@ -24,9 +27,9 @@ export default styled.svg<IconModifiers>`
         object-fit: cover;
 
         ${(props) =>
-            !props.square &&
+            props.borderRadius &&
             css`
-                border-radius: var(--border-radius-half);
+                border-radius: var(${props.borderRadius});
             `}
     }
 
@@ -44,9 +47,9 @@ export const ImageIconBase = styled.img<IconModifiers>`
     object-fit: cover;
 
     ${(props) =>
-        !props.square &&
+        props.borderRadius &&
         css`
-            border-radius: var(--border-radius-half);
+            border-radius: var(${props.borderRadius});
         `}
 
     ${(props) =>
diff --git a/src/components/common/ServerIcon.tsx b/src/components/common/ServerIcon.tsx
index 2734a140..d7d2977c 100644
--- a/src/components/common/ServerIcon.tsx
+++ b/src/components/common/ServerIcon.tsx
@@ -59,6 +59,7 @@ export default observer(
                 {...imgProps}
                 width={size}
                 height={size}
+                borderRadius="--border-radius-server-icon"
                 src={iconURL}
                 loading="lazy"
                 aria-hidden="true"
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 81fd852a..369cd404 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 import { useContext } from "preact/hooks";
 
 import { ThemeContext } from "../../../context/Theme";
-import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
@@ -104,6 +104,7 @@ export default observer(
                 width={size}
                 height={size}
                 hover={hover}
+                borderRadius="--border-radius-user-profile-picture"
                 aria-hidden="true"
                 viewBox="0 0 32 32">
                 <foreignObject
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index f1e9556d..1f4f9e54 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -21,6 +21,8 @@
     --app-height: 100vh;
     --border-radius: 6px;
     --border-radius-half: 50%;
+    --border-radius-user-profile-picture: var(--border-radius-half);
+    --border-radius-server-icon: var(--border-radius-half);
 
     --input-border-width: 2px;
     --textarea-padding: 16px;