Add qb tutorial illustrations

frontend/src/tutorial/QueryBuilderTutorial.jsx

@@ -2,11 +2,14 @@ import React, { Component, PropTypes } from "react";
 
 import Tutorial, { qs, qsWithContent } from "./Tutorial.jsx";
 
+import RetinaImage from "react-retina-image";
+
 const QUERY_BUILDER_STEPS = [
     {
         getPortalTarget: () => qs(".GuiBuilder"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/question_builder.png" width={186} />
                 <h3>Welcome to the Query Builder!</h3>
                 <p>The Query Builder lets you assemble question (or "queries") to ask questions about your data.</p>
                 <a className="Button Button--primary" onClick={props.onNext}>Tell me more</a>
@@ -17,6 +20,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".GuiBuilder-data"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/table.png" width={157} />
                 <h3>Start by picking the table with the data that you have a question about.</h3>
                 <p>Go ahead and select the "Orders" table from the dropdown menu.</p>
             </div>,
@@ -32,6 +36,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".GuiBuilder-filtered-by"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/funnel.png" width={135} />
                 <h3>Filter your data to get just what you want.</h3>
                 <p>Click the plus button and select the "Created At" field.</p>
             </div>,
@@ -58,6 +63,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".Query-section-aggregation"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/calculator.png" width={115} />
                 <h3>Here's where you can choose to add or average your data, count the number of rows in the table, or just view the raw data.</h3>
                 <p>Try it: click on <strong>Raw Data</strong> to change it to <strong>Count of rows</strong> so we can count how many orders there are in this table.</p>
             </div>,
@@ -75,6 +81,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".Query-section-breakout"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/banana.png" width={232} />
                 <h3>Add a grouping to break out your results by category, day, month, and more.</h3>
                 <p>Let's do it: click on <strong>Add a grouping</strong>, and choose <strong>Created At: by Week</strong>.</p>
             </div>,
@@ -96,6 +103,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".RunButton"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/rocket.png" width={217} />
                 <h3>Run Your Query.</h3>
                 <p>You're doing so well! Click <strong>Run query</strong> to get your results!</p>
             </div>,
@@ -106,6 +114,7 @@ const QUERY_BUILDER_STEPS = [
         getModalTarget: () => qs(".VisualizationSettings"),
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/chart.png" width={160} />
                 <h3>You can view your results as a chart instead of a table.</h3>
                 <p>Everbody likes charts! Click the <strong>Visualization</strong> dropdown and select <strong>Line</strong>.</p>
             </div>,
@@ -120,8 +129,9 @@ const QUERY_BUILDER_STEPS = [
         getPortalTarget: () => true,
         getModal: (props) =>
             <div className="text-centered">
+                <RetinaImage className="mb2" forceOriginalDimensions={false} src="/app/img/qb_tutorial/boat.png" width={190} />
                 <h3>Well done!</h3>
-                <p>That's all! If you still have questions, check out our <a href="">User's Guide</a>. Have fun exploring your data!</p>
+                <p>That's all! If you still have questions, check out our <a className="link" target="_blank" href="http://www.metabase.com/docs/latest/users-guide/">User's Guide</a>. Have fun exploring your data!</p>
                 <a className="Button Button--primary" onClick={props.onNext}>Thanks!</a>
             </div>
     },

frontend/src/tutorial/TutorialModal.jsx

@@ -12,7 +12,9 @@ export default class TutorialModal extends Component {
                         <Icon name='close' width="16px" height="16px"/>
                     </a>
                 </div>
-                <div>{this.props.children}</div>
+                <div className="px4">
+                    {this.props.children}
+                </div>
                 <div className="flex">
                     { modalStepIndex > 0 &&
                         <a className="text-grey-4 cursor-pointer" onClick={this.props.onBack}>back</a>