diff --git a/app/javascript/gabsocial/components/welcome_reminders.js b/app/javascript/gabsocial/components/welcome_reminders.js
new file mode 100644
index 00000000..3591089e
--- /dev/null
+++ b/app/javascript/gabsocial/components/welcome_reminders.js
@@ -0,0 +1,182 @@
+import React from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import moment from 'moment-mini'
+import { openModal } from '../actions/modal'
+import {
+ CX,
+ MODAL_COMPOSE,
+ MODAL_EDIT_PROFILE,
+ BREAKPOINT_EXTRA_SMALL,
+ PLACEHOLDER_MISSING_HEADER_SRC,
+} from '../constants'
+import { me } from '../initial_state'
+import {
+ isMobile,
+ getWindowDimension,
+} from '../utils/is_mobile'
+import Button from '../components/button'
+import Icon from '../components/icon'
+import Text from '../components/text'
+import { makeGetAccount } from '../selectors'
+
+const initialState = getWindowDimension()
+
+class WelcomeReminders extends ImmutablePureComponent {
+
+ state = {
+ isXS: isMobile(initialState.width),
+ profileComplete: false,
+ visible: false,
+ }
+
+ componentDidMount() {
+ this.handleResize()
+ this.handleSetVisible(this.props.account)
+ window.addEventListener('resize', this.handleResize, false)
+ }
+
+ componentDidUpdate(prevProps) {
+ const { account } = this.props
+ console.log("Welcome updated")
+ this.handleSetVisible(account)
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize, false)
+ }
+
+ handleSetVisible = (account) => {
+ if (!account) return
+
+ const createdAt = account.get('created_at')
+ const diff = moment().diff(createdAt, 'days')
+
+ // Don't show to accounts older than 7 days old
+ if (diff > 7) {
+ this.setState({ visible: false })
+ return
+ }
+
+ const hasFollowing = account.get('following_count') > 0
+ const hasStatuses = account.get('statuses_count') > 0
+
+ const avatarSrc = account.get('avatar')
+ const avatarMissing = !avatarSrc ? true : avatarSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
+
+ const headerSrc = !!account ? account.get('header') : undefined
+ const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
+ const profileComplete = !avatarMissing && !headerMissing
+
+ const visible = !hasFollowing || !hasStatuses || !profileComplete
+
+ this.setState({ visible, profileComplete })
+ }
+
+ handleResize = () => {
+ const { width } = getWindowDimension()
+ this.setState({ isXS: isMobile(width) })
+ }
+
+ onOpenComposeModal = () => {
+ this.props.dispatch(openModal(MODAL_COMPOSE))
+ }
+
+ onOpenEditProfileModal = () => {
+ this.props.dispatch(openModal(MODAL_EDIT_PROFILE))
+ }
+
+ render() {
+ const { account } = this.props
+ const {
+ isXS,
+ visible,
+ profileComplete,
+ } = this.state
+
+ if (!visible || !account) return false
+
+ return (
+
+ 0}
+ to={isXS ? '/compose' : undefined}
+ action={isXS ? undefined : this.onOpenComposeModal}
+ />
+ 0}
+ />
+
+
+ )
+ }
+}
+
+const WelcomeReminderItem = (props) => {
+ const buttonClasses = CX({
+ d: 1,
+ overflowHidden: 1,
+ flexGrow1: 1,
+ outlineNone: 1,
+ cursorPointer: 1,
+ aiCenter: 1,
+ jcCenter: 1,
+ boxShadowBlock: 1,
+ bgSubtle_onHover: !props.completed,
+ px10: 1,
+ pt10: 1,
+ pb15: 1,
+ bgPrimary: 1,
+ borderColorSecondary: !props.completed,
+ borderColorBrand: props.completed,
+ border1PX: 1,
+ radiusSmall: 1,
+ noUnderline: 1,
+ })
+
+ return (
+
+
+
+
+