Add tooltip to restore deleted tags to make action more clear (#2899)

Fixes #2889

With the new restore deleted tags option in the note history revision selector, there was some confusion around what the action would do. This adds a tooltip with more information explaining what will take place.

Author: sandymcfadden

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>
+  );
+}

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

lib/revision-selector/style.scss

@@ -45,6 +45,15 @@
         border: 0;
       }
     }
+
+    .icon-button {
+      color: inherit;
+
+      svg {
+        position: relative;
+        bottom: 2px;
+      }
+    }
   }
 
   .button-primary {

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;