1 files changed, 38 insertions, 32 deletions
diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
index 54673e223..9b713cf9e 100644
--- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js
+++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
@@ -24,14 +24,23 @@ const messages = defineMessages({
 
 const PageOne = ({ acct, domain }) => (
   <div className='onboarding-modal__page onboarding-modal__page-one'>
-    <div style={{ flex: '0 0 auto' }}>
-      <div className='onboarding-modal__page-one__elephant-friend' />
-    </div>
-
-    <div>
+    <div className='onboarding-modal__page-one__lead'>
       <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
       <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
-      <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>@{acct}@{domain}</strong> }} /></p>
+    </div>
+
+    <div className='onboarding-modal__page-one__extra'>
+      <div className='display-case'>
+        <div className='display-case__label'>
+          <FormattedMessage id='onboarding.page_one.full_handle' defaultMessage='Your full handle' />
+        </div>
+
+        <div className='display-case__case'>
+          @{acct}@{domain}
+        </div>
+      </div>
+
+      <p><FormattedMessage id='onboarding.page_one.handle_hint' defaultMessage='This is what you would tell your friends to search for.' /></p>
     </div>
   </div>
 );
@@ -46,22 +55,23 @@ const PageTwo = ({ myAccount }) => (
     <div className='figure non-interactive'>
       <div className='pseudo-drawer'>
         <NavigationBar account={myAccount} />
+
+        <ComposeForm
+          text='Awoo! #introductions'
+          suggestions={ImmutableList()}
+          mentionedDomains={[]}
+          spoiler={false}
+          onChange={noop}
+          onSubmit={noop}
+          onPaste={noop}
+          onPickEmoji={noop}
+          onChangeSpoilerText={noop}
+          onClearSuggestions={noop}
+          onFetchSuggestions={noop}
+          onSuggestionSelected={noop}
+          showSearch
+        />
       </div>
-      <ComposeForm
-        text='Awoo! #introductions'
-        suggestions={ImmutableList()}
-        mentionedDomains={[]}
-        spoiler={false}
-        onChange={noop}
-        onSubmit={noop}
-        onPaste={noop}
-        onPickEmoji={noop}
-        onChangeSpoilerText={noop}
-        onClearSuggestions={noop}
-        onFetchSuggestions={noop}
-        onSuggestionSelected={noop}
-        showSearch
-      />
     </div>
 
     <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>
@@ -251,18 +261,12 @@ export default class OnboardingModal extends React.PureComponent {
     const hasMore = currentIndex < pages.length - 1;
 
     const nextOrDoneBtn = hasMore ? (
-      <button
-        onClick={this.handleNext}
-        className='onboarding-modal__nav onboarding-modal__next'
-      >
-        <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+      <button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>
+        <FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' />
       </button>
     ) : (
-      <button
-        onClick={this.handleClose}
-        className='onboarding-modal__nav onboarding-modal__done'
-      >
-        <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+      <button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>
+        <FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' />
       </button>
     );
 
@@ -270,9 +274,10 @@ export default class OnboardingModal extends React.PureComponent {
       <div className='modal-root__modal onboarding-modal'>
         <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='onboarding-modal__pager'>
           {pages.map((page, i) => {
-            const className = classNames('onboarding-modal__page__wrapper', {
+            const className = classNames('onboarding-modal__page__wrapper', `onboarding-modal__page__wrapper-${i}`, {
               'onboarding-modal__page__wrapper--active': i === currentIndex,
             });
+
             return (
               <div key={i} className={className}>{page}</div>
             );
@@ -294,6 +299,7 @@ export default class OnboardingModal extends React.PureComponent {
               const className = classNames('onboarding-modal__dot', {
                 active: i === currentIndex,
               });
+
               return (
                 <div
                   key={`dot-${i}`}