From 1cb59ca40c87a09e5b4464a0e6119b5cc74ca7b7 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 16:24:36 +0100
Subject: [PATCH] Add SVG masks to server / user icons.

---
 src/components/common/user/UserIcon.tsx        |  2 +-
 .../navigation/left/ServerListSidebar.tsx      | 17 ++++++++---------
 src/components/ui/Masks.tsx                    | 18 ++++++++++++++++++
 src/pages/app.tsx                              |  2 ++
 4 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ui/Masks.tsx

diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 85064c54..9d7bb801 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -62,7 +62,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
             height={size}
             aria-hidden="true"
             viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32">
+            <foreignObject x="0" y="0" width="32" height="32" mask={props.status ? "url(#user)" : undefined}>
                 {
                     <img src={iconURL}
                         draggable={false} />
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 7607b207..d6429275 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,12 +1,13 @@
+import Tooltip from "../../common/Tooltip";
 import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
 import styled, { css } from "styled-components";
 import ServerIcon from "../../common/ServerIcon";
 import { Children } from "../../../types/Preact";
-import { Plus } from "@styled-icons/boxicons-regular";
+import UserIcon from "../../common/user/UserIcon";
 import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu, openContextMenu } from 'preact-context-menu';
+import { Plus } from "@styled-icons/boxicons-regular";
 import { connectState } from "../../../redux/connector";
 import { useLocation, useParams } from "react-router-dom";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -14,13 +15,10 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { attachContextMenu, openContextMenu } from 'preact-context-menu';
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
 
-import logoSVG from '../../../assets/logo.svg';
-import Tooltip from "../../common/Tooltip";
-import UserIcon from "../../common/user/UserIcon";
-
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
         <svg
@@ -29,13 +27,14 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             aria-hidden="true"
             viewBox="0 0 32 32"
         >
-            <foreignObject x="0" y="0" width="32" height="32">
+            <use href="#serverIndicator" />
+            <foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
                 { children }
             </foreignObject>
             {unread === 'unread' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"white"}
                 />
@@ -43,7 +42,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             {unread === 'mention' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"red"}
                 />
diff --git a/src/components/ui/Masks.tsx b/src/components/ui/Masks.tsx
new file mode 100644
index 00000000..3a1513f1
--- /dev/null
+++ b/src/components/ui/Masks.tsx
@@ -0,0 +1,18 @@
+// This file must be imported and used at least once for SVG masks.
+
+export default function Masks() {
+    return (
+        <svg width={0} height={0} style={{ position: 'fixed' }}>
+            <defs>
+                <mask id="server">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="5" r="7" fill={"black"} />
+                </mask>
+                <mask id="user">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="27" r="7" fill={"black"} />
+                </mask>
+            </defs>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index d77f32e3..9e1d0482 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -1,6 +1,7 @@
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
 import Preloader from "../components/ui/Preloader";
 import { Route, Switch } from "react-router-dom";
+import Masks from "../components/ui/Masks";
 import Context from "../context";
 
 import { lazy, Suspense } from "preact/compat";
@@ -10,6 +11,7 @@ const RevoltApp = lazy(() => import('./RevoltApp'));
 export function App() {
     return (
         <Context>
+            <Masks />
             {/* 
             // @ts-expect-error */}
             <Suspense fallback={<Preloader type="spinner" />}>