diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index ab01f8ecdf1f54a193abb692a38c0f00061e80b3..dc081ae0b64548c429a9c3f4da0e6ae4c03e1500 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -8,7 +8,7 @@ import styles from './card.css';
import nextIcon from './icon--next.svg';
import prevIcon from './icon--prev.svg';
-import helpIcon from './icon--help.svg';
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
import closeIcon from '../close-button/icon--close.svg';
const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
@@ -22,9 +22,9 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
src={helpIcon}
/>
<FormattedMessage
- defaultMessage="All How-Tos"
- description="Title for button to return to how-to library"
- id="gui.cards.all-how-tos"
+ defaultMessage="Tutorials"
+ description="Title for button to return to tutorials library"
+ id="gui.cards.all-tutorials"
/>
</div>
{totalSteps > 1 ? (
diff --git a/src/components/cards/icon--help.svg b/src/components/cards/icon--help.svg
deleted file mode 100644
index 436d052874bd47c11a55909be61d0fb83777c000..0000000000000000000000000000000000000000
Binary files a/src/components/cards/icon--help.svg and /dev/null differ
diff --git a/src/components/menu-bar/icon--help.svg b/src/components/menu-bar/icon--help.svg
deleted file mode 100644
index 6974a7f45f8c740074060a3414eadc02cefd0084..0000000000000000000000000000000000000000
Binary files a/src/components/menu-bar/icon--help.svg and /dev/null differ
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index eba5f885eff82eae922578bdb57acaa75efbecd0..45669f8d6ed979207c8d2774b55504df885118c0 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -151,9 +151,7 @@
}
.help-icon {
- height: 2rem;
- width: 3rem;
- margin-top: 0.5rem;
+ margin-right: 0.35rem;
}
.account-nav-menu, .mystuff-button {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index f6399a9ac4bfb99cda71506cebc984d3cdd4dc8e..b843e05b45aafbbd4b817b7c097d7d4586315ee2 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -31,6 +31,7 @@ import {
import styles from './menu-bar.css';
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
import mystuffIcon from './icon--mystuff.png';
import feedbackIcon from './icon--feedback.svg';
import profileIcon from './icon--profile.png';
@@ -40,18 +41,16 @@ import languageIcon from '../language-selector/language-icon.svg';
import scratchLogo from './scratch-logo.svg';
-import helpIcon from './icon--help.svg';
-
const ariaMessages = defineMessages({
language: {
id: 'gui.menuBar.LanguageSelector',
defaultMessage: 'language selector',
description: 'accessibility text for the language selection menu'
},
- howTo: {
- id: 'gui.menuBar.howToLibrary',
- defaultMessage: 'How-to Library',
- description: 'accessibility text for the how-to library button'
+ tutorials: {
+ id: 'gui.menuBar.tutorialsLibrary',
+ defaultMessage: 'Tutorials',
+ description: 'accessibility text for the tutorials button'
}
});
@@ -311,6 +310,18 @@ class MenuBar extends React.Component {
</div>
</div>
<Divider className={classNames(styles.divider)} />
+ <div
+ aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
+ className={classNames(styles.menuBarItem, styles.hoverable)}
+ onClick={this.props.onOpenTipLibrary}
+ >
+ <img
+ className={styles.helpIcon}
+ src={helpIcon}
+ />
+ <FormattedMessage {...ariaMessages.tutorials} />
+ </div>
+ <Divider className={classNames(styles.divider)} />
<div className={classNames(styles.menuBarItem)}>
<MenuBarItemTooltip id="title-field">
<input
@@ -381,16 +392,6 @@ class MenuBar extends React.Component {
</a>
</div>
<div className={styles.accountInfoWrapper}>
- <div
- aria-label={this.props.intl.formatMessage(ariaMessages.howTo)}
- className={classNames(styles.menuBarItem, styles.hoverable)}
- onClick={this.props.onOpenTipLibrary}
- >
- <img
- className={styles.helpIcon}
- src={helpIcon}
- />
- </div>
<MenuBarItemTooltip id="mystuff">
<div
className={classNames(
diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx
index 4db0d06659874b4f0f9d38246297ac7824125503..ebbee3f3022175f797e021e1e0253a0821f5258c 100644
--- a/src/containers/tips-library.jsx
+++ b/src/containers/tips-library.jsx
@@ -20,9 +20,9 @@ import {
const messages = defineMessages({
tipsLibraryTitle: {
- defaultMessage: 'How-Tos',
- description: 'Heading for the help/how-tos library',
- id: 'gui.tipsLibrary.howtos'
+ defaultMessage: 'Choose a Tutorial',
+ description: 'Heading for the help/tutorials library',
+ id: 'gui.tipsLibrary.tutorials'
}
});
diff --git a/src/lib/assets/icon--tutorials.svg b/src/lib/assets/icon--tutorials.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fea09e781b3f88a43750b69f25e6e522846a4466
Binary files /dev/null and b/src/lib/assets/icon--tutorials.svg differ
diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
index 7a08385e814b2bfb971a6df3ad36535e9f5c8af8..67af2edc9b518f7750c995566db6165413a42206 100644
--- a/test/integration/how-tos.test.js
+++ b/test/integration/how-tos.test.js
@@ -27,7 +27,7 @@ describe('Working with the how-to library', () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
await clickText('Costumes');
- await clickXpath('//*[@aria-label="How-to Library"]');
+ await clickXpath('//*[@aria-label="Choose a Tutorial"]');
await clickText('Getting Started'); // Modal should close
// Make sure YouTube video on first card appears
await findByXpath('//div[contains(@class, "step-video")]');