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>