OnboardingView

app/constants/tablet.js

@@ -1,4 +1,4 @@
 export const MAX_SIDEBAR_WIDTH = 321;
 export const MAX_CONTENT_WIDTH = '90%';
-export const MAX_SCREEN_CONTENT_WIDTH = '45%';
+export const MAX_SCREEN_CONTENT_WIDTH = '50%';
 export const MIN_WIDTH_SPLIT_LAYOUT = 700;

app/containers/Button/index.js

@@ -9,15 +9,16 @@ import ActivityIndicator from '../ActivityIndicator';
 
 const styles = StyleSheet.create({
 	container: {
-		paddingHorizontal: 15,
+		paddingHorizontal: 14,
 		justifyContent: 'center',
 		height: 48,
 		borderRadius: 2,
-		marginBottom: 10
+		marginBottom: 12
 	},
 	text: {
-		fontSize: 18,
+		fontSize: 16,
-		textAlign: 'center'
+		textAlign: 'center',
+		...sharedStyles.textMedium
 	}
 });
 
@@ -55,7 +56,7 @@ export default class Button extends React.PureComponent {
 					backgroundColor
 						? { backgroundColor }
 						: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
-					disabled && { backgroundColor: themes[theme].borderColor },
+					disabled && { opacity: 0.3 },
 					style
 				]}
 				{...otherProps}
@@ -67,8 +68,7 @@ export default class Button extends React.PureComponent {
 							<Text
 								style={[
 									styles.text,
-									isPrimary ? sharedStyles.textMedium : sharedStyles.textBold,
+									{ color: isPrimary ? themes[theme].buttonText : themes[theme].bodyText }
-									{ color: isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor }
 								]}
 							>
 								{title}

app/i18n/locales/de.js

@@ -139,7 +139,6 @@ export default {
 	Collaborative: 'Kollaborativ',
 	Confirm: 'Bestätigen',
 	Connect: 'Verbinden',
-	Connect_to_a_server: 'Verbinden Sie sich mit einem Server',
 	Connected: 'Verbunden',
 	connecting_server: 'verbinde zum Server',
 	Connecting: 'Verbinden ...',
@@ -308,6 +307,7 @@ export default {
 	Notification_Preferences: 'Benachrichtigungseinstellungen',
 	Offline: 'Offline',
 	Oops: 'Hoppla!',
+	Onboarding_title: 'Willkommen bei Rocket.Chat',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Nur autorisierte Benutzer können neue Nachrichten schreiben',
 	Open_emoji_selector: 'Öffne die Emoji-Auswahl',
@@ -481,7 +481,6 @@ export default {
 	Voice_call: 'Sprachanruf',
 	Websocket_disabled: 'Websockets sind auf diesem Server nicht aktiviert.\n{{contact}}',
 	Welcome: 'Herzlich willkommen',
-	Welcome_to_RocketChat: 'Willkommen bei Rocket.Chat',
 	Whats_your_2fa: 'Wie lautet Ihr 2FA-Code?',
 	Without_Servers: 'Ohne Server',
 	Write_External_Permission_Message: 'Rocket.Chat benötigt Zugriff auf Ihre Galerie um Bilder speichern zu können.',

app/i18n/locales/en.js

@@ -139,7 +139,6 @@ export default {
 	Collaborative: 'Collaborative',
 	Confirm: 'Confirm',
 	Connect: 'Connect',
-	Connect_to_a_server: 'Connect to a server',
 	Connected: 'Connected',
 	connecting_server: 'connecting to server',
 	Connecting: 'Connecting...',
@@ -308,6 +307,10 @@ export default {
 	Notification_Preferences: 'Notification Preferences',
 	Offline: 'Offline',
 	Oops: 'Oops!',
+	Onboarding_description: 'A workspace is your team or organization’s space to collaborate. Ask the workspace admin for address to join or create one for your team.',
+	Onboarding_join_workspace: 'Join a workspace',
+	Onboarding_subtitle: 'Beyond Team Collaboration',
+	Onboarding_title: 'Welcome to Rocket.Chat',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Only authorized users can write new messages',
 	Open_emoji_selector: 'Open emoji selector',
@@ -481,7 +484,6 @@ export default {
 	Voice_call: 'Voice call',
 	Websocket_disabled: 'Websocket is disabled for this server.\n{{contact}}',
 	Welcome: 'Welcome',
-	Welcome_to_RocketChat: 'Welcome to Rocket.Chat',
 	Whats_your_2fa: 'What\'s your 2FA code?',
 	Without_Servers: 'Without Servers',
 	Write_External_Permission_Message: 'Rocket Chat needs access to your gallery so you can save images.',

app/i18n/locales/es-ES.js

@@ -134,7 +134,6 @@ export default {
 	Collaborative: 'Colaborativo',
 	Confirm: 'Confirmar',
 	Connect: 'Conectar',
-	Connect_to_a_server: 'Conectar a servidor',
 	Connected: 'Conectado',
 	connecting_server: 'conectando a servidor',
 	Connecting: 'Conectando...',
@@ -270,6 +269,7 @@ export default {
 	Notification_Preferences: 'Configuración de notificaciones',
 	Offline: 'Sin conexión',
 	Oops: 'Oops!',
+	Onboarding_title: 'Bienvenido a Rocket.Chat',
 	Online: 'Conectado',
 	Only_authorized_users_can_write_new_messages: 'Sólo pueden escribir mensajes usuarios autorizados',
 	Open_emoji_selector: 'Abrir selector de emojis',
@@ -427,7 +427,6 @@ export default {
 	Voice_call: 'Llamada de voz',
 	Websocket_disabled: 'Websocket está deshabilitado para este servidor.\n{{contact}}',
 	Welcome: 'Bienvenido',
-	Welcome_to_RocketChat: 'Bienvenido a Rocket.Chat',
 	Whats_your_2fa: '¿Cuál es tu código 2FA?',
 	Without_Servers: 'Sin servidores',
 	Yes_action_it: 'Sí, {{action}}!',

app/i18n/locales/fr.js

@@ -122,7 +122,6 @@ export default {
 	Collaborative: 'Collaborative',
 	Confirm: 'Confirmer',
 	Connect: 'Se connecter',
-	Connect_to_a_server: 'Se connecter à un serveur',
 	Connected: 'Connecté',
 	Connecting: 'Connexion ...',
 	Continue_with: 'Continuer avec',
@@ -223,6 +222,7 @@ export default {
 	Notify_all_in_this_room: 'Notifier tous dans cette salle',
 	Offline: 'Hors ligne',
 	Oops: 'Oops!',
+	Onboarding_title: 'Bienvenue sur Rocket.Chat',
 	Online: 'En ligne',
 	Only_authorized_users_can_write_new_messages: 'Seuls les utilisateurs autorisés peuvent écrire de nouveaux messages.',
 	Open_emoji_selector: 'Ouvrir sélecteur emoji',
@@ -338,7 +338,6 @@ export default {
 	Video_call: 'Appel vidéo',
 	Voice_call: 'Appel vocal',
 	Welcome: 'Bienvenue',
-	Welcome_to_RocketChat: 'Bienvenue sur Rocket.Chat',
 	Whats_your_2fa: 'Quel est votre code 2FA?',
 	Yes_action_it: 'Oui, {{action}} le!',
 	Yesterday: 'Hier',

app/i18n/locales/it.js

@@ -136,7 +136,6 @@ export default {
 	Collaborative: 'Collaborativo',
 	Confirm: 'Conferma',
 	Connect: 'Connetti',
-	Connect_to_a_server: 'Connetti ad un server',
 	Connected: 'Connesso',
 	connecting_server: 'connessione al server',
 	Connecting: 'Connessione...',
@@ -281,6 +280,7 @@ export default {
 	Notification_Preferences: 'Impostazioni notifiche',
 	Offline: 'Offline',
 	Oops: 'Oops!',
+	Onboarding_title: 'Benvenuto in Rocket.Chat',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Solo gli utenti autorizzati possono scrivere nuovi messaggi',
 	Open_emoji_selector: 'Apri selettore emoji',
@@ -441,7 +441,6 @@ export default {
 	Voice_call: 'Chiamata vocale',
 	Websocket_disabled: 'Websocket è disabilitato per questo server.\n{{contact}}',
 	Welcome: 'Benvenuto',
-	Welcome_to_RocketChat: 'Benvenuto in Rocket.Chat',
 	Whats_your_2fa: 'Qual\'è il tuo codice 2FA?',
 	Without_Servers: 'Senza server',
 	Write_External_Permission_Message: 'Rocket.Chat ha bisogno dell\'accesso alla galleria per salvare le immagini.',

app/i18n/locales/ja.js

@@ -153,7 +153,6 @@ export default {
 	Collaborative: 'コラボ',
 	Confirm: '承認',
 	Connect: '接続',
-	Connect_to_a_server: 'サーバーに接続',
 	Connected: '接続しました',
 	connecting_server: 'サーバーに接続中',
 	Connecting: '接続中...',
@@ -311,6 +310,7 @@ export default {
 	Notification_Preferences: '通知設定',
 	Offline: 'オフライン',
 	Oops: 'おっと！',
+	Onboarding_title: 'Rocket.Chatへようこそ',
 	Online: 'オンライン',
 	Only_authorized_users_can_write_new_messages:
     '承認されたユーザーだけが新しいメッセージを書き込めます',
@@ -487,7 +487,6 @@ export default {
 	Voice_call: '音声通話',
 	Websocket_disabled: 'Websocketはこのサーバーでは無効化されています。\n{{contact}}',
 	Welcome: 'ようこそ',
-	Welcome_to_RocketChat: 'Rocket.Chatへようこそ',
 	Whats_your_2fa: '2段階認証のコードを入力してください',
 	Without_Servers: 'サーバーを除く',
 	Write_External_Permission_Message:

app/i18n/locales/nl.js

@@ -136,7 +136,6 @@ export default {
 	Collaborative: 'Samenwerkend',
 	Confirm: 'Bevestig',
 	Connect: 'Verbind',
-	Connect_to_a_server: 'Verbind met een server',
 	Connected: 'Verbonden',
 	connecting_server: 'Verbonden met een server',
 	Connecting: 'Aan het verbinden...',
@@ -281,6 +280,7 @@ export default {
 	Notification_Preferences: 'Notificatievoorkeuren',
 	Offline: 'Offline',
 	Oops: 'Oeps!',
+	Onboarding_title: 'Welkom bij Rocket.Chat',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Alleen gebruikers met toestemming mogen nieuwe berichten maken',
 	Open_emoji_selector: 'Open de emoji selector',
@@ -448,7 +448,6 @@ export default {
 	Voice_call: 'Audiogesprek',
 	Websocket_disabled: 'Websocket staat uit voor deze server.\n{{contact}}',
 	Welcome: 'Welkom',
-	Welcome_to_RocketChat: 'Welkom bij Rocket.Chat',
 	Whats_your_2fa: 'Wat is je 2FA code?',
 	Without_Servers: 'Zonder Servers',
 	Write_External_Permission_Message: 'Rocket Chat moet bij je galerij kunnen om afbeeldingen op te slaan.',

app/i18n/locales/pt-BR.js

@@ -142,7 +142,6 @@ export default {
 	Collaborative: 'Colaborativo',
 	Confirm: 'Confirmar',
 	Connect: 'Conectar',
-	Connect_to_a_server: 'Conectar a um servidor',
 	Connected: 'Conectado',
 	connecting_server: 'conectando no servidor',
 	Connecting: 'Conectando...',
@@ -282,6 +281,7 @@ export default {
 	Not_RC_Server: 'Este não é um servidor Rocket.Chat.\n{{contact}}',
 	Offline: 'Offline',
 	Oops: 'Ops!',
+	Onboarding_title: 'Bem vindo ao Rocket.Chat',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Somente usuários autorizados podem escrever novas mensagens',
 	Open_emoji_selector: 'Abrir seletor de emoji',
@@ -432,7 +432,6 @@ export default {
 	Voice_call: 'Chamada de voz',
 	Websocket_disabled: 'Websocket está desativado para esse servidor.\n{{contact}}',
 	Welcome: 'Bem vindo',
-	Welcome_to_RocketChat: 'Bem vindo ao Rocket.Chat',
 	Whats_your_2fa: 'Qual seu código de autenticação?',
 	Without_Servers: 'Sem Servidores',
 	Yes_action_it: 'Sim, {{action}}!',

app/i18n/locales/pt-PT.js

@@ -122,7 +122,6 @@ export default {
 	Collaborative: 'Colaborativa',
 	Confirm: 'Confirmar',
 	Connect: 'Ligar',
-	Connect_to_a_server: 'Ligue-se a um servidor',
 	Connected: 'Ligado',
 	Connecting: 'A ligar...',
 	Continue_with: 'Continuar com',
@@ -224,6 +223,7 @@ export default {
 	Notify_all_in_this_room: 'Notifica todos os utilizadores nesta sala',
 	Offline: 'Desligado',
 	Oops: 'Oops!',
+	Onboarding_title: 'Bem vindo(a) ao Rocket.Chat',
 	Online: 'Ligado',
 	Only_authorized_users_can_write_new_messages: 'Apenas utilizadores autorizados podem escrever novas mensagens',
 	Open_emoji_selector: 'Abra o selector de emoticons',
@@ -341,7 +341,6 @@ export default {
 	Video_call: 'Video chamada',
 	Voice_call: 'Chamada de voz',
 	Welcome: 'Bem vindo(a)',
-	Welcome_to_RocketChat: 'Bem vindo(a) ao Rocket.Chat',
 	Whats_your_2fa: 'Qual é o seu código 2FA?',
 	Yes_action_it: 'Sim, {{action}}!',
 	Yesterday: 'Ontem',

app/i18n/locales/ru.js

@@ -131,7 +131,6 @@ export default {
 	Collaborative: 'Совместный',
 	Confirm: 'Подтверждение',
 	Connect: 'Соединение',
-	Connect_to_a_server: 'Подключиться к серверу',
 	Connected: 'Подключено',
 	connecting_server: 'подключение к серверу',
 	Connecting: 'Соединение...',
@@ -264,6 +263,7 @@ export default {
 	Notification_Preferences: 'Настройки уведомлений',
 	Offline: 'Офлайн',
 	Oops: 'Упс!',
+	Onboarding_title: 'Добро пожаловать в Rocket.Chat',
 	Online: 'Онлайн',
 	Only_authorized_users_can_write_new_messages: 'Только авторизованные пользователи могут писать новые сообщения',
 	Open_emoji_selector: 'Открыть селектор emoji',
@@ -420,7 +420,6 @@ export default {
 	Voice_call: 'Голосовой вызов',
 	Websocket_disabled: 'Websocket отключен для этого сервера.\n{{contact}}',
 	Welcome: 'Добро пожаловать,',
-	Welcome_to_RocketChat: 'Добро пожаловать в Rocket.Chat',
 	Whats_your_2fa: 'Какой у вас код 2FA?',
 	Without_Servers: 'Без серверов',
 	Yes_action_it: 'Да, {{action}} это!',

app/i18n/locales/zh-CN.js

@@ -122,7 +122,6 @@ export default {
 	Collaborative: '协作',
 	Confirm: '确认',
 	Connect: '连接',
-	Connect_to_a_server: '连接到服务器',
 	Connected: '已连接',
 	Connecting: '连接中',
 	Continue_with: '继续采用',
@@ -220,6 +219,7 @@ export default {
 	Notify_all_in_this_room: '通知这个房间的所有人',
 	Offline: '离线',
 	Oops: '哎呀!',
+	Onboarding_title: '欢迎来到 Rocket.Chat',
 	Online: '在线',
 	Only_authorized_users_can_write_new_messages: '只有经过授权的用户才能写新消息',
 	Open_emoji_selector: '打开emoji选择器',
@@ -333,7 +333,6 @@ export default {
 	Video_call: '视频电话',
 	Voice_call: '语音电话',
 	Welcome: '欢迎',
-	Welcome_to_RocketChat: '欢迎来到 Rocket.Chat',
 	Yes_action_it: '是的，{{action}}它！',
 	Yesterday: '昨天',
 	You_are_in_preview_mode: '您处于预览模式',

app/views/OnboardingView/Button.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
-
-import styles from './styles';
-import { themes } from '../../constants/colors';
-import DisclosureIndicator from '../../containers/DisclosureIndicator';
-
-export default class Button extends React.PureComponent {
-	static propTypes = {
-		title: PropTypes.string,
-		subtitle: PropTypes.string,
-		type: PropTypes.string,
-		theme: PropTypes.string,
-		icon: PropTypes.node.isRequired,
-		testID: PropTypes.string.isRequired,
-		onPress: PropTypes.func
-	}
-
-	static defaultProps = {
-		title: 'Press me!',
-		type: 'primary',
-		onPress: () => alert('It works!')
-	}
-
-	state = {
-		active: false
-	};
-
-	render() {
-		const {
-			title, subtitle, type, onPress, icon, testID, theme
-		} = this.props;
-		const { active } = this.state;
-		const activeStyle = active && styles.buttonActive;
-		const isPrimary = (type === 'primary');
-		const buttonContainerStyle = {
-			backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].focusedBackground,
-			borderColor: isPrimary ? themes[theme].actionTintColor : themes[theme].borderColor
-		};
-		return (
-			<TouchableWithoutFeedback
-				onPress={onPress}
-				onPressIn={() => this.setState({ active: true })}
-				onPressOut={() => this.setState({ active: false })}
-				testID={testID}
-			>
-				<View style={[styles.buttonContainer, buttonContainerStyle]}>
-					<View style={styles.buttonIconContainer}>
-						{icon}
-					</View>
-					<View style={styles.buttonCenter}>
-						<Text style={[styles.buttonTitle, { color: isPrimary ? themes[theme].buttonText : themes[theme].tintColor }, activeStyle]}>{title}</Text>
-						{subtitle ? <Text style={[styles.buttonSubtitle, activeStyle, { color: themes[theme].auxiliaryText }]}>{subtitle}</Text> : null}
-					</View>
-					{type === 'secondary' ? <DisclosureIndicator theme={theme} /> : null}
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-}

app/views/OnboardingView/index.js

@@ -10,7 +10,7 @@ import Orientation from 'react-native-orientation-locker';
 import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';
 import { appStart as appStartAction } from '../../actions';
 import I18n from '../../i18n';
-import Button from './Button';
+import Button from '../../containers/Button';
 import styles from './styles';
 import { isIOS, isNotch, isTablet } from '../../utils/deviceInfo';
 import EventEmitter from '../../utils/events';
@@ -147,36 +147,53 @@ class OnboardingView extends React.Component {
 				testID='onboarding-view'
 			>
 				<StatusBar theme={theme} />
-				<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
+				<View style={isTablet && sharedStyles.tabletScreenContent}>
-				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Welcome_to_RocketChat')}</Text>
+					<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
-				<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>Beyond Team Collaboration</Text>
+					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
-				<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>A workspace is your team or organization’s space to collaborate. Ask the workspace admin for address to join or create one for your team.</Text>
+					<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
-				<View style={[styles.buttonsContainer, isTablet && sharedStyles.tabletScreenContent]}>
+					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
-					<Button
+					<View style={[styles.buttonsContainer]}>
-						type='secondary'
+						{/* <Button
-						title={I18n.t('Connect_to_a_server')}
+							type='secondary'
-						icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
+							title={I18n.t('Connect_to_a_server')}
-						onPress={this.connectServer}
+							icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
-						testID='connect-server-button'
+							onPress={this.connectServer}
-						theme={theme}
+							testID='connect-server-button'
-					/>
+							theme={theme}
-					<Button
+						/>
-						type='secondary'
+						<Button
-						title={I18n.t('Join_the_community')}
+							type='secondary'
-						subtitle='open.rocket.chat'
+							title={I18n.t('Join_the_community')}
-						icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
+							subtitle='open.rocket.chat'
-						onPress={this.joinCommunity}
+							icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
-						testID='join-community-button'
+							onPress={this.joinCommunity}
-						theme={theme}
+							testID='join-community-button'
-					/>
+							theme={theme}
-					<Button
+						/>
-						type='primary'
+						<Button
-						title={I18n.t('Create_a_new_workspace')}
+							type='primary'
-						icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
+							title={I18n.t('Create_a_new_workspace')}
-						onPress={this.createWorkspace}
+							icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
-						testID='create-workspace-button'
+							onPress={this.createWorkspace}
-						theme={theme}
+							testID='create-workspace-button'
-					/>
+							theme={theme}
+						/> */}
+						<Button
+							title={I18n.t('Onboarding_join_workspace')}
+							type='primary'
+							style={styles.button}
+							onPress={this.connectServer}
+							theme={theme}
+						/>
+						<Button
+							title={I18n.t('Create_a_new_workspace')}
+							type='secondary'
+							style={styles.button}
+							backgroundColor={themes[theme].chatComponentBackground}
+							onPress={this.createWorkspace}
+							theme={theme}
+						/>
+					</View>
 				</View>
 				{this.renderClose()}
 			</SafeAreaView>

app/views/OnboardingView/styles.js

@@ -12,7 +12,7 @@ export default StyleSheet.create({
 	},
 	onboarding: {
 		alignSelf: 'center',
-		marginTop: verticalScale(116),
+		marginTop: !isTablet && verticalScale(116),
 		marginBottom: verticalScale(50),
 		maxHeight: verticalScale(150),
 		resizeMode: 'contain',
@@ -41,42 +41,8 @@ export default StyleSheet.create({
 	},
 	buttonsContainer: {
 		marginBottom: verticalScale(10),
-		marginTop: verticalScale(30)
+		marginTop: verticalScale(30),
-	},
+		marginHorizontal: 16
-	buttonContainer: {
-		marginHorizontal: 15,
-		marginVertical: 5,
-		flexDirection: 'row',
-		height: 60,
-		alignItems: 'center',
-		borderWidth: 1,
-		borderRadius: 2
-	},
-	buttonCenter: {
-		flex: 1,
-		flexDirection: 'column',
-		justifyContent: 'center'
-	},
-	buttonTitle: {
-		...sharedStyles.textSemibold,
-		fontSize: 17
-	},
-	buttonSubtitle: {
-		...sharedStyles.textRegular,
-		fontSize: 15
-	},
-	buttonIconContainer: {
-		width: 65,
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	buttonIcon: {
-		marginHorizontal: 10,
-		width: 20,
-		height: 20
-	},
-	buttonActive: {
-		opacity: 0.5
 	},
 	closeModal: {
 		position: 'absolute',