Migrate to @tippyjs/react from react-tippy.

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

package.json

@@ -34,6 +34,7 @@
     "@styled-icons/boxicons-regular": "^10.34.0",
     "@styled-icons/boxicons-solid": "^10.34.0",
     "@styled-icons/simple-icons": "^10.33.0",
+    "@tippyjs/react": "^4.2.5",
     "@traptitech/markdown-it-katex": "^3.4.3",
     "@traptitech/markdown-it-spoiler": "^1.1.6",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -76,7 +77,6 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
-    "react-tippy": "^1.4.0",
     "redux": "^4.1.0",
     "revolt.js": "4.3.3-alpha.2",
     "rimraf": "^3.0.2",

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'> & {
+type Props = Omit<TippyProps, 'children'> & {
-    position?: Position;
     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
+        <Tippy content={content} {...tippyProps}>
-            {...props}
+            {/*
-            // @ts-expect-error
+            // @ts-expect-error */}
-            html={<TooltipBase>{props.content}</TooltipBase>} />
+            <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 })}>
+                                    <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);
+}

yarn.lock

@@ -1001,6 +1001,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.8.3":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@preact/preset-vite@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@preact/preset-vite/-/preset-vite-2.1.0.tgz#66934767ca0b49c1ea1cc00e82d3d43f2caba7d1"
@@ -1130,6 +1135,13 @@
     ejs "^2.6.1"
     magic-string "^0.25.0"
 
+"@tippyjs/react@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
+  integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@traptitech/markdown-it-katex@^3.4.3":
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/@traptitech/markdown-it-katex/-/markdown-it-katex-3.4.3.tgz#23dacbd276ac748409a189550e0ecd764cfde8cf"
@@ -3102,11 +3114,6 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-popper.js@^1.11.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 postcss-value-parser@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -3297,13 +3304,6 @@ react-side-effect@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
-react-tippy@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.4.0.tgz#e8a8b4085ec985e5c94fe128918b733b588a1465"
-  integrity sha512-r/hM5XK9Ztr2ZY7IWKuRmISTlUPS/R6ddz6PO2EuxCgW+4JBcGZRPU06XcVPRDCOIiio8ryBQFrXMhFMhsuaHA==
-  dependencies:
-    popper.js "^1.11.1"
-
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -3799,6 +3799,13 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tippy.js@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
+  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
+  dependencies:
+    "@popperjs/core" "^2.8.3"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"