diff --git a/src/components/common/IconBase.tsx b/src/components/common/IconBase.tsx index 533c4f0ecdcdcad89fc5db6d931b3ed43f08b745..7c51f5421b8946a0a740dbd0e08af27b30c9931d 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 ba5322fce0b518325daad72a58a359fcc489f0d9..cebac94a305ebe5cd324bb9f759aa3462bac14c1 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 df0243b3c7b00025f5699e3fa5275350026426c9..18fdf1004620aaf2ee79e0e7e22c56cf66ec53db 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 1bd14ba47c39e36e9e654654498148b7f60e32c6..0f9028de00c99b2ef28796c6c30b1fe46409a437 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; +}