Hover animation for home button.

Fix svg alignment in foreign objects.

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);
+            }
+        `}
 `;

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>

src/components/navigation/left/ServerListSidebar.tsx

 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>

src/styles/_elements.scss

@@ -48,3 +48,7 @@ hr {
     height: 1px;
     flex-grow: 1;
 }
+
+foreignObject > svg {
+    vertical-align: top !important;
+}