Migrate to @tippyjs/react from react-tippy.

Fix strokes on home sidebar.
Add tooltips on servers.
Fix reply SVG direction.

src/components/common/Tooltip.tsx

@@ -1,26 +1,19 @@
-import styled from "styled-components";
 import { Children } from "../../types/Preact";
-import { Position, Tooltip as TooltipCore, TooltipProps } from "react-tippy";
+import Tippy, { TippyProps } from '@tippyjs/react';
 
-type Props = Omit<TooltipProps, 'html'> & {
-    position?: Position;
+type Props = Omit<TippyProps, 'children'> & {
     children: Children;
     content: Children;
 }
 
-const TooltipBase = styled.div`
-    padding: 8px;
-    font-size: 12px;
-    border-radius: 4px;
-    color: var(--foreground);
-    background: var(--secondary-background);
-`;
-
 export default function Tooltip(props: Props) {
+    const { children, content, ...tippyProps } = props;
+
     return (
-        <TooltipCore
-            {...props}
-            // @ts-expect-error
-            html={<TooltipBase>{props.content}</TooltipBase>} />
+        <Tippy content={content} {...tippyProps}>
+            {/*
+            // @ts-expect-error */}
+            <div>{ children }</div>
+        </Tippy>
     );
 }

src/components/common/messaging/attachments/MessageReply.tsx

@@ -28,6 +28,7 @@ export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?:
 
     svg {
         flex-shrink: 0;
+        transform: scaleX(-1);
         color: var(--tertiary-foreground);
     }
 

src/components/navigation/items/Item.module.scss

@@ -15,7 +15,6 @@
     transition: .1s ease-in-out background-color;
 
     color: var(--tertiary-foreground);
-    stroke: var(--tertiary-foreground);
 
     &.normal {
         height: 38px;
@@ -117,7 +116,6 @@
 
     &[data-alert="true"], &[data-active="true"], &:hover {
         color: var(--foreground);
-        stroke: var(--foreground);
 
         .subText {
             color: var(--secondary-foreground) !important;

src/components/navigation/left/ServerListSidebar.tsx

@@ -18,6 +18,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
 
 import logoSVG from '../../../assets/logo.svg';
+import Tooltip from "../../common/Tooltip";
 
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
@@ -174,9 +175,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                                 <ServerEntry
                                     active={active}
                                     onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
-                                    <Icon size={36} unread={entry.unread}>
-                                        <ServerIcon size={32} target={entry} />
-                                    </Icon>
+                                    <Tooltip content={entry.name} placement="right">
+                                        <Icon size={36} unread={entry.unread}>
+                                            <ServerIcon size={32} target={entry} />
+                                        </Icon>
+                                    </Tooltip>
                                 </ServerEntry>
                             </ConditionalLink>
                         )

src/main.tsx

@@ -11,8 +11,8 @@ const updateSW = registerSW({
     },
 })
 
-import { render } from "preact";
 import "./styles/index.scss";
+import { render } from "preact";
 import { App } from "./pages/app";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/styles/index.scss

@@ -3,4 +3,18 @@
 @import "fonts";
 @import "page";
 
-@import "react-overlapping-panels/dist"
+@import "react-overlapping-panels/dist";
+@import "tippy.js/dist/tippy.css";
+
+.tippy-box {
+    background: var(--secondary-background);
+}
+
+.tippy-content {
+    padding: 8px;
+    font-size: 12px;
+}
+
+.tippy-arrow {
+    color: var(--secondary-background);
+}