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 533c4f0..7c51f54 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 ba5322f..cebac94 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 df0243b..18fdf10 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 1bd14ba..0f9028d 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;
+}
--
GitLab