Commit 86a3578f authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Use `Icon` in `Tutorial`

parent 96f65fa9
import { SvgIcon } from '@hypothesis/frontend-shared'; import { Icon } from '@hypothesis/frontend-shared';
import { isThirdPartyService } from '../helpers/is-third-party-service'; import { isThirdPartyService } from '../helpers/is-third-party-service';
import { withServices } from '../service-context'; import { withServices } from '../service-context';
...@@ -15,7 +15,10 @@ import { withServices } from '../service-context'; ...@@ -15,7 +15,10 @@ import { withServices } from '../service-context';
function TutorialInstruction({ commandName, iconName }) { function TutorialInstruction({ commandName, iconName }) {
return ( return (
<span className="Tutorial__instruction"> <span className="Tutorial__instruction">
<SvgIcon name={iconName} inline={true} className="Tutorial__icon" /> <Icon
name={iconName}
classes="hyp-u-margin--right--1 hyp-u-color--grey-6 u-inline Tutorial__icon"
/>
<em>{commandName}</em> <em>{commandName}</em>
</span> </span>
); );
......
...@@ -8,10 +8,7 @@ ...@@ -8,10 +8,7 @@
} }
&__icon { &__icon {
@include utils.icon--inline;
margin-right: 1px;
margin-bottom: -1px; // Pull the icon a little toward the baseline margin-bottom: -1px; // Pull the icon a little toward the baseline
color: var.$grey-5;
} }
&__instruction { &__instruction {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment