From e9475219c9fc46571c7dd791194e3ffc9db0b183 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 14 Jul 2020 01:05:05 -0500
Subject: [PATCH] Added welcome page/introduction/onboarding flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- welcome page/introduction/onboarding flow

• Todo:
- clean up code for showing new user the page
- add code for saving profile, cover photos, display name from intro slides
---
 .../gabsocial/actions/onboarding.js           |  13 +-
 .../gabsocial/features/introduction.js        | 439 +++++++++++-------
 app/javascript/gabsocial/features/ui/ui.js    |  39 +-
 .../features/ui/util/async_components.js      |   1 +
 .../gabsocial/layouts/introduction_layout.js  |  13 +-
 app/javascript/styles/global.css              |   1 +
 6 files changed, 334 insertions(+), 172 deletions(-)

diff --git a/app/javascript/gabsocial/actions/onboarding.js b/app/javascript/gabsocial/actions/onboarding.js
index a1dd3a73..cf8c2d9b 100644
--- a/app/javascript/gabsocial/actions/onboarding.js
+++ b/app/javascript/gabsocial/actions/onboarding.js
@@ -1,8 +1,9 @@
-import { changeSetting, saveSettings } from './settings';
+import moment from 'moment-mini'
+import { changeSetting, saveSettings } from './settings'
 
-export const INTRODUCTION_VERSION = 20181216044202;
+export const MIN_ACCOUNT_CREATED_AT_ONBOARDING = moment('2020-07-14').valueOf()
 
-export const closeOnboarding = () => dispatch => {
-  dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION));
-  dispatch(saveSettings());
-};
+export const saveShownOnboarding = () => (dispatch) => {
+  dispatch(changeSetting(['shownOnboarding'], true))
+  dispatch(saveSettings())
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/introduction.js b/app/javascript/gabsocial/features/introduction.js
index 314c3079..92671e24 100644
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@@ -1,234 +1,357 @@
-import ReactSwipeableViews from 'react-swipeable-views';
-import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
-import { closeOnboarding } from '../actions/onboarding';
+import ReactSwipeableViews from 'react-swipeable-views'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { CX } from '../constants'
+import { me } from '../initial_state'
+import { saveShownOnboarding } from '../actions/onboarding'
+import { fetchGroups } from '../actions/groups'
+import {
+  changeCompose,
+  clearCompose,
+} from '../actions/compose'
+import { makeGetAccount } from '../selectors'
+import Button from '../components/button'
+import DisplayName from '../components/display_name'
+import Divider from '../components/divider'
+import FileInput from '../components/file_input'
+import GroupListItem from '../components/group_list_item'
+import Heading from '../components/heading'
+import Icon from '../components/icon'
+import Image from '../components/image'
+import Input from '../components/input'
+import Text from '../components/text'
+import ComposeFormContainer from './compose/containers/compose_form_container'
 
-// : todo :
-
-class FrameWelcome extends React.Component {
-  static propTypes = {
-    domain: PropTypes.string.isRequired,
-    onNext: PropTypes.func.isRequired,
-  };
-
-  shouldComponentUpdate(nextProps) {
-    return nextProps.domain !== this.props.domain;
-  }
+class SlideWelcome extends PureComponent {
 
   render() {
-    const { domain, onNext } = this.props;
-
     return (
-      <div className='introduction__frame'>
-        <div className='introduction__text introduction__text--centered'>
-          <h3>
-            <FormattedMessage id='introduction.welcome.headline' defaultMessage='First steps' />
-          </h3>
-          <p>
-            <FormattedMessage
-              id='introduction.welcome.text'
-              defaultMessage="Welcome to the fediverse! In a few moments, you'll be able to broadcast messages and talk to your friends across a wide variety of servers. But this server, {domain}, is special—it hosts your profile, so remember its name."
-              values={{
-                domain: <code>{domain}</code>
-              }}
-            />
-          </p>
+      <div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+
+          <Text size='large'>Gab is the home of free speech online and a place where users shape their own experience. </Text>
+          <br />
+          <Text size='large'>You will discover many different ideas, people, and topics on Gab.</Text>
+          <br />
+          <Text size='large'>Follow the people you find interesting and block or mute people you don't want to associate with.</Text>
+          <br />
+          <Text size='large'>Speak freely, associate freely!</Text>
+          <br />
+          <Text size='large'>Let's get started!</Text>
+
         </div>
 
-        <div className='introduction__action'>
-          <button className='button' onClick={onNext}>
-            <FormattedMessage id='introduction.welcome.action' defaultMessage="Let's go!" />
-          </button>
-        </div>
+        <Image
+          className={[_s.mtAuto].join(' ')}
+          src='https://gab.com/system/media_attachments/files/008/707/779/original/42de809171745057.png?1568251173'
+        />
       </div>
-    );
+    )
   }
+
 }
 
-class FrameFederation extends React.Component {
-  static propTypes = {
-    onNext: PropTypes.func.isRequired,
-  }
+class SlidePhotos extends ImmutablePureComponent {
 
-  shouldComponentUpdate() {
-    return false;
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
   }
 
   render() {
-    return (
-      <div className='introduction__frame'>
-        <div className='introduction__text introduction__text--columnized'>
-          <div>
-            <h3>
-              <FormattedMessage id='introduction.federation.home.headline' defaultMessage='Home' />
-            </h3>
-            <p>
-              <FormattedMessage
-                id='introduction.federation.home.text'
-                defaultMessage='Posts from people you follow will appear in your home feed. You can follow anyone on any server!'
-              />
-            </p>
-          </div>
-        </div>
+    const { account } = this.props
+
+    return (
+      <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py15, _s.alignItemsCenter].join(' ')}>
+
+          <div className={[_s.default, _s.py10, _s.width330PX].join(' ')}>
+            <Text size='large' align='center'>Set your cover photo, profile photo and enter your display name so people can find you.</Text>
+          </div>
+
+          <div className={[_s.default, _s.mt15, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s.default, _s.width330PX, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
+              <Image
+                width={330}
+                height={194}
+                src='http://localhost:3000/system/accounts/headers/000/000/001/original/0a49fe388d16f372.jpg?1562898139'
+              />
+              <div className={[_s.default, _s.mtNeg75PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                <Image
+                  width={142}
+                  height={142}
+                  className={[_s.circle, _s.border6PX, _s.borderColorWhite].join(' ')}
+                  src='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
+                />
+              </div>
+              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+                <Input
+                  placeholder='John Doe'
+                />
+              </div>
+            </div>
+          </div>
 
-        <div className='introduction__action'>
-          <button className='button' onClick={onNext}>
-            <FormattedMessage id='introduction.federation.action' defaultMessage='Next' />
-          </button>
         </div>
       </div>
     )
   }
-};
 
-class FrameInteractions extends React.Component {
+}
+
+class SlideGroups extends ImmutablePureComponent {
+
+  static propTypes = {
+    groupIds: ImmutablePropTypes.list,
+  }
+
+  render() {
+    const { groupIds } = this.props
+
+    return (
+      <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.py15, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s.default, _s.px15, _s.mb15].join(' ')}>
+            <Text size='large'>Gab Groups are a great way to connect with people who share your interests. Please select a few groups to get started.</Text>
+          </div>
+
+          <div className={[_s.default, _s.width100PC].join(' ')}>
+            {
+              groupIds.map((groupId, i) => (
+                <GroupListItem
+                  isAddable
+                  key={`group-collection-item-${i}`}
+                  id={groupId}
+                  isLast={groupIds.count() - 1 === i}
+                />
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+class SlideFirstPost extends PureComponent {
+
   static propTypes = {
     onNext: PropTypes.func.isRequired,
-  };
-
-  shouldComponentUpdate() {
-    return false;
   }
 
   render() {
     return (
-      <div className='introduction__frame'>
-        <div className='introduction__text introduction__text--columnized'>
-          <div>
-            <h3>
-              <FormattedMessage id='introduction.interactions.reply.headline' defaultMessage='Reply' />
-            </h3>
-            <p>
-              <FormattedMessage
-                id='introduction.interactions.reply.text'
-                defaultMessage="You can reply to other people's and your own gabs, which will chain them together in a conversation."
-              />
-            </p>
+      <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+          <Text size='large' className={_s.pb10}>Now let's make your very first Gab post! Please introduce yourself to the Gab community. How did you hear about Gab? What are you interested in?</Text>
+          <br />
+
+          <Divider />
+
+          <div className={[_s.default, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
+            <ComposeFormContainer hidePro autoFocus />
           </div>
 
-          <div>
-            <h3>
-              <FormattedMessage id='introduction.interactions.repost.headline' defaultMessage='Repost' />
-            </h3>
-            <p>
-              <FormattedMessage id='introduction.interactions.repost.text' defaultMessage="You can share other people's gabs with your followers by reposting them." />
-            </p>
-          </div>
-
-          <div>
-            <h3>
-              <FormattedMessage id='introduction.interactions.favorite.headline' defaultMessage='Favorite' />
-            </h3>
-            <p>
-              <FormattedMessage id='introduction.interactions.favorite.text' defaultMessage='You can save a gab for later, and let the author know that you liked it, by favoriting it.' />
-            </p>
-          </div>
-        </div>
-
-        <div className='introduction__action'>
-          <button className='button' onClick={onNext}>
-            <FormattedMessage id='introduction.interactions.action' defaultMessage='Finish tutorial!' />
-          </button>
         </div>
       </div>
-    );
+    )
   }
+
 }
 
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+  groupIds: state.getIn(['group_lists', 'featured', 'items']),
+  shownOnboarding: state.getIn(['settings', 'shownOnboarding'], false),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onClearCompose: () => dispatch(clearCompose()),
+  onSaveShownOnboarding: () => dispatch(saveShownOnboarding()),
+  onFetchFeaturedGroups: () => dispatch(fetchGroups('featured')),
+  setPlaceholderCompose: () => dispatch(changeCompose('Hello everyone, I just joined Gab! I’m looking forward to speaking freely and meeting new friends.'))
+})
+
 export default
-@connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
-class Introduction extends PureComponent {
+@connect(mapStateToProps, mapDispatchToProps)
+class Introduction extends ImmutablePureComponent {
 
   static propTypes = {
-    domain: PropTypes.string.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
     dispatch: PropTypes.func.isRequired,
-  };
+    groupIds: ImmutablePropTypes.list,
+    shownOnboarding: PropTypes.bool.isRequired,
+    setPlaceholderCompose: PropTypes.func.isRequired,
+    onClearCompose: PropTypes.func.isRequired,
+    onSaveShownOnboarding: PropTypes.func.isRequired,
+    onFetchFeaturedGroups: PropTypes.func.isRequired,
+  }
 
   state = {
     currentIndex: 0,
-  };
-
-  componentWillMount () {
-    this.pages = [
-      <FrameWelcome domain={this.props.domain} onNext={this.handleNext} />,
-      <FrameFederation onNext={this.handleNext} />,
-      <FrameInteractions onNext={this.handleFinish} />,
-    ];
   }
 
   componentDidMount() {
-    window.addEventListener('keyup', this.handleKeyUp);
+    if (!this.props.shownOnboarding) {
+      window.addEventListener('keyup', this.handleKeyUp)
+      this.props.onFetchFeaturedGroups()
+      this.props.setPlaceholderCompose()
+      this.props.onSaveShownOnboarding()
+    }
   }
 
   componentWillUnmount() {
-    window.addEventListener('keyup', this.handleKeyUp);
+    window.addEventListener('keyup', this.handleKeyUp)
+    this.props.onClearCompose()
   }
 
   handleDot = (e) => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-    e.preventDefault();
-    this.setState({ currentIndex: i });
+    const i = Number(e.currentTarget.getAttribute('data-index'))
+    e.preventDefault()
+    this.setState({ currentIndex: i })
   }
 
   handlePrev = () => {
     this.setState(({ currentIndex }) => ({
       currentIndex: Math.max(0, currentIndex - 1),
-    }));
+    }))
   }
 
   handleNext = () => {
-    const { pages } = this;
+    const newIndex = Math.min(this.state.currentIndex + 1, 3)
+    this.setState({
+      currentIndex: newIndex,
+    })
 
-    this.setState(({ currentIndex }) => ({
-      currentIndex: Math.min(currentIndex + 1, pages.length - 1),
-    }));
+    if (newIndex === 3) {
+      this.props.onClearCompose()
+    }
   }
 
   handleSwipe = (index) => {
-    this.setState({ currentIndex: index });
-  }
-
-  handleFinish = () => {
-    this.props.dispatch(closeOnboarding());
+    this.setState({ currentIndex: index })
   }
 
   handleKeyUp = ({ key }) => {
     switch (key) {
-    case 'ArrowLeft':
-      this.handlePrev();
-      break;
-    case 'ArrowRight':
-      this.handleNext();
-      break;
+      case 'ArrowLeft':
+        this.handlePrev()
+        break
+      case 'ArrowRight':
+        this.handleNext()
+        break
     }
   }
 
-  render () {
-    const { currentIndex } = this.state;
-    const { pages } = this;
+  render() {
+    const { account, groupIds } = this.props
+    const { currentIndex } = this.state
 
+    const pages = [
+      <SlideWelcome />,
+      <SlidePhotos account={account} />,
+      <SlideGroups groupIds={groupIds} />,
+      <SlideFirstPost />,
+    ]
+
+    const titles = [
+      `Welcome to Gab!`,
+      'Complete your profile',
+      'Find your people',
+      'Start a conversation',
+    ]
+    const title = titles[currentIndex]
+
+    const pagination = pages.map((page, i) => {
+      const btnClasses = CX({
+        default: 1,
+        width10PX: 1,
+        height10PX: 1,
+        outlineNone: 1,
+        circle: 1,
+        cursorPointer: 1,
+        bgBrandLightOpaque: i !== currentIndex,
+        bgBrand: i === currentIndex,
+      })
+
+      return (
+        <li className={[_s.default, _s.px5].join(' ')} key={`intro-slide-${i}`}>
+          <button tabIndex='0' className={btnClasses} onClick={this.handleDot} data-index={i} />
+        </li>
+      )
+    })
+ 
     return (
-      <div className='introduction'>
-        <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='introduction__pager'>
-          {pages.map((page, i) => (
-            <div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div>
-          ))}
+      <div className={[_s.default, _s.width100PC, _s.heightMax80VH].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+          <Heading>
+            {title}
+          </Heading>
+          <div className={[_s.mlAuto].join(' ')}>
+            <Button
+              to={currentIndex === 3 ? '/home' : undefined}
+              onClick={this.handleNext}
+              className={currentIndex !== 3 ? _s.px10 : undefined}
+              icon={currentIndex !== 3 ? 'arrow-right' : undefined}
+              iconSize={currentIndex !== 3 ? '18px' : undefined}
+            > 
+              {
+                currentIndex === 3 &&
+                <Text color='white' className={[_s.pr5]}>Complete</Text>
+              }
+            </Button>
+          </div>
+        </div>
+
+        <ReactSwipeableViews
+          index={currentIndex}
+          onChangeIndex={this.handleSwipe}
+          className={[_s.default, _s.flexNormal, _s.heightCalc80VH106PX].join(' ')}
+          containerStyle={{
+            width: '100%',
+          }}
+          slideStyle={{
+            // height: '100%',
+          }}
+        >
+          {
+            pages.map((page, i) => (
+              <div key={i} className={[_s.default, _s.heightCalc80VH106PX].join(' ')}>
+                {page}
+              </div>
+            ))
+          }
         </ReactSwipeableViews>
 
-        <div className='introduction__dots'>
-          {pages.map((_, i) => (
-            <div
-              key={`dot-${i}`}
-              role='button'
-              tabIndex='0'
-              data-index={i}
-              onClick={this.handleDot}
-              className={classNames('introduction__dot', { active: i === currentIndex })}
-            />
-          ))}
+        <div className={[_s.default, _s.px15, _s.height53PX, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.width100PC, _s.flexRow].join(' ')}>
+          <div className={[_s.default, _s.width50PX, _s.mrAuto].join(' ')}>
+            {
+              currentIndex !== 0 &&
+              <Button
+                className={_s.opacity05}
+                onClick={this.handlePrev}
+                icon='arrow-left'
+                backgroundColor='none'
+                color='secondary'
+                iconSize='20px'
+              />
+            }
+          </div>
+          <ul className={[_s.default, _s.height100PC, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.listStyleNone].join(' ')}>
+            {pagination}
+          </ul>
+          <Button
+            to={currentIndex === 3 ? '/home' : undefined}
+            className={[_s.default, _s.width50PX, _s.mlAuto, _s.opacity05].join(' ')}
+            onClick={this.handleNext}
+            icon={currentIndex === 3 ? 'check' : 'arrow-right'}
+            backgroundColor='none'
+            color='secondary'
+            iconSize='20px'
+          />
         </div>
       </div>
-    );
+    )
   }
 
-}
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index bc85749d..302701a8 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { Switch, Redirect, withRouter } from 'react-router-dom'
 import debounce from 'lodash.debounce'
 import queryString from 'query-string'
+import moment from 'moment-mini'
 import { uploadCompose, resetCompose } from '../../actions/compose'
 import { expandHomeTimeline } from '../../actions/timelines'
 import { fetchGroups } from '../../actions/groups'
@@ -15,6 +16,7 @@ import {
 } from '../../actions/notifications'
 import LoadingBar from '../../components/loading_bar'
 import { fetchFilters } from '../../actions/filters'
+import { MIN_ACCOUNT_CREATED_AT_ONBOARDING } from '../../actions/onboarding'
 import { clearHeight } from '../../actions/height_cache'
 import { openModal } from '../../actions/modal'
 import WrappedRoute from './util/wrapped_route'
@@ -38,6 +40,7 @@ import ModalPage from '../../pages/modal_page'
 import SettingsPage from '../../pages/settings_page'
 import ProPage from '../../pages/pro_page'
 import ExplorePage from '../../pages/explore_page'
+import IntroductionPage from '../../pages/introduction_page'
 import AboutPage from '../../pages/about_page'
 // import AuthPage from '../../pages/auth_page'
 
@@ -56,7 +59,6 @@ import {
   Following,
   FollowRequests,
   GenericNotFound,
-  GettingStarted,
   GroupsCollection,
   GroupCreate,
   GroupMembers,
@@ -64,6 +66,7 @@ import {
   GroupTimeline,
   HashtagTimeline,
   HomeTimeline,
+  Introduction,
   Investors,
   LikedStatuses,
   ListCreate,
@@ -94,6 +97,8 @@ const messages = defineMessages({
 })
 
 const mapStateToProps = (state) => ({
+  shownOnboarding: state.getIn(['settings', 'shownOnboarding'], false),
+  accountCreatedAt: state.getIn(['accounts', me, 'created_at']),
   isComposing: state.getIn(['compose', 'is_composing']),
   hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
   hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
@@ -129,6 +134,7 @@ class SwitchingArea extends PureComponent {
     children: PropTypes.node,
     location: PropTypes.object,
     onLayoutChange: PropTypes.func.isRequired,
+    shownOnboarding: PropTypes.bool.isRequired,
   }
 
   componentDidMount() {
@@ -145,8 +151,8 @@ class SwitchingArea extends PureComponent {
     // The cached heights are no longer accurate, invalidate
     this.props.onLayoutChange()
   }, 500, {
-      trailing: true,
-    })
+    trailing: true,
+  })
 
   setRef = c => {
     this.node = c.getWrappedInstance()
@@ -160,6 +166,8 @@ class SwitchingArea extends PureComponent {
         <Redirect from='/' to='/home' exact />
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
 
+        <WrappedRoute path='/welcome' exact page={IntroductionPage} component={Introduction} content={children} />
+
         <WrappedRoute path='/about' publicRoute exact page={AboutPage} component={About} content={children} componentParams={{ title: 'About' }} />
         <WrappedRoute path='/about/dmca' publicRoute exact page={AboutPage} component={DMCA} content={children} componentParams={{ title: 'DMCA' }} />
         <WrappedRoute path='/about/investors' publicRoute exact page={AboutPage} component={Investors} content={children} componentParams={{ title: 'Investors' }} />
@@ -261,6 +269,8 @@ class UI extends PureComponent {
     hasMediaAttachments: PropTypes.bool,
     location: PropTypes.object,
     intl: PropTypes.object.isRequired,
+    shownOnboarding: PropTypes.bool.isRequired,
+    accountCreatedAt: PropTypes.string.isRequired,
   }
 
   state = {
@@ -377,6 +387,15 @@ class UI extends PureComponent {
   componentWillMount() {
     if (!me) return
 
+    //If first time opening app, and is new user, show onboarding
+    const accountCreatedAtValue = moment(this.props.accountCreatedAt).valueOf()
+    const shouldShowOnboarding = !this.props.shownOnboarding && accountCreatedAtValue > MIN_ACCOUNT_CREATED_AT_ONBOARDING
+    
+    if (shouldShowOnboarding) {
+      this.context.router.history.push('/welcome')
+      return
+    }
+
     window.addEventListener('beforeunload', this.handleBeforeUnload, false)
 
     document.addEventListener('dragenter', this.handleDragEnter, false)
@@ -415,6 +434,8 @@ class UI extends PureComponent {
 
       this.setState({ fetchedNotifications: true })
       this.props.dispatch(expandNotifications())
+    } else if (pathname === '/welcome') {
+      this.context.router.history.push('/home')
     }
 
     this.props.dispatch(initializeNotifications())
@@ -531,8 +552,12 @@ class UI extends PureComponent {
   }
 
   render() {
+    const {
+      children,
+      location,
+      shownOnboarding,
+    } = this.props
     const { draggingOver } = this.state
-    const { children, location } = this.props
 
     // : todo :
     // const handlers = me ? {
@@ -555,7 +580,11 @@ class UI extends PureComponent {
       <div ref={this.setRef} className={_s.gabsocial}>
         <LoadingBar className={[_s.height1PX, _s.z3, _s.bgBrandLight].join(' ')} />
 
-        <SwitchingArea location={location} onLayoutChange={this.handleLayoutChange}>
+        <SwitchingArea
+          location={location}
+          onLayoutChange={this.handleLayoutChange}
+          shownOnboarding={shownOnboarding}
+        >
           {children}
         </SwitchingArea>
 
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index 4079a4e1..ce819d6a 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -41,6 +41,7 @@ export function HashtagTimelineSettingsModal() { return import(/* webpackChunkNa
 export function HomeTimeline() { return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline') }
 export function HomeTimelineSettingsModal() { return import(/* webpackChunkName: "components/home_timeline_settings_modal" */'../../../components/modal/home_timeline_settings_modal') }
 export function HotkeysModal() { return import(/* webpackChunkName: "components/hotkeys_modal" */'../../../components/modal/hotkeys_modal') }
+export function Introduction() { return import(/* webpackChunkName: "features/introduction" */'../../introduction') }
 export function Investors() { return import(/* webpackChunkName: "features/about/investors" */'../../about/investors') }
 export function ListAddUserModal() { return import(/* webpackChunkName: "features/list_add_user_modal" */'../../../components/modal/list_add_user_modal') }
 export function ListCreate() { return import(/* webpackChunkName: "features/list_create" */'../../list_create') }
diff --git a/app/javascript/gabsocial/layouts/introduction_layout.js b/app/javascript/gabsocial/layouts/introduction_layout.js
index e86d0c77..9e734a59 100644
--- a/app/javascript/gabsocial/layouts/introduction_layout.js
+++ b/app/javascript/gabsocial/layouts/introduction_layout.js
@@ -1,3 +1,4 @@
+import Block from '../components/block'
 import NavigationBar from '../components/navigation_bar'
 
 export default class IntroductionLayout extends PureComponent {
@@ -13,13 +14,19 @@ export default class IntroductionLayout extends PureComponent {
     return (
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
-        <NavigationBar title={title} />
+        <NavigationBar title={title} noSearch noActions />
 
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
           <div className={[_s.default, _s.width100PC].join(' ')}>
             <main role='main'>
-              <div className={[_s.default, _s.mlAuto, _s.mrAuto].join(' ')}>
-                {children}
+              <div className={[_s.default, _s.alignItemsCenter, _s.py15, _s.px15, _s.mlAuto, _s.mrAuto].join(' ')}>
+
+                <div className={[_s.default, _s.width645PX, _s.maxWidth100PC42PX].join(' ')}>
+                  <Block>
+                    {children}
+                  </Block>
+                </div>
+
               </div>
             </main>
           </div>
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index c6bae0e0..5ce1c651 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -483,6 +483,7 @@ pre {
 .heightMax200PX { max-height: 200px; }
 .heightMax56PX { max-height: 56px; }
 .heightCalc53PX { height: calc(100vh - 53px); }
+.heightCalc80VH106PX { height: calc(80vh - 106px); }
 
 .heightMin100VH { min-height: 100vh; }
 .heightMin50VH { min-height: 50vh; }