From 8353b61a862c328e0b4715c07d516f181fbd95fa Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Tue, 29 Mar 2022 16:53:51 -0300
Subject: [PATCH 01/10] [DDW-1028] Add tooltips

---
 .../sidebar/SidebarCategory.messages.ts       | 24 +++++
 .../components/sidebar/SidebarCategory.tsx    | 52 ++++++----
 .../app/components/widgets/NewsFeedIcon.scss  | 20 ++--
 .../app/components/widgets/NewsFeedIcon.tsx   | 68 +++++++++----
 .../components/widgets/NodeSyncStatusIcon.tsx |  2 +
 source/renderer/app/config/sidebarConfig.ts   |  5 +
 .../DiscreetToggleTopBar.messages.ts          |  9 +-
 .../DiscreetToggleTopBar.scss                 | 14 +--
 .../DiscreetToggleTopBar.tsx                  | 19 ++--
 .../app/i18n/locales/defaultMessages.json     | 98 ++++++++++++++++---
 source/renderer/app/i18n/locales/en-US.json   | 10 +-
 source/renderer/app/i18n/locales/ja-JP.json   | 10 +-
 12 files changed, 230 insertions(+), 101 deletions(-)
 create mode 100644 source/renderer/app/components/sidebar/SidebarCategory.messages.ts

diff --git a/source/renderer/app/components/sidebar/SidebarCategory.messages.ts b/source/renderer/app/components/sidebar/SidebarCategory.messages.ts
new file mode 100644
index 0000000000..8e683e9616
--- /dev/null
+++ b/source/renderer/app/components/sidebar/SidebarCategory.messages.ts
@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  wallets: {
+    id: 'sidebar.categoryTooltip.wallets',
+    defaultMessage: '!!!Wallets',
+    description: 'Text for the tooltip of wallets category',
+  },
+  staking: {
+    id: 'sidebar.categoryTooltip.staking',
+    defaultMessage: '!!!Staking',
+    description: 'Text for the tooltip of staking category',
+  },
+  settings: {
+    id: 'sidebar.categoryTooltip.settings',
+    defaultMessage: '!!!Settings',
+    description: 'Text for the tooltip of settings category',
+  },
+  voting: {
+    id: 'sidebar.categoryTooltip.voting',
+    defaultMessage: '!!!Voting',
+    description: 'Text for the tooltip of voting category',
+  },
+});
diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx
index a4412b1cde..69c8971615 100644
--- a/source/renderer/app/components/sidebar/SidebarCategory.tsx
+++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx
@@ -5,38 +5,52 @@ import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
 import { camelCase } from 'lodash';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
+import { injectIntl } from 'react-intl';
 import type { SidebarCategoryInfo } from '../../config/sidebarConfig';
 import styles from './SidebarCategory.scss';
+import { messages } from './SidebarCategory.messages';
+import type { Intl } from '../../types/i18nTypes';
 
 type Props = {
   category: SidebarCategoryInfo;
+  intl: Intl;
   isActive: boolean;
   onClick: (...args: Array<any>) => any;
   content?: Node;
 };
 
-@observer
-class SidebarCategory extends Component<Props> {
-  render() {
-    const { category, isActive, onClick, content } = this.props;
-    const { name, icon, route } = category;
-    const className = camelCase(name);
-    const componentStyles = classNames(
-      styles.component,
-      className,
-      styles[className],
-      {
-        [styles.active]: isActive,
-      }
-    );
-    const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
-    return (
+function SidebarCategory({
+  category,
+  intl,
+  isActive,
+  onClick,
+  content,
+}: Props) {
+  const { name, icon, route, tooltipTextId } = category;
+  const className = camelCase(name);
+  const componentStyles = classNames(
+    styles.component,
+    className,
+    styles[className],
+    {
+      [styles.active]: isActive,
+    }
+  );
+  const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
+  return (
+    <PopOver
+      delay={[100, 500]}
+      offset={[0, -20]}
+      content={intl.formatMessage(messages[tooltipTextId])}
+      placement="bottom"
+    >
       <button className={componentStyles} onClick={() => onClick(route)}>
         <SVGInline svg={icon} className={iconClassName} />
         {content}
       </button>
-    );
-  }
+    </PopOver>
+  );
 }
 
-export default SidebarCategory;
+export default injectIntl(observer(SidebarCategory));
diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss
index d737e47e72..62b380dfbd 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.scss
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss
@@ -17,7 +17,7 @@
     @extend .dot;
   }
 
-  .icon {
+  .button {
     border-radius: 50%;
     cursor: pointer;
     display: block;
@@ -25,6 +25,14 @@
     position: relative;
     width: 44px;
 
+    &:hover {
+      background-color: var(
+        --theme-news-feed-icon-toggle-hover-background-color
+      );
+    }
+  }
+
+  .icon {
     svg {
       height: 22px;
       left: 11px;
@@ -36,12 +44,6 @@
         stroke: var(--theme-news-feed-icon-color);
       }
     }
-
-    &:hover {
-      background-color: var(
-        --theme-news-feed-icon-toggle-hover-background-color
-      );
-    }
   }
 }
 
@@ -59,3 +61,7 @@
     width: 8px;
   }
 }
+
+.tooltip {
+  white-space: nowrap;
+}
diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.tsx b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
index 70f9f971ee..b627066fde 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.tsx
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
@@ -1,33 +1,59 @@
-import React, { Component } from 'react';
+import React from 'react';
 import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
+import { defineMessages, injectIntl } from 'react-intl';
 import newsFeedIcon from '../../assets/images/top-bar/news-feed-icon.inline.svg';
 import styles from './NewsFeedIcon.scss';
+import type { Intl } from '../../types/i18nTypes';
 
 type Props = {
+  intl: Intl;
   onNewsFeedIconClick: (...args: Array<any>) => any;
   newsFeedIconClass?: string;
   hasNotification: boolean;
   hasUpdate: boolean;
 };
-export default class NewsFeedIcon extends Component<Props> {
-  render() {
-    const {
-      onNewsFeedIconClick,
-      newsFeedIconClass,
-      hasNotification,
-      hasUpdate,
-    } = this.props;
-    const componentClasses = classNames([
-      styles.component,
-      hasNotification && !hasUpdate ? styles.notificationDot : null,
-      hasUpdate ? styles.updateDot : null,
-      newsFeedIconClass,
-    ]);
-    return (
-      <button className={componentClasses} onClick={onNewsFeedIconClick}>
-        <SVGInline className={styles.icon} svg={newsFeedIcon} />
-      </button>
-    );
-  }
+
+const messages = defineMessages({
+  iconTooltip: {
+    id: 'news.newsfeed.iconTooltip',
+    defaultMessage: '!!!Newsfeed',
+    description: 'Newsfeed',
+  },
+});
+
+function NewsFeedIcon({
+  intl,
+  onNewsFeedIconClick,
+  newsFeedIconClass,
+  hasNotification,
+  hasUpdate,
+}: Props) {
+  const buttonClasses = classNames([
+    styles.button,
+    hasNotification && !hasUpdate ? styles.notificationDot : null,
+    hasUpdate ? styles.updateDot : null,
+    newsFeedIconClass,
+  ]);
+  return (
+    <div className={styles.component}>
+      <PopOver
+        appendTo="parent"
+        delay={[100, 500]}
+        offset={[0, 0]}
+        content={
+          <span className={styles.tooltip}>
+            {intl.formatMessage(messages.iconTooltip)}
+          </span>
+        }
+      >
+        <button className={buttonClasses} onClick={onNewsFeedIconClick}>
+          <SVGInline className={styles.icon} svg={newsFeedIcon} />
+        </button>
+      </PopOver>
+    </div>
+  );
 }
+
+export default injectIntl(NewsFeedIcon);
diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
index f60a313d46..0695b6f19b 100644
--- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
+++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
@@ -39,6 +39,8 @@ export default class NodeSyncStatusIcon extends Component<Props> {
     return (
       <div className={componentClasses}>
         <PopOver
+          delay={[100, 500]}
+          offset={[0, 10]}
           content={intl.formatMessage(messages.blocksSynced, {
             percentage: formattedNumber(percentage),
           })}
diff --git a/source/renderer/app/config/sidebarConfig.ts b/source/renderer/app/config/sidebarConfig.ts
index cd856e97a9..c79bc58345 100644
--- a/source/renderer/app/config/sidebarConfig.ts
+++ b/source/renderer/app/config/sidebarConfig.ts
@@ -18,12 +18,14 @@ export type SidebarCategoryInfo = {
   name: string;
   icon: string;
   route: string;
+  tooltipTextId?: string;
 };
 export const CATEGORIES_BY_NAME = {
   WALLETS: {
     name: 'WALLETS',
     icon: walletsIcon,
     route: ROUTES.WALLETS.ROOT,
+    tooltipTextId: 'wallets',
   },
   PAPER_WALLET_CREATE_CERTIFICATE: {
     name: 'PAPER_WALLET_CREATE_CERTIFICATE',
@@ -39,11 +41,13 @@ export const CATEGORIES_BY_NAME = {
     name: 'STAKING',
     icon: delegationProgressIcon,
     route: ROUTES.STAKING.ROOT,
+    tooltipTextId: 'staking',
   },
   SETTINGS: {
     name: 'SETTINGS',
     icon: settingsIcon,
     route: ROUTES.SETTINGS.ROOT,
+    tooltipTextId: 'settings',
   },
   NETWORK_INFO: {
     name: 'NETWORK_INFO',
@@ -54,6 +58,7 @@ export const CATEGORIES_BY_NAME = {
     name: 'VOTING',
     icon: votingIcon,
     route: ROUTES.VOTING.REGISTRATION,
+    tooltipTextId: 'voting',
   },
 };
 export const CATEGORIES_WITH_DELEGATION_COUNTDOWN = [
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
index 567512ac2f..1e0b216ea6 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
@@ -3,19 +3,14 @@ import { defineMessages } from 'react-intl';
 export const messages = defineMessages({
   on: {
     id: 'discreetMode.discreetToggle.on',
-    defaultMessage: '!!!Toggle discreet mode on.',
+    defaultMessage: '!!!Toggle discreet mode on',
     description:
       'Text for the tooltip on "discreet mode" button when mode is on',
   },
   off: {
     id: 'discreetMode.discreetToggle.off',
-    defaultMessage: '!!!Toggle discreet mode off.',
+    defaultMessage: '!!!Toggle discreet mode off',
     description:
       'Text for the tooltip on "discreet mode" button when mode is off',
   },
-  description: {
-    id: 'discreetMode.discreetToggle.description',
-    defaultMessage: '!!!You can toggle auto discreet mode in <b>Settings</b>.',
-    description: 'Text for the tooltip on "discreet mode" button description',
-  },
 });
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
index 6e7e5d9676..099d541431 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
@@ -27,16 +27,6 @@
   }
 }
 
-.popOverRoot {
-  pointer-events: all;
-  width: 210px;
-
-  .content {
-    font-family: var(--font-regular);
-    font-size: 14px;
-
-    b {
-      font-family: var(--font-semibold);
-    }
-  }
+.tooltip {
+  white-space: nowrap;
 }
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
index 838e8aacec..81936e8fbe 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
-import { injectIntl, FormattedHTMLMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import styles from './DiscreetToggleTopBar.scss';
 import { messages } from './DiscreetToggleTopBar.messages';
 import { useDiscreetModeFeature } from '../../context';
@@ -16,22 +16,15 @@ type Props = {
 
 const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
   const { isDiscreetMode, toggleDiscreetMode } = useDiscreetModeFeature();
-  const [visible, setVisible] = useState(false);
   return (
-    <div
-      className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-    >
+    <div className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}>
       <PopOver
         appendTo="parent"
-        visible={visible}
-        className={styles.popOverRoot}
+        delay={[100, 500]}
+        offset={[0, 0]}
         content={
-          <span className={styles.content}>
+          <span className={styles.tooltip}>
             {intl.formatMessage(messages[isDiscreetMode ? 'off' : 'on'])}
-            {` `}
-            <FormattedHTMLMessage {...messages.description} />
           </span>
         }
       >
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index ca037a45b1..1c2ef145bc 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -3789,6 +3789,67 @@
     ],
     "path": "source/renderer/app/components/settings/menu/SettingsMenu.messages.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Wallets",
+        "description": "Text for the tooltip of wallets category",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts",
+        "id": "sidebar.categoryTooltip.wallets",
+        "start": {
+          "column": 11,
+          "line": 4
+        }
+      },
+      {
+        "defaultMessage": "!!!Staking",
+        "description": "Text for the tooltip of staking category",
+        "end": {
+          "column": 3,
+          "line": 13
+        },
+        "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts",
+        "id": "sidebar.categoryTooltip.staking",
+        "start": {
+          "column": 11,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Settings",
+        "description": "Text for the tooltip of settings category",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts",
+        "id": "sidebar.categoryTooltip.settings",
+        "start": {
+          "column": 12,
+          "line": 14
+        }
+      },
+      {
+        "defaultMessage": "!!!Voting",
+        "description": "Text for the tooltip of voting category",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "source/renderer/app/components/sidebar/SidebarCategory.messages.ts",
+        "id": "sidebar.categoryTooltip.voting",
+        "start": {
+          "column": 10,
+          "line": 19
+        }
+      }
+    ],
+    "path": "source/renderer/app/components/sidebar/SidebarCategory.messages.json"
+  },
   {
     "descriptors": [
       {
@@ -17670,6 +17731,25 @@
     ],
     "path": "source/renderer/app/components/widgets/forms/ProfileSettingsForm.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Newsfeed",
+        "description": "Newsfeed",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "source/renderer/app/components/widgets/NewsFeedIcon.tsx",
+        "id": "news.newsfeed.iconTooltip",
+        "start": {
+          "column": 15,
+          "line": 19
+        }
+      }
+    ],
+    "path": "source/renderer/app/components/widgets/NewsFeedIcon.json"
+  },
   {
     "descriptors": [
       {
@@ -18401,7 +18481,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Toggle discreet mode on.",
+        "defaultMessage": "!!!Toggle discreet mode on",
         "description": "Text for the tooltip on \"discreet mode\" button when mode is on",
         "end": {
           "column": 3,
@@ -18415,7 +18495,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Toggle discreet mode off.",
+        "defaultMessage": "!!!Toggle discreet mode off",
         "description": "Text for the tooltip on \"discreet mode\" button when mode is off",
         "end": {
           "column": 3,
@@ -18427,20 +18507,6 @@
           "column": 7,
           "line": 10
         }
-      },
-      {
-        "defaultMessage": "!!!You can toggle auto discreet mode in <b>Settings</b>.",
-        "description": "Text for the tooltip on \"discreet mode\" button description",
-        "end": {
-          "column": 3,
-          "line": 20
-        },
-        "file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts",
-        "id": "discreetMode.discreetToggle.description",
-        "start": {
-          "column": 15,
-          "line": 16
-        }
       }
     ],
     "path": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.json"
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index e62d0e2320..7e6f5e0aa3 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -147,9 +147,8 @@
   "dapp.transaction.request.transactionFee.label": "Transaction fee",
   "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ Add wallet",
   "dapp.transaction.request.walletsDropdown.placeholder": "Select a wallet",
-  "discreetMode.discreetToggle.description": "You can toggle auto discreet mode in <b>Settings</b>.",
-  "discreetMode.discreetToggle.off": "Toggle discreet mode off.",
-  "discreetMode.discreetToggle.on": "Toggle discreet mode on.",
+  "discreetMode.discreetToggle.off": "Toggle discreet mode off",
+  "discreetMode.discreetToggle.on": "Toggle discreet mode on",
   "environment.apiName.cardano": "Cardano",
   "environment.currency.ada": "Ada",
   "environment.network.alonzo_purple": "Alonzo Purple",
@@ -249,6 +248,7 @@
   "loading.screen.validatingChunk": "Verifying on-disk blockchain state",
   "loading.screen.validatingChunkDescription": "Verifying the integrity of the blockchain calculating hashes",
   "news.newsfeed.empty": "Newsfeed is empty",
+  "news.newsfeed.iconTooltip": "Newsfeed",
   "news.newsfeed.noFetch": "Trying to fetch the newsfeed...",
   "news.newsfeed.title": "Newsfeed",
   "noDiskSpace.error.overlayContent": "<b>Daedalus requires at least {diskSpaceRequired} of hard drive space to operate. Your computer is missing {diskSpaceMissing} of available space. Please delete some files to increase available hard drive space to continue using Daedalus. </b><br /><br />It is recommended to have at least 15% of hard drive space available ({diskSpaceRecommended} in your case) for normal and stable operation of the operating system and installed programs. We strongly recommend that you free up at least that amount of space from your hard drive.",
@@ -382,6 +382,10 @@
   "settings.wallets.currency.poweredBy.label": "Powered by ",
   "settings.wallets.currency.selectLabel": "Select currency",
   "settings.wallets.currency.titleLabel": "Display ada balances in other currency",
+  "sidebar.categoryTooltip.settings": "Settings",
+  "sidebar.categoryTooltip.staking": "Staking",
+  "sidebar.categoryTooltip.voting": "Voting",
+  "sidebar.categoryTooltip.wallets": "Wallets",
   "sidebar.wallets.addWallet": "Add wallet",
   "sidebar.wallets.search.placeholder": "Filter",
   "sidebar.wallets.sortByBalanceButton": "Balance",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 0221e1e76e..3610b11a88 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -147,9 +147,8 @@
   "dapp.transaction.request.transactionFee.label": "トランザクション手数料",
   "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ ウォレット追加",
   "dapp.transaction.request.walletsDropdown.placeholder": "ウォレットを選択してください",
-  "discreetMode.discreetToggle.description": "<b>設定</b>で自動ディスクリートモードに切り替えられます。",
-  "discreetMode.discreetToggle.off": "ディスクリートモードオフ.",
-  "discreetMode.discreetToggle.on": "ディスクリートモードオン.",
+  "discreetMode.discreetToggle.off": "ディスクリートモードオフ",
+  "discreetMode.discreetToggle.on": "ディスクリートモードオン",
   "environment.apiName.cardano": "Cardano",
   "environment.currency.ada": "ADA",
   "environment.network.alonzo_purple": "Alonzo Purple",
@@ -249,6 +248,7 @@
   "loading.screen.validatingChunk": "ディスクのブロックチェーンステータスの検証",
   "loading.screen.validatingChunkDescription": "ブロックチェーンのハッシュ計算の整合性を検証します",
   "news.newsfeed.empty": "Newsfeed is empty",
+  "news.newsfeed.iconTooltip": "ニュースフィード",
   "news.newsfeed.noFetch": "ニュースフィードを読み込んでいます...",
   "news.newsfeed.title": "ニュースフィード",
   "noDiskSpace.error.overlayContent": "<b>Daedalusを動作させるには、ハードディスクに{diskSpaceRequired}以上の空き容量が必要です。ご使用のコンピューターには空き容量が{diskSpaceMissing}不足しています。Daedalusのご利用を続けるためには、ファイルをいくつか削除して空き容量を増やしてください。</b><br /><br />オペレーティングシステムとインストール済みプログラムを正常かつ安定した状態で動作させるには、ハードディスクに少なくとも15%（ご使用のコンピューターの場合は{diskSpaceRecommended}）の空き容量が必要です。ハードディスクにこれ以上の空き容量を確保してください。",
@@ -382,6 +382,10 @@
   "settings.wallets.currency.poweredBy.label": "提供：",
   "settings.wallets.currency.selectLabel": "通貨を選択してください",
   "settings.wallets.currency.titleLabel": "ADA残高を別の通貨で表示する",
+  "sidebar.categoryTooltip.settings": "設定",
+  "sidebar.categoryTooltip.staking": "!!!Staking",
+  "sidebar.categoryTooltip.voting": "!!!Voting",
+  "sidebar.categoryTooltip.wallets": "ウォレット",
   "sidebar.wallets.addWallet": "ウォレット追加",
   "sidebar.wallets.search.placeholder": "フィルター",
   "sidebar.wallets.sortByBalanceButton": "残高",

From 5d4ce18ea51db2b8c4dd80278f8af65d8e025c16 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 08:40:15 -0300
Subject: [PATCH 02/10] [DDW-1028] CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f57bff07b4..7a852af9e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Features
 
+- Implemented hover tooltips for menu ([PR 2937](https://github.com/input-output-hk/daedalus/pull/2937))
 - Improved UI regarding the Hardware Wallet public key export error ([PR 2922](https://github.com/input-output-hk/daedalus/pull/2922))
 - Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904))
 - Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892))

From 1875795e65f8da2b4d276d2286a3fa76d4d1782f Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 08:40:47 -0300
Subject: [PATCH 03/10] [DDW-1028] Translations

---
 source/renderer/app/i18n/locales/ja-JP.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 3610b11a88..891dce2166 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -383,8 +383,8 @@
   "settings.wallets.currency.selectLabel": "通貨を選択してください",
   "settings.wallets.currency.titleLabel": "ADA残高を別の通貨で表示する",
   "sidebar.categoryTooltip.settings": "設定",
-  "sidebar.categoryTooltip.staking": "!!!Staking",
-  "sidebar.categoryTooltip.voting": "!!!Voting",
+  "sidebar.categoryTooltip.staking": "ステーキング",
+  "sidebar.categoryTooltip.voting": "投票",
   "sidebar.categoryTooltip.wallets": "ウォレット",
   "sidebar.wallets.addWallet": "ウォレット追加",
   "sidebar.wallets.search.placeholder": "フィルター",

From 6516c24c024317d8993575411213d1c41f2989fb Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 08:47:17 -0300
Subject: [PATCH 04/10] [DDW-1028] Update CHANGELOG

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a852af9e2..fd56fd90da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Features
 
-- Implemented hover tooltips for menu ([PR 2937](https://github.com/input-output-hk/daedalus/pull/2937))
+- Implemented hover tooltips for menu ([PR 2938](https://github.com/input-output-hk/daedalus/pull/2938))
 - Improved UI regarding the Hardware Wallet public key export error ([PR 2922](https://github.com/input-output-hk/daedalus/pull/2922))
 - Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904))
 - Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892))

From e6e329e4cef73ae689c903cdd86cee58844afc81 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 10:13:10 -0300
Subject: [PATCH 05/10] [DDW-1028] Fix stories

---
 source/renderer/app/components/sidebar/SidebarCategory.tsx | 2 +-
 source/renderer/app/config/sidebarConfig.ts                | 1 +
 storybook/stories/navigation/SidebarCategory.stories.tsx   | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx
index 69c8971615..573b372792 100644
--- a/source/renderer/app/components/sidebar/SidebarCategory.tsx
+++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx
@@ -42,7 +42,7 @@ function SidebarCategory({
     <PopOver
       delay={[100, 500]}
       offset={[0, -20]}
-      content={intl.formatMessage(messages[tooltipTextId])}
+      content={tooltipTextId && intl.formatMessage(messages[tooltipTextId])}
       placement="bottom"
     >
       <button className={componentStyles} onClick={() => onClick(route)}>
diff --git a/source/renderer/app/config/sidebarConfig.ts b/source/renderer/app/config/sidebarConfig.ts
index c79bc58345..c6593901e4 100644
--- a/source/renderer/app/config/sidebarConfig.ts
+++ b/source/renderer/app/config/sidebarConfig.ts
@@ -36,6 +36,7 @@ export const CATEGORIES_BY_NAME = {
     name: 'STAKING_DELEGATION_COUNTDOWN',
     icon: delegationIcon,
     route: ROUTES.STAKING.COUNTDOWN,
+    tooltipTextId: 'staking',
   },
   STAKING: {
     name: 'STAKING',
diff --git a/storybook/stories/navigation/SidebarCategory.stories.tsx b/storybook/stories/navigation/SidebarCategory.stories.tsx
index aed711ea4c..ea9ccb3ced 100644
--- a/storybook/stories/navigation/SidebarCategory.stories.tsx
+++ b/storybook/stories/navigation/SidebarCategory.stories.tsx
@@ -10,6 +10,7 @@ const category = {
   name: 'Wallets',
   icon: walletsIcon,
   route: 'WALLETS',
+  tooltipTextId: 'wallets',
 };
 storiesOf('Navigation|Sidebar', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>) // ====== Stories ======

From c85494f9ea33bff935c136e25963f116bfd6b825 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 10:43:10 -0300
Subject: [PATCH 06/10] [DDW-1028] Fix styles

---
 .../app/components/widgets/NewsFeedIcon.scss  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss
index 62b380dfbd..fbf1d50d3e 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.scss
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss
@@ -3,20 +3,6 @@
   right: 29px;
   top: 20px;
 
-  &.notificationDot {
-    @extend .dot;
-
-    &:after {
-      background: var(
-        --theme-news-feed-icon-red-dot-background-color
-      ) !important;
-    }
-  }
-
-  &.updateDot {
-    @extend .dot;
-  }
-
   .button {
     border-radius: 50%;
     cursor: pointer;
@@ -30,6 +16,20 @@
         --theme-news-feed-icon-toggle-hover-background-color
       );
     }
+
+    &.notificationDot {
+      @extend .dot;
+
+      &:after {
+        background: var(
+          --theme-news-feed-icon-red-dot-background-color
+        ) !important;
+      }
+    }
+
+    &.updateDot {
+      @extend .dot;
+    }
   }
 
   .icon {

From 357c6c2c674ee1cb70f744cf9d26bbd87b61c095 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 12:59:45 -0300
Subject: [PATCH 07/10] [DDW-1028] Update delay

---
 source/renderer/app/components/sidebar/SidebarCategory.tsx      | 2 +-
 source/renderer/app/components/widgets/NewsFeedIcon.tsx         | 2 +-
 source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx   | 2 +-
 .../ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx
index 573b372792..6e4f36ec7b 100644
--- a/source/renderer/app/components/sidebar/SidebarCategory.tsx
+++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx
@@ -40,7 +40,7 @@ function SidebarCategory({
   const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
   return (
     <PopOver
-      delay={[100, 500]}
+      delay={[300, 0]}
       offset={[0, -20]}
       content={tooltipTextId && intl.formatMessage(messages[tooltipTextId])}
       placement="bottom"
diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.tsx b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
index b627066fde..f27e6549a9 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.tsx
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
@@ -40,7 +40,7 @@ function NewsFeedIcon({
     <div className={styles.component}>
       <PopOver
         appendTo="parent"
-        delay={[100, 500]}
+        delay={[300, 0]}
         offset={[0, 0]}
         content={
           <span className={styles.tooltip}>
diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
index 0695b6f19b..41bd90e220 100644
--- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
+++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
@@ -39,7 +39,7 @@ export default class NodeSyncStatusIcon extends Component<Props> {
     return (
       <div className={componentClasses}>
         <PopOver
-          delay={[100, 500]}
+          delay={[300, 0]}
           offset={[0, 10]}
           content={intl.formatMessage(messages.blocksSynced, {
             percentage: formattedNumber(percentage),
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
index 81936e8fbe..e3d595690d 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
@@ -20,7 +20,7 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
     <div className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}>
       <PopOver
         appendTo="parent"
-        delay={[100, 500]}
+        delay={[300, 0]}
         offset={[0, 0]}
         content={
           <span className={styles.tooltip}>

From 45d3ace2e0e601a9835275971e8464c72d33bc8e Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Wed, 30 Mar 2022 17:30:27 -0300
Subject: [PATCH 08/10] [DDW-1028] Revert text removal

---
 .../DiscreetToggleTopBar.messages.ts           |  9 +++++++--
 .../DiscreetToggleTopBar.scss                  | 10 ++++++++--
 .../DiscreetToggleTopBar.tsx                   |  7 +++++--
 .../app/i18n/locales/defaultMessages.json      | 18 ++++++++++++++++--
 source/renderer/app/i18n/locales/en-US.json    |  5 +++--
 source/renderer/app/i18n/locales/ja-JP.json    |  5 +++--
 6 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
index 1e0b216ea6..567512ac2f 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts
@@ -3,14 +3,19 @@ import { defineMessages } from 'react-intl';
 export const messages = defineMessages({
   on: {
     id: 'discreetMode.discreetToggle.on',
-    defaultMessage: '!!!Toggle discreet mode on',
+    defaultMessage: '!!!Toggle discreet mode on.',
     description:
       'Text for the tooltip on "discreet mode" button when mode is on',
   },
   off: {
     id: 'discreetMode.discreetToggle.off',
-    defaultMessage: '!!!Toggle discreet mode off',
+    defaultMessage: '!!!Toggle discreet mode off.',
     description:
       'Text for the tooltip on "discreet mode" button when mode is off',
   },
+  description: {
+    id: 'discreetMode.discreetToggle.description',
+    defaultMessage: '!!!You can toggle auto discreet mode in <b>Settings</b>.',
+    description: 'Text for the tooltip on "discreet mode" button description',
+  },
 });
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
index 099d541431..977c25eda0 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.scss
@@ -27,6 +27,12 @@
   }
 }
 
-.tooltip {
-  white-space: nowrap;
+.popOverRoot {
+  width: 200px;
+
+  .popOverContent {
+    b {
+      font-family: var(--font-semibold);
+    }
+  }
 }
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
index e3d595690d..de8dc88857 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
-import { injectIntl } from 'react-intl';
+import { injectIntl, FormattedHTMLMessage } from 'react-intl';
 import styles from './DiscreetToggleTopBar.scss';
 import { messages } from './DiscreetToggleTopBar.messages';
 import { useDiscreetModeFeature } from '../../context';
@@ -22,9 +22,12 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
         appendTo="parent"
         delay={[300, 0]}
         offset={[0, 0]}
+        className={styles.popOverRoot}
         content={
-          <span className={styles.tooltip}>
+          <span className={styles.popOverContent}>
             {intl.formatMessage(messages[isDiscreetMode ? 'off' : 'on'])}
+            {` `}
+            <FormattedHTMLMessage {...messages.description} />
           </span>
         }
       >
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 1c2ef145bc..d5c6d9d16f 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -18481,7 +18481,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Toggle discreet mode on",
+        "defaultMessage": "!!!Toggle discreet mode on.",
         "description": "Text for the tooltip on \"discreet mode\" button when mode is on",
         "end": {
           "column": 3,
@@ -18495,7 +18495,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Toggle discreet mode off",
+        "defaultMessage": "!!!Toggle discreet mode off.",
         "description": "Text for the tooltip on \"discreet mode\" button when mode is off",
         "end": {
           "column": 3,
@@ -18507,6 +18507,20 @@
           "column": 7,
           "line": 10
         }
+      },
+      {
+        "defaultMessage": "!!!You can toggle auto discreet mode in <b>Settings</b>.",
+        "description": "Text for the tooltip on \"discreet mode\" button description",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.ts",
+        "id": "discreetMode.discreetToggle.description",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
       }
     ],
     "path": "source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.messages.json"
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 7e6f5e0aa3..d041e7adf3 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -147,8 +147,9 @@
   "dapp.transaction.request.transactionFee.label": "Transaction fee",
   "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ Add wallet",
   "dapp.transaction.request.walletsDropdown.placeholder": "Select a wallet",
-  "discreetMode.discreetToggle.off": "Toggle discreet mode off",
-  "discreetMode.discreetToggle.on": "Toggle discreet mode on",
+  "discreetMode.discreetToggle.description": "You can toggle auto discreet mode in <b>Settings</b>.",
+  "discreetMode.discreetToggle.off": "Toggle discreet mode off.",
+  "discreetMode.discreetToggle.on": "Toggle discreet mode on.",
   "environment.apiName.cardano": "Cardano",
   "environment.currency.ada": "Ada",
   "environment.network.alonzo_purple": "Alonzo Purple",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 891dce2166..753ebd5330 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -147,8 +147,9 @@
   "dapp.transaction.request.transactionFee.label": "トランザクション手数料",
   "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ ウォレット追加",
   "dapp.transaction.request.walletsDropdown.placeholder": "ウォレットを選択してください",
-  "discreetMode.discreetToggle.off": "ディスクリートモードオフ",
-  "discreetMode.discreetToggle.on": "ディスクリートモードオン",
+  "discreetMode.discreetToggle.description": "<b>設定</b>で自動ディスクリートモードに切り替えられます",
+  "discreetMode.discreetToggle.off": "ディスクリートモードオフ。",
+  "discreetMode.discreetToggle.on": "ディスクリートモードオン。",
   "environment.apiName.cardano": "Cardano",
   "environment.currency.ada": "ADA",
   "environment.network.alonzo_purple": "Alonzo Purple",

From bf78e0044bce3135dd63693f76f2fe543a274813 Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Thu, 31 Mar 2022 10:07:44 -0300
Subject: [PATCH 09/10] [DDW-1028] Review: Config const for delay value

---
 .../app/components/sidebar/SidebarCategory.tsx      | 13 +++++--------
 .../app/components/widgets/NewsFeedIcon.tsx         |  7 ++++---
 .../app/components/widgets/NodeSyncStatusIcon.tsx   |  7 ++++---
 source/renderer/app/config/timingConfig.ts          |  2 ++
 .../DiscreetToggleTopBar.tsx                        |  3 ++-
 .../renderer/app/i18n/locales/defaultMessages.json  |  8 ++++----
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx
index 6e4f36ec7b..cd5fa92a55 100644
--- a/source/renderer/app/components/sidebar/SidebarCategory.tsx
+++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx
@@ -1,6 +1,4 @@
-import React, { Component } from 'react';
-// @ts-ignore ts-migrate(2305) FIXME: Module '"react"' has no exported member 'Node'.
-import type { Node } from 'react';
+import React from 'react';
 import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
@@ -11,13 +9,14 @@ import type { SidebarCategoryInfo } from '../../config/sidebarConfig';
 import styles from './SidebarCategory.scss';
 import { messages } from './SidebarCategory.messages';
 import type { Intl } from '../../types/i18nTypes';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 type Props = {
   category: SidebarCategoryInfo;
   intl: Intl;
   isActive: boolean;
   onClick: (...args: Array<any>) => any;
-  content?: Node;
+  content?: React.ReactNode;
 };
 
 function SidebarCategory({
@@ -33,14 +32,12 @@ function SidebarCategory({
     styles.component,
     className,
     styles[className],
-    {
-      [styles.active]: isActive,
-    }
+    isActive && styles.active
   );
   const iconClassName = classNames(styles.icon, styles[`${className}Icon`]);
   return (
     <PopOver
-      delay={[300, 0]}
+      delay={TOOLTIP_DELAY}
       offset={[0, -20]}
       content={tooltipTextId && intl.formatMessage(messages[tooltipTextId])}
       placement="bottom"
diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.tsx b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
index f27e6549a9..83794383c6 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.tsx
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.tsx
@@ -6,6 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import newsFeedIcon from '../../assets/images/top-bar/news-feed-icon.inline.svg';
 import styles from './NewsFeedIcon.scss';
 import type { Intl } from '../../types/i18nTypes';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 type Props = {
   intl: Intl;
@@ -32,15 +33,15 @@ function NewsFeedIcon({
 }: Props) {
   const buttonClasses = classNames([
     styles.button,
-    hasNotification && !hasUpdate ? styles.notificationDot : null,
-    hasUpdate ? styles.updateDot : null,
+    hasNotification && !hasUpdate && styles.notificationDot,
+    hasUpdate && styles.updateDot,
     newsFeedIconClass,
   ]);
   return (
     <div className={styles.component}>
       <PopOver
         appendTo="parent"
-        delay={[300, 0]}
+        delay={TOOLTIP_DELAY}
         offset={[0, 0]}
         content={
           <span className={styles.tooltip}>
diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
index 41bd90e220..edadca28dd 100644
--- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
+++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx
@@ -7,6 +7,7 @@ import { formattedNumber } from '../../utils/formatters';
 import spinnerIcon from '../../assets/images/top-bar/node-sync-spinner.inline.svg';
 import syncedIcon from '../../assets/images/top-bar/node-sync-synced.inline.svg';
 import styles from './NodeSyncStatusIcon.scss';
+import { TOOLTIP_DELAY } from '../../config/timingConfig';
 
 const messages = defineMessages({
   blocksSynced: {
@@ -32,14 +33,14 @@ export default class NodeSyncStatusIcon extends Component<Props> {
     const statusIcon = isSynced ? syncedIcon : spinnerIcon;
     const componentClasses = classNames([
       styles.component,
-      isSynced ? null : styles.syncing,
-      hasTadaIcon ? styles.hasTadaIcon : null,
+      !isSynced && styles.syncing,
+      hasTadaIcon && styles.hasTadaIcon,
     ]);
     const percentage = syncPercentage.toFixed(syncPercentage === 100 ? 0 : 2);
     return (
       <div className={componentClasses}>
         <PopOver
-          delay={[300, 0]}
+          delay={TOOLTIP_DELAY}
           offset={[0, 10]}
           content={intl.formatMessage(messages.blocksSynced, {
             percentage: formattedNumber(percentage),
diff --git a/source/renderer/app/config/timingConfig.ts b/source/renderer/app/config/timingConfig.ts
index ca00ad9075..b7b741035f 100644
--- a/source/renderer/app/config/timingConfig.ts
+++ b/source/renderer/app/config/timingConfig.ts
@@ -41,3 +41,5 @@ export const ASSET_TOKEN_DISPLAY_DELAY = 250; // .25 second | unit: milliseconds
 export const DECENTRALIZATION_LEVEL_POLLING_INTERVAL = 1 * 1000; // 1 second | unit: milliseconds
 
 export const TOGGLE_TOKEN_FAVORITE_TIMEOUT = 300; // .3 second | unit: milliseconds
+
+export const TOOLTIP_DELAY = [300, 0]; // [enter, leave] .3 second | unit: milliseconds
diff --git a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
index de8dc88857..37fec4f761 100644
--- a/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
+++ b/source/renderer/app/features/discreet-mode/ui/discreet-toggle-top-bar/DiscreetToggleTopBar.tsx
@@ -8,6 +8,7 @@ import { messages } from './DiscreetToggleTopBar.messages';
 import { useDiscreetModeFeature } from '../../context';
 import { DiscreetModeToggleComponent } from '../discreet-toggle/DiscreetModeToggle';
 import type { Intl } from '../../../../types/i18nTypes';
+import { TOOLTIP_DELAY } from '../../../../config/timingConfig';
 
 type Props = {
   intl: Intl;
@@ -20,7 +21,7 @@ const DiscreetToggleTopBar = ({ intl, hasTadaIcon }: Props) => {
     <div className={classnames(styles.root, hasTadaIcon && styles.hasTadaIcon)}>
       <PopOver
         appendTo="parent"
-        delay={[300, 0]}
+        delay={TOOLTIP_DELAY}
         offset={[0, 0]}
         className={styles.popOverRoot}
         content={
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index d5c6d9d16f..b1dbdbad14 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -17738,13 +17738,13 @@
         "description": "Newsfeed",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "source/renderer/app/components/widgets/NewsFeedIcon.tsx",
         "id": "news.newsfeed.iconTooltip",
         "start": {
           "column": 15,
-          "line": 19
+          "line": 20
         }
       }
     ],
@@ -17757,13 +17757,13 @@
         "description": "Label for the blocks synced info overlay on node sync status icon.",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx",
         "id": "cardano.node.sync.status.blocksSynced",
         "start": {
           "column": 16,
-          "line": 12
+          "line": 13
         }
       }
     ],

From a513293a6ce60a5ffac99bb7d43fbf45d11907dd Mon Sep 17 00:00:00 2001
From: Lucas Araujo <lucas.araujo@iohk.io>
Date: Thu, 31 Mar 2022 10:40:35 -0300
Subject: [PATCH 10/10] [DDW-1028] Review: Remove important flag

---
 source/renderer/app/components/widgets/NewsFeedIcon.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss
index fbf1d50d3e..71c824550d 100644
--- a/source/renderer/app/components/widgets/NewsFeedIcon.scss
+++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss
@@ -21,14 +21,16 @@
       @extend .dot;
 
       &:after {
-        background: var(
-          --theme-news-feed-icon-red-dot-background-color
-        ) !important;
+        background: var(--theme-news-feed-icon-red-dot-background-color);
       }
     }
 
     &.updateDot {
       @extend .dot;
+
+      &:after {
+        background: var(--theme-news-feed-icon-green-dot-background-color);
+      }
     }
   }
 
@@ -49,7 +51,6 @@
 
 .dot {
   &:after {
-    background: var(--theme-news-feed-icon-green-dot-background-color);
     border-radius: 12.5px;
     content: '';
     display: block;