From b5c0d515eed6090c21be183169f48b982d52c17d Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 21 Oct 2023 10:39:41 +0300
Subject: [PATCH] Improve UI notice for delayed queue items

(cherry picked from commit f2cae4e2b2f87924973a00431be7216296648dac)
---
 frontend/src/Activity/Queue/TimeleftCell.js | 27 +++++++++++++--------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Activity/Queue/TimeleftCell.js b/frontend/src/Activity/Queue/TimeleftCell.js
index ab1134b8c..b280b5a06 100644
--- a/frontend/src/Activity/Queue/TimeleftCell.js
+++ b/frontend/src/Activity/Queue/TimeleftCell.js
@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import formatTime from 'Utilities/Date/formatTime';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
@@ -25,11 +28,13 @@ function TimeleftCell(props) {
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
-      <TableRowCell
-        className={styles.timeleft}
-        title={translate('DelayingDownloadUntil', { date, time })}
-      >
-        -
+      <TableRowCell className={styles.timeleft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('DelayingDownloadUntil', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
       </TableRowCell>
     );
   }
@@ -39,11 +44,13 @@ function TimeleftCell(props) {
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
-      <TableRowCell
-        className={styles.timeleft}
-        title={translate('RetryingDownloadOn', { date, time })}
-      >
-        -
+      <TableRowCell className={styles.timeleft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('RetryingDownloadOn', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
       </TableRowCell>
     );
   }