NewServerView

app/containers/OnboardingSeparator.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import I18n from '../i18n';
+import sharedStyles from '../views/Styles';
+import { themes } from '../constants/colors';
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginVertical: 24
+	},
+	line: {
+		height: 1,
+		flex: 1
+	},
+	text: {
+		fontSize: 14,
+		marginLeft: 14,
+		marginRight: 14,
+		...sharedStyles.textMedium
+	}
+});
+
+const DateSeparator = React.memo(({ theme }) => {
+	const line = { backgroundColor: themes[theme].borderColor };
+	const text = { color: themes[theme].auxiliaryText };
+	return (
+		<View style={styles.container}>
+			<View style={[styles.line, line]} />
+			<Text style={[styles.text, styles.marginRight, styles.marginLeft, text]}>{I18n.t('OR')}</Text>
+			<View style={[styles.line, line]} />
+		</View>
+	);
+});
+
+DateSeparator.propTypes = {
+	theme: PropTypes.string
+};
+
+export default DateSeparator;

app/i18n/locales/en.js

@@ -236,8 +236,8 @@ export default {
 	Invalid_server_version: 'The server you\'re trying to connect is using a version that\'s not supported by the app anymore: {{currentVersion}}.\n\nWe require version {{minVersion}}',
 	Invite_Link: 'Invite Link',
 	Invite_users: 'Invite users',
-	Join_the_community: 'Join the community',
 	Join: 'Join',
+	Join_our_open_workspace: 'Join our open workspace',
 	Join_your_workspace: 'Join your workspace',
 	Just_invited_people_can_access_this_channel: 'Just invited people can access this channel',
 	Language: 'Language',
@@ -312,10 +312,12 @@ export default {
 	Onboarding_join_workspace: 'Join a workspace',
 	Onboarding_subtitle: 'Beyond Team Collaboration',
 	Onboarding_title: 'Welcome to Rocket.Chat',
+	Onboarding_join_open_description: 'Join our open workspace to chat with the Rocket.Chat team and community.',
 	Online: 'Online',
 	Only_authorized_users_can_write_new_messages: 'Only authorized users can write new messages',
 	Open_emoji_selector: 'Open emoji selector',
 	Open_Source_Communication: 'Open Source Communication',
+	OR: 'OR',
 	Overwrites_the_server_configuration_and_use_room_config: 'Overwrites the server configuration and use room config',
 	Password: 'Password',
 	Permalink_copied_to_clipboard: 'Permalink copied to clipboard!',

app/views/NewServerView.js

@@ -15,16 +15,12 @@ import parse from 'url-parse';
 
 import { serverRequest } from '../actions/server';
 import sharedStyles from './Styles';
-import scrollPersistTaps from '../utils/scrollPersistTaps';
 import Button from '../containers/Button';
 import TextInput from '../containers/TextInput';
+import OnboardingSeparator from '../containers/OnboardingSeparator';
 import FormContainer from '../containers/FormContainer';
 import I18n from '../i18n';
-import KeyboardView from '../presentation/KeyboardView';
-import { isIOS, isNotch, isTablet } from '../utils/deviceInfo';
-import { CustomIcon } from '../lib/Icons';
-import StatusBar from '../containers/StatusBar';
-import AppVersion from '../containers/AppVersion';
+import { isIOS, isTablet } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
 import log from '../utils/log';
 import { animateNextTransition } from '../utils/layoutAnimation';
@@ -43,11 +39,6 @@ const styles = StyleSheet.create({
 		marginTop: 24,
 		marginBottom: 32
 	},
-	backButton: {
-		position: 'absolute',
-		paddingHorizontal: 9,
-		left: 15
-	},
 	certificatePicker: {
 		flex: 1,
 		marginTop: 40,
@@ -61,6 +52,12 @@ const styles = StyleSheet.create({
 	chooseCertificate: {
 		fontSize: 15,
 		...sharedStyles.textSemibold
+	},
+	description: {
+		...sharedStyles.textRegular,
+		fontSize: 14,
+		textAlign: 'left',
+		marginBottom: 24
 	}
 });
 
@@ -232,28 +229,6 @@ class NewServerView extends React.Component {
 		});
 	}
 
-	renderBack = () => {
-		const { navigation, theme } = this.props;
-
-		let top = 15;
-		if (isIOS) {
-			top = isNotch ? 45 : 30;
-		}
-
-		return (
-			<TouchableOpacity
-				style={[styles.backButton, { top }]}
-				onPress={() => navigation.pop()}
-			>
-				<CustomIcon
-					name='back'
-					size={30}
-					color={themes[theme].tintColor}
-				/>
-			</TouchableOpacity>
-		);
-	}
-
 	renderCertificatePicker = () => {
 		const { certificate } = this.state;
 		const { theme } = this.props;
@@ -311,12 +286,22 @@ class NewServerView extends React.Component {
 						onPress={this.submit}
 						disabled={!text}
 						loading={connecting}
+						style={{ marginBottom: 0 }}
 						testID='new-server-view-button'
 						theme={theme}
 					/>
+					<OnboardingSeparator theme={theme} />
+					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_join_open_description')}</Text>
+					<Button
+						title={I18n.t('Join_our_open_workspace')}
+						type='secondary'
+						backgroundColor={themes[theme].chatComponentBackground}
+						onPress={this.submit}
+						// loading={connecting} TODO: connecting to open
+						theme={theme}
+					/>
 				</View>
 				{ isIOS ? this.renderCertificatePicker() : null }
-				{/* <AppVersion theme={theme} /> */}
 			</FormContainer>
 		);
 	}

app/views/OnboardingView/index.js

@@ -99,10 +99,6 @@ class OnboardingView extends React.Component {
 		this.newServer();
 	}
 
-	joinCommunity = () => {
-		this.newServer('https://open.rocket.chat');
-	}
-
 	createWorkspace = async() => {
 		try {
 			await Linking.openURL('https://cloud.rocket.chat/trial');