From e1ffefe2ba808bff429f72654e9a6a0b227c31bb Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Tue, 3 Aug 2021 15:37:19 +0100
Subject: [PATCH] Hover animation for home button. Fix svg alignment in foreign
 objects.

---
 src/components/common/IconBase.tsx             | 18 ++++++++++++++++++
 src/components/common/user/UserIcon.tsx        |  3 +++
 .../navigation/left/ServerListSidebar.tsx      |  5 ++---
 src/styles/_elements.scss                      |  4 ++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/common/IconBase.tsx b/src/components/common/IconBase.tsx
index 533c4f0e..7c51f542 100644
--- a/src/components/common/IconBase.tsx
+++ b/src/components/common/IconBase.tsx
@@ -6,11 +6,13 @@ export interface IconBaseProps<T> {
     attachment?: Attachment;
 
     size: number;
+    hover?: boolean;
     animate?: boolean;
 }
 
 interface IconModifiers {
     square?: boolean;
+    hover?: boolean;
 }
 
 export default styled.svg<IconModifiers>`
@@ -27,6 +29,14 @@ export default styled.svg<IconModifiers>`
                 border-radius: 50%;
             `}
     }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover .icon {
+                filter: brightness(0.8);
+            }
+        `}
 `;
 
 export const ImageIconBase = styled.img<IconModifiers>`
@@ -38,4 +48,12 @@ export const ImageIconBase = styled.img<IconModifiers>`
         css`
             border-radius: 50%;
         `}
+
+    ${(props) =>
+        props.hover &&
+        css`
+            &:hover img {
+                filter: brightness(0.8);
+            }
+        `}
 `;
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index ba5322fc..cebac94a 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -63,6 +63,7 @@ export default observer(
             status,
             animate,
             mask,
+            hover,
             children,
             as,
             ...svgProps
@@ -79,6 +80,7 @@ export default observer(
                 {...svgProps}
                 width={size}
                 height={size}
+                hover={hover}
                 aria-hidden="true"
                 viewBox="0 0 32 32">
                 <foreignObject
@@ -86,6 +88,7 @@ export default observer(
                     y="0"
                     width="32"
                     height="32"
+                    class="icon"
                     mask={mask ?? (status ? "url(#user)" : undefined)}>
                     {<img src={iconURL} draggable={false} loading="lazy" />}
                 </foreignObject>
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index df0243b3..18fdf100 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,11 +1,10 @@
 import { Plus } from "@styled-icons/boxicons-regular";
-import { Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
-import { attachContextMenu, openContextMenu } from "preact-context-menu";
+import { attachContextMenu } from "preact-context-menu";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -18,7 +17,6 @@ import { Unreads } from "../../../redux/reducers/unreads";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import logoSVG from "../../../assets/logo.svg";
 import ServerIcon from "../../common/ServerIcon";
 import Tooltip from "../../common/Tooltip";
 import UserHover from "../../common/user/UserHover";
@@ -267,6 +265,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                                         target={client.user}
                                         size={32}
                                         status
+                                        hover
                                     />
                                 </Icon>
                             </UserHover>
diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss
index 1bd14ba4..0f9028de 100644
--- a/src/styles/_elements.scss
+++ b/src/styles/_elements.scss
@@ -48,3 +48,7 @@ hr {
     height: 1px;
     flex-grow: 1;
 }
+
+foreignObject > svg {
+    vertical-align: top !important;
+}