From 37551c6a4b388f646ffffe4c657ca9bac8c2e539 Mon Sep 17 00:00:00 2001
From: Sandy McFadden <sandy.mcfadden@automattic.com>
Date: Tue, 4 May 2021 10:22:24 -0300
Subject: [PATCH] Add tooltip to restore deleted tags to make action more clear
 Add new help icon Update to new help icon Fix positioning of the help icon
 Fix background color of tooltips Update the copy for the added tooltip

---
 lib/icons/help-small.tsx         | 14 ++++++++++++++
 lib/revision-selector/index.tsx  |  8 ++++++++
 lib/revision-selector/style.scss |  9 +++++++++
 scss/_general.scss               |  4 ++++
 4 files changed, 35 insertions(+)
 create mode 100644 lib/icons/help-small.tsx

diff --git a/lib/icons/help-small.tsx b/lib/icons/help-small.tsx
new file mode 100644
index 000000000..6b5d41942
--- /dev/null
+++ b/lib/icons/help-small.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function SmallHelpIcon() {
+  return (
+    <svg
+      className="icon-help-small"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <rect x="0" fill="none" width="16" height="16" />
+      <path d="M8 0C3.582 0 0 3.582 0 8s3.582 8 8 8 8-3.582 8-8S12.418 0 8 0zM8 13c-0.552 0-1-0.448-1-1 0-0.552 0.448-1 1-1s1 0.448 1 1C9 12.552 8.552 13 8 13zM9 8.816V9v1H7V9 8c0-0.552 0.448-1 1-1s1-0.448 1-1c0-0.552-0.448-1-1-1S7 5.448 7 6H5c0-1.657 1.343-3 3-3s3 1.343 3 3C11 7.304 10.163 8.403 9 8.816z" />
+    </svg>
+  );
+}
diff --git a/lib/revision-selector/index.tsx b/lib/revision-selector/index.tsx
index 3825a3d0b..dd41dfad3 100644
--- a/lib/revision-selector/index.tsx
+++ b/lib/revision-selector/index.tsx
@@ -3,6 +3,8 @@ import { connect } from 'react-redux';
 import FocusTrap from 'focus-trap-react';
 import format from 'date-fns/format';
 import classNames from 'classnames';
+import IconButton from '../icon-button';
+import SmallHelpIcon from '../icons/help-small';
 import Slider from '../components/slider';
 import CheckboxControl from '../controls/checkbox';
 import actions from '../state/actions';
@@ -162,6 +164,12 @@ export class RevisionSelector extends Component<Props> {
                 <span className="revision-deleted-tags-text">
                   Restore deleted tags
                 </span>
+                <span>
+                  <IconButton
+                    icon={<SmallHelpIcon />}
+                    title="Any deleted tags associated with the restored version of this note will be re-added to your list of tags."
+                  />
+                </span>
               </label>
               <div className="revision-buttons">
                 <button
diff --git a/lib/revision-selector/style.scss b/lib/revision-selector/style.scss
index 81f72bfe0..6e9dd8aaa 100644
--- a/lib/revision-selector/style.scss
+++ b/lib/revision-selector/style.scss
@@ -45,6 +45,15 @@
         border: 0;
       }
     }
+
+    .icon-button {
+      color: inherit;
+
+      svg {
+        position: relative;
+        bottom: 2px;
+      }
+    }
   }
 
   .button-primary {
diff --git a/scss/_general.scss b/scss/_general.scss
index ce73da8dc..e1ac17047 100644
--- a/scss/_general.scss
+++ b/scss/_general.scss
@@ -85,6 +85,10 @@ optgroup {
   }
 }
 
+.MuiTooltip-tooltip.icon-button__tooltip {
+  background-color: $studio-gray-50;
+}
+
 body[data-theme='dark'] .search-match {
   background-color: rgba($studio-simplenote-blue-50, 0.4);
   color: $studio-white;