Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltip for restore deleted tags clarification #2899

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions lib/icons/help-small.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 8 additions & 0 deletions lib/revision-selector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions lib/revision-selector/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,15 @@
border: 0;
}
}

.icon-button {
color: inherit;

svg {
position: relative;
bottom: 2px;
}
}
}

.button-primary {
Expand Down
4 changes: 4 additions & 0 deletions scss/_general.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down