Lay out pages 2 through 5, add images, style modals (#1509)

* Lay out pages 2 through 5

Added images and laid out pages 2 through 5 in the jsx file. SCSS will
come, still working on just seeing if this works at all.

* Fix jsx errors, add images to modal pages, style modal pages

app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx

@@ -12,19 +12,59 @@ const PageOne = ({ acct, domain }) => (
   </div>
 );
 
-const PageTwo = ({ admin }) => (
+const PageTwo = (
   <div className='onboarding-modal__page onboarding-modal__page-two'>
-    <p>
-      <FormattedMessage id='onboarding.page_two.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
-      <br />
-      <FormattedMessage id='onboarding.page_two.read_guidelines' defaultMessage='Please read the {guidelines} of your instance.' values={{ guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_two.guidelines' defaultMessage='community guidelines' /></a> }}/>
-    </p>
-    <p><FormattedMessage id='onboarding.page_two.read_guidelines' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
-    <p><FormattedMessage id='onboarding.page_two.apps_available' defaultMessage='There are {apps} available for iOS and Android.' values={{ apps: <a href='https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_two.various_app' defaultMessage='mobile apps' /></a> }} /></p>
-    <p><strong><FormattedMessage id='onboarding.page_two.have_fun' defaultMessage='Have fun!' /></strong></p>
+    <img className="onboarding-modal__image onboard-compose" src={'/onboarding/onboard-compose.jpg'}></img>
+    <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
   </div>
 );
 
+
+const PageThree = (
+  <div className='onboarding-modal__page onboarding-modal__page-three'>
+    <img className="onboarding-modal__image onboard-compose" src={'/onboarding/onboard-search.jpg'}></img>
+    <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find users and look at hashtags, such as #MastoArt and #Introductions.' /></p>
+	<p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Click "Edit Profile" to change your avatar, bio, and display name.' /></p>
+  </div>
+);
+
+const PageFour = (
+  <div className='onboarding-modal__page onboarding-modal__page-four'>
+    <img className="onboarding-modal__image onboard-column" src={'/onboarding/onboard-home.jpg'}></img>
+	  <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The Home Timeline shows posts from users you follow.'/></p>
+	  <img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-notifications.jpg"}></img>
+	  <p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The Notifications Column shows when a user boosts, favorites, or replies to your posts; and when you have a new follower.' /></p>
+	  <p><FormattedMessage id='onboarding.page_four.filter' defaultMessage='Each column can be customized using the settings menu in the top right.' /><img className="onboard-sliders" src={"/onboarding/onboard-sliders.png"}></img></p>
+  </div>
+);
+
+const PageFive = (
+  <div className='onboarding-modal__page onboarding-modal__page-five'>
+    <img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-getting-started.jpg"}></img>
+	  <p><FormattedMessage id='onboarding.page_five.getting-started' defaultMessage='The Getting Started Column changes based on your needs.'/></p>
+	  <img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-local-timeline.jpg"}></img>
+	  <p><FormattedMessage id='onboarding.page_five.local-timeline' defaultMessage='The Local Timeline shows public posts from every user on your instance.' /></p>
+	  <img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-federated-timeline.jpg"}></img>
+	  <p><FormattedMessage id='onboarding.page_five.federated-timeline' defaultMessage='The Federated Timeline shows public posts from the whole known network of instances.' /></p>
+	  <p><FormattedMessage id='onboarding.page_five.public' defaultMessage='These are the Public Timelines, a great way to find people to follow.' /></p>
+  </div>
+);
+
+const PageSix = ({ admin }) => (
+  <div className='onboarding-modal__page onboarding-modal__page-six'>
+    <p>
+      <FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
+      <br />
+      <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage='Please read the {guidelines} of your instance.' values={{ guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }}/>
+    </p>
+    <p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
+    <p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS and Android.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
+    <p><strong><FormattedMessage id='onboarding.page_six.have_fun' defaultMessage='Bon Appetoot!' /></strong></p>
+  </div>
+);
+
+
+
 const mapStateToProps = state => ({
   me: state.getIn(['accounts', state.getIn(['meta', 'me'])]),
   admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),
@@ -74,7 +114,11 @@ const OnboardingModal = React.createClass({
 
     const pages = [
       <PageOne acct={me.get('acct')} domain={domain} />,
-      <PageTwo admin={admin} />
+      PageTwo,
+      PageThree,
+      PageFour,
+      PageFive,
+      <PageSix admin={admin} />
     ];
 
     const { currentIndex } = this.state;

app/assets/stylesheets/components.scss

@@ -1995,9 +1995,11 @@ button.active i.fa-retweet {
   }
 
   p {
-    font-size: 16px;
+    font-size: 18px;
     color: lighten($color1, 8%);
+    margin-top: 10px;
     margin-bottom: 10px;
+    line-height: 10x;
 
     &:last-child {
       margin-bottom: 0;
@@ -2008,3 +2010,21 @@ button.active i.fa-retweet {
     }
   }
 }
+
+ .onboarding-modal__image {
+    border-radius: 8px;
+    width: 70vw;
+    max-width: 450px;
+    max-height: auto;
+    display: block;
+    margin: auto;
+  }
+  
+.onboard-sliders {
+    display: inline-block;
+    max-width: 30px;
+    max-height: auto;
+    margin-left: 10px;
+  }
+  
+