From 05ddc542cc6a5a309d90350636cc1d2aee999c19 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Mon, 29 May 2023 06:37:07 +0530
Subject: Update react-router-dom, react-tooltip & react-transition-group
 latest version (#1199)

---
 src/components/settings/services/ServiceItem.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'src/components/settings/services')

diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index bf2dfa9da..babe06b5a 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 ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
@@ -73,7 +73,8 @@ class ServiceItem extends Component<IProps> {
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
-              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(messages.tooltipIsMuted)}
             />
           )}
         </td>
@@ -85,7 +86,10 @@ class ServiceItem extends Component<IProps> {
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
-              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(
+                messages.tooltipIsDisabled,
+              )}
             />
           )}
         </td>
@@ -97,12 +101,18 @@ class ServiceItem extends Component<IProps> {
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
-              data-tip={intl.formatMessage(
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(
                 messages.tooltipNotificationsDisabled,
               )}
             />
           )}
-          <ReactTooltip place="top" type="dark" effect="solid" />
+          <ReactTooltip
+            id="tooltip-service-item"
+            place="right"
+            variant="dark"
+            style={{ height: 'auto' }}
+          />
         </td>
       </tr>
     );
-- 
cgit v1.2.3-54-g00ecf