13 files changed, 109 insertions, 164 deletions

diff --git a/package.json b/package.json
index a8caa5c4d..d4387484d 100644
--- a/package.json
+++ b/package.json
@@ -108,11 +108,11 @@
     "react-jss": "10.10.0",
     "react-loader": "2.4.7",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.11.2",
+    "react-router-dom": "6.4.2",
     "react-sortable-hoc": "2.0.0",
-    "react-tooltip": "5.13.1",
+    "react-tooltip": "4.5.1",
     "react-topbar-progress-indicator": "4.1.1",
-    "react-transition-group": "4.4.5",
+    "react-transition-group": "1.2.1",
     "route-parser": "0.0.5",
     "sanitize-filename": "1.6.3",
     "semver": "7.5.1",
@@ -138,7 +138,6 @@
     "@types/node": "18.15.3",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
     "@types/tar": "6.1.5",
     "@types/uuid": "9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8d30c66a..dc116e9f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -204,20 +204,20 @@ dependencies:
     specifier: 3.16.1
     version: 3.16.1(react-dom@18.2.0)(react@18.2.0)
   react-router-dom:
-    specifier: 6.11.2
-    version: 6.11.2(react-dom@18.2.0)(react@18.2.0)
+    specifier: 6.4.2
+    version: 6.4.2(react-dom@18.2.0)(react@18.2.0)
   react-sortable-hoc:
     specifier: 2.0.0
     version: 2.0.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
   react-tooltip:
-    specifier: 5.13.1
-    version: 5.13.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: 4.5.1
+    version: 4.5.1(react-dom@18.2.0)(react@18.2.0)
   react-topbar-progress-indicator:
     specifier: 4.1.1
     version: 4.1.1(react@18.2.0)
   react-transition-group:
-    specifier: 4.4.5
-    version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+    specifier: 1.2.1
+    version: 1.2.1(react-dom@18.2.0)(react@18.2.0)
   route-parser:
     specifier: 0.0.5
     version: 0.0.5
@@ -297,9 +297,6 @@ devDependencies:
   '@types/react-dom':
     specifier: 18.2.4
     version: 18.2.4
-  '@types/react-transition-group':
-    specifier: 4.4.6
-    version: 4.4.6
   '@types/route-parser':
     specifier: 0.1.4
     version: 0.1.4
@@ -1514,16 +1511,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@floating-ui/core@1.2.6:
-    resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
-    dev: false
-
-  /@floating-ui/dom@1.2.8:
-    resolution: {integrity: sha512-XLwhYV90MxiHDq6S0rzFZj00fnDM+A1R9jhSioZoMsa7G0Q0i+Q4x40ajR8FHSdYDE1bgjG45mIWe6jtv9UPmg==}
-    dependencies:
-      '@floating-ui/core': 1.2.6
-    dev: false
-
   /@formatjs/cli@6.1.1:
     resolution: {integrity: sha512-prUblUQRJwFQqfmBtRWXZFKX+QmhXQkBKRl54hWTCwenskorK6+LTlm9TFbUDhfib2Xt3iDsjk7o9LpeU/AQCw==}
     engines: {node: '>= 16'}
@@ -2182,8 +2169,8 @@ packages:
     dev: true
     optional: true
 
-  /@remix-run/router@1.6.2:
-    resolution: {integrity: sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==}
+  /@remix-run/router@1.0.2:
+    resolution: {integrity: sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==}
     engines: {node: '>=14'}
     dev: false
 
@@ -2511,12 +2498,6 @@ packages:
       '@types/react': 18.2.7
     dev: true
 
-  /@types/react-transition-group@4.4.6:
-    resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==}
-    dependencies:
-      '@types/react': 18.2.7
-    dev: true
-
   /@types/react@18.2.7:
     resolution: {integrity: sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==}
     dependencies:
@@ -3928,6 +3909,10 @@ packages:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
     dev: false
 
+  /chain-function@1.0.1:
+    resolution: {integrity: sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==}
+    dev: false
+
   /chainsaw@0.1.0:
     resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==}
     dependencies:
@@ -4480,7 +4465,7 @@ packages:
   /css-jss@10.10.0:
     resolution: {integrity: sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       jss-preset-default: 10.10.0
     dev: false
@@ -4488,7 +4473,7 @@ packages:
   /css-vendor@2.0.8:
     resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       is-in-browser: 1.1.3
     dev: false
 
@@ -4811,11 +4796,10 @@ packages:
       esutils: 2.0.3
     dev: true
 
-  /dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+  /dom-helpers@3.4.0:
+    resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
     dependencies:
       '@babel/runtime': 7.21.5
-      csstype: 3.1.2
     dev: false
 
   /dot-prop@5.3.0:
@@ -7895,7 +7879,7 @@ packages:
   /jss-plugin-camel-case@10.10.0:
     resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       hyphenate-style-name: 1.0.4
       jss: 10.10.0
     dev: false
@@ -7903,7 +7887,7 @@ packages:
   /jss-plugin-compose@10.10.0:
     resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -7911,21 +7895,21 @@ packages:
   /jss-plugin-default-unit@10.10.0:
     resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
     dev: false
 
   /jss-plugin-expand@10.10.0:
     resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
     dev: false
 
   /jss-plugin-extend@10.10.0:
     resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -7933,14 +7917,14 @@ packages:
   /jss-plugin-global@10.10.0:
     resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
     dev: false
 
   /jss-plugin-nested@10.10.0:
     resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -7948,14 +7932,14 @@ packages:
   /jss-plugin-props-sort@10.10.0:
     resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
     dev: false
 
   /jss-plugin-rule-value-function@10.10.0:
     resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -7963,7 +7947,7 @@ packages:
   /jss-plugin-rule-value-observable@10.10.0:
     resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       symbol-observable: 1.2.0
     dev: false
@@ -7971,7 +7955,7 @@ packages:
   /jss-plugin-template@10.10.0:
     resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -7979,7 +7963,7 @@ packages:
   /jss-plugin-vendor-prefixer@10.10.0:
     resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       css-vendor: 2.0.8
       jss: 10.10.0
     dev: false
@@ -7987,7 +7971,7 @@ packages:
   /jss-preset-default@10.10.0:
     resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==}
     dependencies:
-      '@babel/runtime': 7.21.5
+      '@babel/runtime': 7.20.7
       jss: 10.10.0
       jss-plugin-camel-case: 10.10.0
       jss-plugin-compose: 10.10.0
@@ -10088,26 +10072,26 @@ packages:
       warning: 4.0.3
     dev: false
 
-  /react-router-dom@6.11.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==}
+  /react-router-dom@6.4.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==}
     engines: {node: '>=14'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.6.2
+      '@remix-run/router': 1.0.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.11.2(react@18.2.0)
+      react-router: 6.4.2(react@18.2.0)
     dev: false
 
-  /react-router@6.11.2(react@18.2.0):
-    resolution: {integrity: sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==}
+  /react-router@6.4.2(react@18.2.0):
+    resolution: {integrity: sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==}
     engines: {node: '>=14'}
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@remix-run/router': 1.6.2
+      '@remix-run/router': 1.0.2
       react: 18.2.0
     dev: false
 
@@ -10125,16 +10109,17 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-tooltip@5.13.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9NstDFdjyy6cIH9zjeT70zXTHlW/TIGCOWQmhkAyqLFeQioLg1FXvb9ec7AxSpn0zyFUkFSLdFYxZRuewti3Aw==}
+  /react-tooltip@4.5.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==}
+    engines: {npm: '>=6.13'}
     peerDependencies:
-      react: '>=16.14.0'
-      react-dom: '>=16.14.0'
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
     dependencies:
-      '@floating-ui/dom': 1.2.8
-      classnames: 2.3.2
+      prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+      uuid: 7.0.3
     dev: false
 
   /react-topbar-progress-indicator@4.1.1(react@18.2.0):
@@ -10146,18 +10131,19 @@ packages:
       topbar: 0.1.4
     dev: false
 
-  /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+  /react-transition-group@1.2.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==}
     peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
+      react: ^15.0.0 || ^16.0.0
+      react-dom: ^15.0.0 || ^16.0.0
     dependencies:
-      '@babel/runtime': 7.21.5
-      dom-helpers: 5.2.1
+      chain-function: 1.0.1
+      dom-helpers: 3.4.0
       loose-envify: 1.4.0
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+      warning: 3.0.0
     dev: false
 
   /react-window@1.8.8(react-dom@18.2.0)(react@18.2.0):
@@ -11955,6 +11941,11 @@ packages:
     hasBin: true
     dev: false
 
+  /uuid@7.0.3:
+    resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==}
+    hasBin: true
+    dev: false
+
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -12059,6 +12050,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /warning@3.0.0:
+    resolution: {integrity: sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
     dependencies:
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2b1e87023..fac424477 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import {
@@ -123,6 +123,10 @@ class Sidebar extends Component<IProps, IState> {
     };
   }
 
+  componentDidUpdate() {
+    ReactTooltip.rebuild();
+  }
+
   enableToolTip() {
     this.setState({ tooltipEnabled: true });
   }
@@ -228,8 +232,7 @@ class Sidebar extends Component<IProps, IState> {
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
               className="sidebar__button sidebar__button--new-service"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.addNewService,
               )} (${addNewServiceShortcutKey(false)})`}
             >
@@ -248,8 +251,7 @@ class Sidebar extends Component<IProps, IState> {
                 });
               }}
               className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.splitModeToggle,
               )} (${splitModeToggleShortcutKey(false)})`}
             >
@@ -266,8 +268,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--workspaces ${
                 isWorkspaceDrawerOpen ? 'is-active' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 workspaceToggleMessage,
               )} (${workspaceToggleShortcutKey(false)})`}
             >
@@ -284,8 +285,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--audio ${
                 isAppMuted ? 'is-muted' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 isAppMuted ? messages.unmute : messages.mute,
               )} (${muteFerdiumShortcutKey(false)})`}
             >
@@ -303,8 +303,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--todos ${
                 todosStore.isTodosPanelVisible ? 'is-active' : ''
               }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 todosToggleMessage,
               )} (${todosToggleShortcutKey(false)})`}
             >
@@ -323,8 +322,7 @@ class Sidebar extends Component<IProps, IState> {
                   },
                 });
               }}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+              data-tip={`${intl.formatMessage(
                 messages.lockFerdium,
               )} (${lockFerdiumShortcutKey(false)})`}
             >
@@ -333,20 +331,14 @@ class Sidebar extends Component<IProps, IState> {
           ) : null}
         </>
         {this.state.tooltipEnabled && (
-          <ReactTooltip
-            id="tooltip-sidebar-button"
-            place="right"
-            variant="dark"
-            style={{ height: 'auto', overflowY: 'unset' }}
-          />
+          <ReactTooltip place="right" type="dark" effect="solid" />
         )}
         {!hideSettingsButton && !isMenuCollapsed ? (
           <button
             type="button"
             onClick={() => openSettings({ path: 'app' })}
             className="sidebar__button sidebar__button--settings"
-            data-tooltip-id="tooltip-sidebar-button"
-            data-tooltip-content={`${intl.formatMessage(
+            data-tip={`${intl.formatMessage(
               globalMessages.settings,
             )} (${settingsShortcutKey(false)})`}
           >
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index c25af4427..c883066ce 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -359,8 +359,7 @@ class TabItem extends Component<IProps, IState> {
         onKeyDown={noop}
         role="presentation"
         onContextMenu={() => menu.popup()}
-        data-tooltip-id="tooltip-sidebar-button"
-        data-tooltip-content={`${service.name} ${acceleratorString(
+        data-tip={`${service.name} ${acceleratorString(
           shortcutIndex,
           cmdOrCtrlShortcutKey(false),
         )}`}
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index de323c06e..163b0a160 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
@@ -215,12 +215,7 @@ class AccountDashboard extends Component<IProp> {
             </>
           )}
         </div>
-        <ReactTooltip
-          place="right"
-          variant="dark"
-          float
-          style={{ height: 'auto' }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
   }
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index babe06b5a..bf2dfa9da 100644
--- a/src/components/settings/services/ServiceItem.tsx
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,6 +1,6 @@
 import { Component, ReactElement } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
@@ -73,8 +73,7 @@ class ServiceItem extends Component<IProps> {
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(messages.tooltipIsMuted)}
+              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
             />
           )}
         </td>
@@ -86,10 +85,7 @@ class ServiceItem extends Component<IProps> {
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(
-                messages.tooltipIsDisabled,
-              )}
+              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
             />
           )}
         </td>
@@ -101,18 +97,12 @@ class ServiceItem extends Component<IProps> {
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
-              data-tooltip-id="tooltip-service-item"
-              data-tooltip-content={intl.formatMessage(
+              data-tip={intl.formatMessage(
                 messages.tooltipNotificationsDisabled,
               )}
             />
           )}
-          <ReactTooltip
-            id="tooltip-service-item"
-            place="right"
-            variant="dark"
-            style={{ height: 'auto' }}
-          />
+          <ReactTooltip place="top" type="dark" effect="solid" />
         </td>
       </tr>
     );
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 77bccb8c3..6fd2d4426 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -3,7 +3,7 @@
 import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
 import Loader from '../../ui/Loader';
@@ -173,12 +173,7 @@ class TeamDashboard extends Component<IProps> {
             </>
           )}
         </div>
-        <ReactTooltip
-          place="right"
-          variant="dark"
-          float
-          style={{ height: 'auto' }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     ) : (
       <div className="settings__main">
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 0868271f3..2076f6ba6 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useEffect, useState } from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { CSSTransitionGroup } from 'react-transition-group';
 
 interface IProps {
   children: ReactNode;
@@ -7,6 +7,7 @@ interface IProps {
   className?: string;
   transitionAppear?: boolean;
   transitionLeave?: boolean;
+  transitionAppearTimeout?: number;
   transitionEnterTimeout?: number;
   transitionLeaveTimeout?: number;
 }
@@ -17,6 +18,7 @@ const Appear = ({
   className = '',
   transitionAppear = true,
   transitionLeave = true,
+  transitionAppearTimeout = 1500,
   transitionEnterTimeout = 1500,
   transitionLeaveTimeout = 1500,
 }: IProps): ReactElement | null => {
@@ -31,21 +33,17 @@ const Appear = ({
   }
 
   return (
-    <TransitionGroup
-      appear={transitionAppear}
-      exit={transitionLeave}
+    <CSSTransitionGroup
+      transitionName={transitionName}
+      transitionAppear={transitionAppear}
+      transitionLeave={transitionLeave}
+      transitionAppearTimeout={transitionAppearTimeout}
+      transitionEnterTimeout={transitionEnterTimeout}
+      transitionLeaveTimeout={transitionLeaveTimeout}
       className={className}
     >
-      <CSSTransition
-        classNames={transitionName}
-        timeout={{
-          enter: transitionEnterTimeout,
-          exit: transitionLeaveTimeout,
-        }}
-      >
-        {children}
-      </CSSTransition>
-    </TransitionGroup>
+      {children}
+    </CSSTransitionGroup>
   );
 };
 
diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx
index 54f45c843..e76fca6a2 100644
--- a/src/features/webControls/components/WebControls.tsx
+++ b/src/features/webControls/components/WebControls.tsx
@@ -9,7 +9,6 @@ import {
   mdiHomeOutline,
   mdiEarth,
 } from '@mdi/js';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
 import Icon from '../../../components/ui/icon';
 
 const messages = defineMessages({
@@ -152,8 +151,7 @@ class WebControls extends Component<IProps, IState> {
           onClick={goHome}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.goHome)}
+          data-tip={intl.formatMessage(messages.goHome)}
           data-place="bottom"
         >
           <Icon icon={mdiHomeOutline} className={classes.icon} />
@@ -163,8 +161,7 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoBack}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.back)}
+          data-tip={intl.formatMessage(messages.back)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowLeft} className={classes.icon} />
@@ -174,8 +171,7 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoForward}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.forward)}
+          data-tip={intl.formatMessage(messages.forward)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowRight} className={classes.icon} />
@@ -184,8 +180,7 @@ class WebControls extends Component<IProps, IState> {
           onClick={reload}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.reload)}
+          data-tip={intl.formatMessage(messages.reload)}
           data-place="bottom"
         >
           <Icon icon={mdiReload} className={classes.icon} />
@@ -237,18 +232,11 @@ class WebControls extends Component<IProps, IState> {
           onClick={openInBrowser}
           type="button"
           className={classes.button}
-          data-tooltip-id="tooltip-web-controls"
-          data-tooltip-content={intl.formatMessage(messages.openInBrowser)}
+          data-tip={intl.formatMessage(messages.openInBrowser)}
           data-place="bottom"
         >
           <Icon icon={mdiEarth} className={classes.icon} />
         </button>
-        <ReactTooltip
-          id="tooltip-web-controls"
-          place="bottom"
-          variant="dark"
-          style={{ height: 'auto' }}
-        />
       </div>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx
index 1c827e9dd..61284d81a 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.tsx
@@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 import { mdiPlusBox, mdiCog } from '@mdi/js';
 import { noop } from 'lodash';
 import { H1 } from '../../../components/ui/headline';
@@ -96,6 +96,7 @@ interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
 class WorkspaceDrawer extends Component<IProps> {
   componentDidMount(): void {
     try {
+      ReactTooltip.rebuild();
       getUserWorkspacesRequest.execute();
     } catch (error) {
       console.log(error);
@@ -120,8 +121,7 @@ class WorkspaceDrawer extends Component<IProps> {
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
             }}
-            data-tooltip-id="tooltip-workspaces-drawer"
-            data-tooltip-content={`${intl.formatMessage(
+            data-tip={`${intl.formatMessage(
               messages.workspacesSettingsTooltip,
             )}`}
           >
@@ -176,12 +176,7 @@ class WorkspaceDrawer extends Component<IProps> {
             <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
           </div>
         </div>
-        <ReactTooltip
-          id="tooltip-workspaces-drawer"
-          place="right"
-          variant="dark"
-          style={{ height: 'auto', zIndex: 210 }}
-        />
+        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 172b4192c..cf8c3b2ba 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -119,8 +119,7 @@ class WorkspaceDrawerItem extends Component<IProps> {
           }
         }}
         onKeyDown={noop}
-        data-tooltip-id="tooltip-workspaces-drawer"
-        data-tooltip-content={acceleratorString(
+        data-tip={acceleratorString(
           shortcutIndex,
           `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
         )}
diff --git a/src/routes.tsx b/src/routes.tsx
index beada5c96..04b6fa96f 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -51,7 +51,6 @@ class FerdiumRoutes extends Component<IProps> {
     const errorProps = { error: routeProps.stores.globalError.error || {} };
 
     return (
-      // @ts-expect-error
       <HistoryRouter history={history}>
         <Routes>
           <Route path="/auth" element={<AuthLayoutContainer {...routeProps} />}>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index eb7649bfa..8369c9298 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,5 @@
 @import '../../node_modules/electron-react-titlebar/assets/style';
 
-
 // modules
 @import './globals.scss';
 @import './reset.scss';