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

@@ -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;