feat(welcome/native): improved ui

react/features/mobile/navigation/screenOptions.js

@@ -51,7 +51,7 @@ export const welcomeScreenOptions = {
     gestureEnabled: false,
     headerShown: true,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01

react/features/welcome/components/WelcomePage.native.js

@@ -8,7 +8,9 @@ import JitsiStatusBar from '../../base/modal/components/JitsiStatusBar';
 import { LoadingIndicator, Text } from '../../base/react';
 import { connect } from '../../base/redux';
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
+import Button from '../../base/ui/components/native/Button';
 import Input from '../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../base/ui/constants.native';
 import WelcomePageTabs
     from '../../mobile/navigation/components/welcome/components/WelcomePageTabs';
 
@@ -19,7 +21,6 @@ import {
 } from './AbstractWelcomePage';
 import styles from './styles';
 
-
 type Props = AbstractProps & {
 
     /**
@@ -281,38 +282,39 @@ class WelcomePage extends AbstractWelcomePage<*> {
      */
     _renderJoinButton() {
         const { t } = this.props;
-        let children;
+        let joinButton;
 
 
         if (this.state.joining) {
             // TouchableHighlight is picky about what its children can be, so
             // wrap it in a native component, i.e. View to avoid having to
             // modify non-native children.
-            children = (
-                <View>
-                    <LoadingIndicator
-                        color = { styles.buttonText.color }
-                        size = 'small' />
-                </View>
+            joinButton = (
+                <TouchableHighlight
+                    accessibilityLabel =
+                        { t('welcomepage.accessibilityLabel.join') }
+                    onPress = { this._onJoin }
+                    style = { styles.button }>
+                    <View>
+                        <LoadingIndicator
+                            color = { BaseTheme.palette.icon01 }
+                            size = 'small' />
+                    </View>
+                </TouchableHighlight>
             );
         } else {
-            children = (
-                <Text style = { styles.buttonText }>
-                    { this.props.t('welcomepage.join') }
-                </Text>
+            joinButton = (
+                <Button
+                    accessibilityLabel = { 'welcomepage.accessibilityLabel.join' }
+                    labelKey = { 'welcomepage.join' }
+                    labelStyle = { styles.joinButtonLabel }
+                    onClick = { this._onJoin }
+                    style = { styles.buttonText }
+                    type = { BUTTON_TYPES.PRIMARY } />
             );
         }
 
-        return (
-            <TouchableHighlight
-                accessibilityLabel =
-                    { t('welcomepage.accessibilityLabel.join') }
-                onPress = { this._onJoin }
-                style = { styles.button }
-                underlayColor = { BaseTheme.palette.ui12 }>
-                { children }
-            </TouchableHighlight>
-        );
+        return joinButton;
     }
 
     /**

react/features/welcome/components/styles.js

@@ -41,19 +41,20 @@ export default {
      * Join button style.
      */
     button: {
-        backgroundColor: BaseTheme.palette.screen01Header,
-        borderColor: BaseTheme.palette.screen01Header,
-        borderRadius: 4,
+        backgroundColor: BaseTheme.palette.action01,
+        borderColor: BaseTheme.palette.action01,
+        borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
-        height: 30,
+        height: BaseTheme.spacing[7],
         justifyContent: 'center',
-        paddingHorizontal: 20
+        paddingHorizontal: BaseTheme.spacing[4]
     },
 
-    /**
-     * Join button text style.
-     */
-    buttonText: {
+    joinButtonLabel: {
+        textTransform: 'uppercase'
+    },
+
+    joinButtonText: {
         alignSelf: 'center',
         color: BaseTheme.palette.text01,
         fontSize: 14
@@ -85,6 +86,7 @@ export default {
      * The text of the hint box.
      */
     hintText: {
+        color: BaseTheme.palette.text01,
         textAlign: 'center'
     },
 
@@ -111,13 +113,11 @@ export default {
     },
 
     messageContainer: {
-        backgroundColor: BaseTheme.palette.ui12,
-        borderColor: BaseTheme.palette.field02,
-        borderRadius: 4,
-        borderWidth: 1,
-        marginVertical: 5,
-        paddingHorizontal: BoxModel.padding,
-        paddingVertical: 2 * BoxModel.padding
+        backgroundColor: BaseTheme.palette.ui03,
+        borderRadius: BaseTheme.shape.borderRadius,
+        marginVertical: BaseTheme.spacing[1],
+        paddingHorizontal: BaseTheme.spacing[2],
+        paddingVertical: 2 * BaseTheme.spacing[2]
     },
 
     roomNameInputContainer: {
@@ -191,7 +191,7 @@ export default {
     insecureRoomNameWarningContainer: {
         alignItems: 'center',
         flexDirection: 'row',
-        paddingHorizontal: 5
+        paddingHorizontal: BaseTheme.spacing[1]
     },
 
     insecureRoomNameWarningIcon: {
@@ -215,8 +215,9 @@ export default {
     },
 
     customInput: {
-        fontSize: 24,
-        lineHeight: 32,
+        fontSize: 32,
+        letterSpacing: 0,
+        lineHeight: BaseTheme.spacing[6],
         textAlign: 'center'
     },
 

react/features/welcome/constants.tsx

@@ -1,23 +1,25 @@
 /* eslint-disable lines-around-comment */
+
 import React from 'react';
 
 import { IconCalendar, IconGear, IconRestore } from '../base/icons/svg';
-import BaseTheme from '../base/ui/components/BaseTheme';
+import BaseTheme from '../base/ui/components/BaseTheme.native';
 
 // @ts-ignore
 import TabIcon from './components/TabIcon';
 
 // @ts-ignore
-export const INACTIVE_TAB_COLOR = BaseTheme.palette.tab01Disabled;
+export const ACTIVE_TAB_COLOR = BaseTheme.palette.icon01;
+export const INACTIVE_TAB_COLOR = BaseTheme.palette.icon03;
 
 export const tabBarOptions = {
-    tabBarActiveTintColor: BaseTheme.palette.icon01,
+    tabBarActiveTintColor: ACTIVE_TAB_COLOR,
     tabBarInactiveTintColor: INACTIVE_TAB_COLOR,
     tabBarLabelStyle: {
         fontSize: 12
     },
     tabBarStyle: { // @ts-ignore
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     }
 };