Commit edd1a8a4 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Update annotator toolbar to use SVG icons

parent 524443a4
...@@ -2,6 +2,8 @@ import classnames from 'classnames'; ...@@ -2,6 +2,8 @@ import classnames from 'classnames';
import propTypes from 'prop-types'; import propTypes from 'prop-types';
import { createElement } from 'preact'; import { createElement } from 'preact';
import SvgIcon from '../../shared/components/svg-icon';
function ToolbarButton({ function ToolbarButton({
buttonRef, buttonRef,
extraClasses, extraClasses,
...@@ -19,15 +21,15 @@ function ToolbarButton({ ...@@ -19,15 +21,15 @@ function ToolbarButton({
return ( return (
<button <button
// This currently uses the icon font. This needs to be converted to className={classnames('annotator-frame-button', extraClasses)}
// `SvgIcon`.
className={classnames('annotator-frame-button', extraClasses, icon)}
aria-label={label} aria-label={label}
aria-pressed={selected} aria-pressed={selected}
onClick={handleClick} onClick={handleClick}
ref={buttonRef} ref={buttonRef}
title={label} title={label}
/> >
<SvgIcon name={icon} />
</button>
); );
} }
...@@ -61,7 +63,7 @@ export default function Toolbar({ ...@@ -61,7 +63,7 @@ export default function Toolbar({
<ToolbarButton <ToolbarButton
extraClasses="annotator-frame-button--sidebar_close" extraClasses="annotator-frame-button--sidebar_close"
label="Close annotation sidebar" label="Close annotation sidebar"
icon="h-icon-close" icon="cancel"
onClick={closeSidebar} onClick={closeSidebar}
/> />
)} )}
...@@ -74,14 +76,14 @@ export default function Toolbar({ ...@@ -74,14 +76,14 @@ export default function Toolbar({
? 'Hide annotation sidebar' ? 'Hide annotation sidebar'
: 'Show annotation sidebar' : 'Show annotation sidebar'
} }
icon={isSidebarOpen ? 'h-icon-chevron-right' : 'h-icon-chevron-left'} icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
onClick={toggleSidebar} onClick={toggleSidebar}
/> />
)} )}
{!useMinimalControls && ( {!useMinimalControls && (
<ToolbarButton <ToolbarButton
label="Show highlights" label="Show highlights"
icon={showHighlights ? 'h-icon-visibility' : 'h-icon-visibility-off'} icon={showHighlights ? 'show' : 'hide'}
selected={showHighlights} selected={showHighlights}
onClick={toggleHighlights} onClick={toggleHighlights}
/> />
...@@ -91,9 +93,7 @@ export default function Toolbar({ ...@@ -91,9 +93,7 @@ export default function Toolbar({
label={ label={
newAnnotationType === 'note' ? 'New page note' : 'New annotation' newAnnotationType === 'note' ? 'New page note' : 'New annotation'
} }
icon={ icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
newAnnotationType === 'note' ? 'h-icon-note' : 'h-icon-annotate'
}
onClick={createAnnotation} onClick={createAnnotation}
/> />
)} )}
......
...@@ -103,12 +103,11 @@ $sidebar-collapse-transition-time: 150ms; ...@@ -103,12 +103,11 @@ $sidebar-collapse-transition-time: 150ms;
background: var.$white; background: var.$white;
border: solid 1px var.$grey-3; border: solid 1px var.$grey-3;
border-radius: 4px; border-radius: 4px;
color: var.$grey-semi; color: var.$grey-5;
text-decoration: none; text-decoration: none;
height: 30px; height: 30px;
width: 30px; width: 30px;
padding: 0; padding: 0;
font-size: 16px;
margin-bottom: 5px; margin-bottom: 5px;
&:active { &:active {
...@@ -117,7 +116,7 @@ $sidebar-collapse-transition-time: 150ms; ...@@ -117,7 +116,7 @@ $sidebar-collapse-transition-time: 150ms;
&:focus, &:focus,
&:hover { &:hover {
color: var.$text-color; color: var.$grey-7;
} }
} }
...@@ -129,6 +128,7 @@ $sidebar-collapse-transition-time: 150ms; ...@@ -129,6 +128,7 @@ $sidebar-collapse-transition-time: 150ms;
width: 36px; width: 36px;
margin-bottom: 10px; margin-bottom: 10px;
height: var.$top-bar-height; height: var.$top-bar-height;
color: var.$grey-semi;
} }
.annotator-frame-button--sidebar_close { .annotator-frame-button--sidebar_close {
......
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