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 { attachment?: Attachment; size: number; + hover?: boolean; animate?: boolean; } interface IconModifiers { square?: boolean; + hover?: boolean; } export default styled.svg` @@ -27,6 +29,14 @@ export default styled.svg` border-radius: 50%; `} } + + ${(props) => + props.hover && + css` + &:hover .icon { + filter: brightness(0.8); + } + `} `; export const ImageIconBase = styled.img` @@ -38,4 +48,12 @@ export const ImageIconBase = styled.img` 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"> {} 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 /> 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; +}