remove styled library since breaks tests. Specs and e2e tests

AppStores.js

@@ -24,7 +24,6 @@ import withdraw from './src/wallet/tokens/WithdrawStore';
 import hashtag from './src/common/stores/HashtagStore';
 import onboarding from './src/onboarding/OnboardingStore';
 import groupsBar from './src/groups/GroupsBarStore';
-import theme from './src/common/stores/ThemeStore';
 
 import sessionService from './src/common/services/session.service';
 import logService from './src/common/services/log.service';
@@ -61,7 +60,6 @@ const stores = {
   hashtag: new hashtag(),
   onboarding: new onboarding(),
   groupsBar: new groupsBar(),
-  theme: new theme(),
 };
 
 /**

__tests__/auth/RegisterFormNew.js

@@ -2,6 +2,7 @@ import 'react-native';
 import React from 'react';
 import { Alert } from "react-native";
 import { shallow } from 'enzyme';
+import { Button, CheckBox } from 'react-native-elements';
 
 import RegisterFormNew from '../../src/auth/RegisterFormNew';
 import authService from '../../src/auth/AuthService';
@@ -9,6 +10,7 @@ import authService from '../../src/auth/AuthService';
 jest.mock('../../src/auth/AuthService');
 jest.mock('../../src/auth/UserStore');
 
+
 Alert.alert = jest.fn();
 
 // Note: test renderer must be required after react-native.
@@ -24,7 +26,7 @@ describe('RegisterFormNew component', () => {
   it('should renders correctly', () => {
     const userStore = new UserStore();
     const registerForm = renderer.create(
-      <RegisterFormNew user={userStore}/>
+      <RegisterFormNew user={userStore} />
     ).toJSON();
     expect(registerForm).toMatchSnapshot();
   });
@@ -36,7 +38,7 @@ describe('RegisterFormNew component', () => {
     const userStore = new UserStore();
 
     const wrapper = shallow(
-      <RegisterFormNew user={userStore}/>
+      <RegisterFormNew user={userStore} />
     );
 
     const render = wrapper.dive();
@@ -44,7 +46,7 @@ describe('RegisterFormNew component', () => {
     // find the text inputs
     let inputs = render.find('Input');
 
-    // should have 4 inputs
+    // should have 3 inputs
     expect(inputs.length).toBe(3);
 
     // simulate user input
@@ -52,9 +54,6 @@ describe('RegisterFormNew component', () => {
     inputs.at(1).simulate('changeText', 'my@mail.com');
     inputs.at(2).simulate('changeText', 'somepassword');
 
-    // simulate press checkbox
-    await render.find('CheckBox').at(0).simulate('press');
-
     // update component (password confirmation is shown after the password field is set)
     await wrapper.update();
 
@@ -64,6 +63,9 @@ describe('RegisterFormNew component', () => {
     // simulate user input for paddword confirmation
     inputs.at(3).simulate('changeText', 'somepassword');
 
+    // simulate press checkbox
+    await render.find(CheckBox).at(0).simulate('press');
+
     // simulate press register
     await render.find('Button').at(0).simulate('press');
 
@@ -75,7 +77,7 @@ describe('RegisterFormNew component', () => {
     const userStore = new UserStore();
 
     const wrapper = shallow(
-      <RegisterFormNew user={userStore}/>
+      <RegisterFormNew user={userStore} />
     );
 
     const render = wrapper.dive();

__tests__/auth/__snapshots__/LoginForm.js.snap

@@ -229,7 +229,7 @@ exports[`LoginForm component should renders correctly 1`] = `
               }
             }
           >
-            LOGIN
+            Login
           </Text>
         </View>
       </View>
@@ -261,7 +261,7 @@ exports[`LoginForm component should renders correctly 1`] = `
         ]
       }
     >
-      FORGOT PASSWORD
+      Forgot your password?
     </Text>
   </View>
   <View

__tests__/auth/__snapshots__/RegisterScreenNew.js.snap

@@ -3,173 +3,28 @@
 exports[`RegisterScreenNew component should renders correctly 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "flex": 1,
-        "justifyContent": "center",
-      },
-      Object {
-        "padding": 10,
-      },
-    ]
-  }
->
-  <Image
-    source={
-      Object {
-        "testUri": "../../../src/assets/logos/bulb.png",
-      }
-    }
-    style={
-      Object {
-        "height": 45,
-        "marginLeft": 15,
-        "marginTop": 15,
-        "width": 26.25,
-      }
-    }
-  />
-  <View
-    style={
-      Array [
+    Object {
+      "flex": 1,
+      "opacity": 0,
+      "transform": Array [
         Object {
-          "backgroundColor": "transparent",
-          "borderRightColor": "transparent",
-          "borderRightWidth": 100,
-          "borderStyle": "solid",
-          "borderTopColor": "red",
-          "borderTopWidth": 100,
-          "height": 0,
-          "width": 0,
+          "scale": 0.3,
         },
-        Object {
-          "borderTopColor": "#FED12F",
-          "position": "absolute",
-          "right": 5,
-          "top": -80,
-          "transform": Array [
-            Object {
-              "rotate": "90deg",
-            },
-            Object {
-              "skewY": "60deg",
-            },
-            Object {
-              "scaleX": 4,
-            },
-            Object {
-              "scaleY": 8,
-            },
-          ],
-          "zIndex": -10,
-        },
-      ]
+      ],
     }
-  />
+  }
+>
   <View
     style={
       Object {
         "flex": 1,
-        "justifyContent": "center",
       }
     }
   >
-    <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#FFF",
-            "height": "78.78%",
-            "left": 20,
-            "position": "absolute",
-            "top": 60,
-            "width": "87.5%",
-            "zIndex": -5,
-          },
-          Object {
-            "elevation": 11,
-            "shadowColor": "#000",
-            "shadowOffset": Object {
-              "height": 5,
-              "width": 5,
-            },
-            "shadowOpacity": 0.8,
-            "shadowRadius": 6.68,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Array [
-            Object {
-              "backgroundColor": "transparent",
-              "borderRightColor": "transparent",
-              "borderRightWidth": 100,
-              "borderStyle": "solid",
-              "borderTopColor": "red",
-              "borderTopWidth": 100,
-              "height": 0,
-              "width": 0,
-            },
-            Object {
-              "borderRightWidth": 345,
-              "borderTopColor": "#FFF",
-              "borderTopWidth": 10,
-              "right": 2.5,
-              "top": -10,
-              "transform": Array [
-                Object {
-                  "rotate": "180deg",
-                },
-              ],
-            },
-          ]
-        }
-      />
-      <View
-        style={
-          Object {
-            "opacity": 0,
-            "transform": Array [
-              Object {
-                "scale": 0.3,
-              },
-            ],
-          }
-        }
-      >
-        <View>
-          <RegisterFormNew
-            onBack={[Function]}
-            onRegister={[Function]}
-          />
-        </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "backgroundColor": "transparent",
-              "borderRightColor": "transparent",
-              "borderRightWidth": 100,
-              "borderStyle": "solid",
-              "borderTopColor": "red",
-              "borderTopWidth": 100,
-              "height": 0,
-              "width": 0,
-            },
-            Object {
-              "borderRightWidth": 345,
-              "borderTopColor": "#FFF",
-              "borderTopWidth": 10,
-              "right": 0,
-              "top": 132,
-            },
-          ]
-        }
-      />
-    </View>
+    <RegisterFormNew
+      onBack={[Function]}
+      onRegister={[Function]}
+    />
   </View>
 </View>
 `;

e2e/actions/login.js

@@ -7,4 +7,5 @@ export default async function(username, password) {
   await element(by.id('usernameInput')).typeText(username);
   await element(by.id('userPasswordInput')).typeText(password);
   await element(by.id('loginButton')).tap();
+  await element(by.id('loginButton')).tap();
 }

e2e/register.spec.js

@@ -21,86 +21,103 @@ describe('Register Flow', () => {
 
   it('should register correctly', async () => {
 
-    console.log('registering', username);
+    try {
+      console.log('registering', username);
 
-    // login shoulf be visible
-    await waitFor(element(by.id('usernameInput')))
-      .toBeVisible()
-      .withTimeout(10000);
+      // login shoulf be visible
+      await waitFor(element(by.id('usernameInput')))
+        .toBeVisible()
+        .withTimeout(10000);
 
-    await element(by.id('registerButton')).tap();
+      await element(by.id('registerButton')).tap();
 
-    // email filed should be visible
-    await waitFor(element(by.id('registerEmailInput')))
-      .toBeVisible()
-      .withTimeout(2000);
+      // email filed should be visible
+      await waitFor(element(by.id('checkbox')))
+        .toBeVisible()
+        .withTimeout(10000);
 
-    // disable sync to prevent long waits for animations
-    await device.disableSynchronization();
+      // disable sync to prevent long waits for animations
+      await device.disableSynchronization();
 
-    // accept terms
-    await element(by.id('checkbox')).atIndex(0).tapAtPoint({x:30, y:30});
+      // fill the form
+      await element(by.id('registerUsernameInput')).typeText(username);
+      await element(by.id('registerEmailInput')).typeText('mye2e@minds.com');
+      await element(by.id('registerPasswordInput')).typeText(password);
+      await element(by.id('registerPasswordConfirmInput')).typeText(password);
 
-    // fill the form
-    await element(by.id('registerUsernameInput')).typeText(username);
-    await element(by.id('registerEmailInput')).typeText('mye2e@minds.com');
-    await element(by.id('registerPasswordInput')).typeText(password);
-    await element(by.id('registerPasswordConfirmInput')).typeText(password);
+      // accept terms
+      const checkbox = await element(by.id('checkbox')).atIndex(0);
+      await checkbox.tap();
+      await checkbox.tap();
 
-    // press register
-    const registerButton = await element(by.id('registerCreateButton'));
-    await registerButton.tap();
-    await registerButton.tap();
+      // press register
+      const registerButton = await element(by.id('registerCreateButton'));
+      await registerButton.tap();
+      //await registerButton.tap();
 
-    await device.enableSynchronization();
+      await device.enableSynchronization();
 
-    // is the onboarding visible?
-    await waitFor(element(by.id('artTestID')))
-      .toBeVisible()
-      .withTimeout(5000);
+      // is the onboarding visible? (in new onboarding this is welcome step)
+      await waitFor(element(by.id('artTestID')))
+        .toBeVisible()
+        .withTimeout(5000);
 
-    // select art hashtag
-    await element(by.id('artTestID')).tap();
+      // move from welcome to hashtag
+      await element(by.id('wizardNext')).tap();
 
-    // move to next step
-    await element(by.id('wizardNext')).tap();
+      // select art hashtag
+      await element(by.id('artTestID')).tap();
 
-    // wait for the suggested users list
-    await waitFor(element(by.id('suggestedUser0SubscriptionButton')))
-      .toBeVisible()
-      .withTimeout(10000);
+      // move to next step
+      await element(by.id('wizardNext')).tap();
 
-    // subscribe to the first user of the list
-    await element(by.id('suggestedUser0SubscriptionButton')).tap();
+      // wait for the channel setup
+      await waitFor(element(by.id('selectAvatar')))
+        .toBeVisible()
+        .withTimeout(10000);
 
-    // move to next step
-    await element(by.id('wizardNext')).tap();
+      await waitFor(element(by.id('RewardsOnboarding')))
+        .toBeVisible()
+        .withTimeout(10000);
 
-    // wait for the channel setup
-    await waitFor(element(by.id('selectAvatar')))
-      .toBeVisible()
-      .withTimeout(10000);
+      // tap the select avatar button
+      //await element(by.id('selectAvatar')).tap();
 
-    // tap the select avatar button
-    await element(by.id('selectAvatar')).tap();
+      //await sleep(3000);
 
-    await sleep(3000);
+      // move to next step
+      await element(by.id('wizardNext')).tap();
 
-    // move to next step
-    await element(by.id('wizardNext')).tap();
+      // wait for the suggested groups list
+      await waitFor(element(by.id('suggestedGroup0')))
+        .toBeVisible()
+        .withTimeout(10000);
 
-     // wait for the channel setup
-    await waitFor(element(by.id('RewardsOnboarding')))
-      .toBeVisible()
-      .withTimeout(10000);
+      // subscribe to the first user of the list
+      await element(by.id('suggestedGroup0')).tap();
 
-    // move to next step
-    await element(by.id('wizardNext')).tap();
+      // move to next step
+      await element(by.id('wizardNext')).tap();
 
-    // newsfeed should be visible
-    await waitFor(element(by.id('NewsfeedScreen')))
-      .toBeVisible()
-      .withTimeout(10000);
+      // wait for the suggested users list
+      await waitFor(element(by.id('suggestedUser0SubscriptionButton')))
+        .toBeVisible()
+        .withTimeout(10000);
+
+      // subscribe to the first user of the list
+      await element(by.id('suggestedUser0SubscriptionButton')).tap();
+
+      // move to next step
+      await element(by.id('wizardNext')).tap();
+
+      // newsfeed should be visible
+      await waitFor(element(by.id('NewsfeedScreen')))
+        .toBeVisible()
+        .withTimeout(10000);
+    } catch(err) {
+      await deleteUser(username, password);
+      throw(err);
+    }
   });
 
 });

locales/en.json

@@ -548,7 +548,8 @@
     "infoMobileNumber":"Mobile Phone Number",
     "infoLocation":"Location",
     "infoDateBirth":"Date of Birth",
-    "groupTitle":"Groups"
+    "groupTitle":"Groups",
+    "numberConfirmed":"Your number has beed validated"
   },
   "wallet": {
     "inviteFriend":"Invite a Friend",
@@ -781,5 +782,6 @@
   "actions":"Actions",
   "requests":"Requests",
   "notAllowed":"You are not allowed",
-  "undo":"Undo"
+  "undo":"Undo",
+  "validate":"VALIDATE"
 }

package.json

@@ -81,7 +81,6 @@
     "react-navigation-tabs": "^2.5.6",
     "rn-apk": "^0.2.9",
     "socket.io-client": "^2.3.0",
-    "styled-components": "^4.4.1",
     "tipsi-stripe": "8.0.0-beta.8",
     "web3": "^1.2.2"
   },

src/auth/LoginFormNew.js

@@ -15,7 +15,7 @@ import {
 import Icon from 'react-native-vector-icons/Ionicons';
 
 import authService from './AuthService';
-import { CommonStyle } from '../styles/Common';
+import { CommonStyle as CS } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 
 
@@ -28,8 +28,6 @@ import TextInput from '../common/components/TextInput';
 
 import Input from '../common/components/Input';
 
-import styled from 'styled-components';
-import { CommonStyled } from '../styles/CommonStyled';
 import Button from '../common/components/Button';
 
 /**
@@ -63,15 +61,17 @@ export default class LoginForm extends Component {
    */
   render() {
     const msg = this.state.msg ? (
-      <Animatable.Text animation="bounceInLeft" style={[CommonStyle.colorLight, { textAlign: 'center' }]} testID="loginMsg">{this.state.msg}</Animatable.Text>
+      <Animatable.Text animation="bounceInLeft" style={[CS.colorLight, { textAlign: 'center' }]} testID="loginMsg">{this.state.msg}</Animatable.Text>
     ) : null;
 
     return (
       <View 
-        style={[CommonStyle.flexContainer]}>
-        <ScrollView style={[CommonStyle.flexContainer]}>
+        style={[CS.flexContainer]}>
+        <ScrollView style={[CS.flexContainer]}>
           <View style={{flex:6}}>
-            <TitleText>{i18n.t('auth.login')}</TitleText>
+            <Text style={[CS.titleText, CS.colorPrimaryText]}>
+              {i18n.t('auth.login')}
+            </Text>
             {msg}
             <Input
               placeholder={i18n.t('auth.username')}
@@ -105,11 +105,11 @@ export default class LoginForm extends Component {
               loading={this.state.inProgress}
               loadingRight={true}
               disabled={this.state.inProgress}
-              disabledStyle={CommonStyle.backgroundTransparent}
+              disabledStyle={CS.backgroundTransparent}
               testID="loginButton">
               <Text style={ComponentsStyle.loginButtonTextNew}>{i18n.t('auth.login')}</Text>
             </Button>
-            <View style={CommonStyle.marginTop4x}>
+            <View style={CS.marginTop4x}>
               <Text style={[ComponentsStyle.linkNew]} onPress={this.onForgotPress}>{i18n.t('auth.forgot')}</Text>
             </View>
           </View>
@@ -218,8 +218,3 @@ export default class LoginForm extends Component {
     }
   }
 }
-
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']}
-`;

src/auth/LoginScreenNew.js

@@ -23,15 +23,12 @@ import * as Animatable from 'react-native-animatable';
 
 import LoginFormNew from './LoginFormNew';
 import VideoBackground from '../common/components/VideoBackground';
-import { CommonStyle } from '../styles/Common';
+import { CommonStyle as CS } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 import logService from '../common/services/log.service';
 import featuresService from '../common/services/features.service';
-import MindsLayout from '../common/components/MindsLayout';
 import i18nService from '../common/services/i18n.service';
 
-import styled from 'styled-components';
-import { CommonStyled } from '../styles/CommonStyled';
 
 const LOGO_HEIGHT = 100;
 const LOGO_HEIGHT_SMALL = 50;
@@ -80,7 +77,7 @@ export default class LoginScreen extends Component {
 
   getLoginBody = () => {
     return (
-      <View style={[CommonStyle.flexContainer, CommonStyle.paddingTop2x]}>
+      <View style={[CS.flexContainer, CS.paddingTop2x]}>
         <Image
           source={require('./../assets/logos/bulb.png')}
           style={styles.bulb}
@@ -95,11 +92,11 @@ export default class LoginScreen extends Component {
 
   getLoginFooter = () => {
     return (
-      <TouchableOpacity onPress={this.onPressRegister}>
-        <FooterContainer>
-          <SubTitle>{i18nService.t('auth.haveAccount')}</SubTitle>
-          <TitleText>{i18nService.t('auth.createChannel')}</TitleText>
-        </FooterContainer>
+      <TouchableOpacity onPress={this.onPressRegister} testID="registerButton">
+        <View style={CS.flexColumnCentered}>
+          <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18nService.t('auth.haveAccount')}</Text>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>{i18nService.t('auth.createChannel')}</Text>
+        </View>
       </TouchableOpacity>
     );
   };
@@ -110,16 +107,14 @@ export default class LoginScreen extends Component {
   render() {
     const resizeMode = 'center';
 
-    const body = this.getLoginBody();
-    const footer = this.getLoginFooter();
-
     return (
-      <View style={CommonStyle.flexContainer}>
-        <MindsLayout
-          body={body}
-          footer={footer}
-          footerBackground={'secondary_background'}
-        />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getLoginBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemeSecondary]}>
+          {this.getLoginFooter()}
+        </View>
       </View>
     );
   }
@@ -164,15 +159,3 @@ const styles = StyleSheet.create({
     marginTop: 10
   },
 });
-
-const FooterContainer = styled.View`${CommonStyled.flexColumnCentered}`;
-
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']}
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-`;

src/auth/RegisterFormNew.js

@@ -15,10 +15,8 @@ import {
 } from 'react-native';
 
 import authService from '../auth/AuthService';
-import { CommonStyle } from '../styles/Common';
+import { CommonStyle as CS} from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
-import { CommonStyled } from '../styles/CommonStyled';
-import styled from 'styled-components';
 
 import { observer, inject } from 'mobx-react/native';
 
@@ -29,9 +27,9 @@ import sessionService from '../common/services/session.service';
 import delay from '../common/helpers/delay';
 import apiService from '../common/services/api.service';
 import Input from '../common/components/Input';
-import MindsLayout from '../common/components/MindsLayout';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Button from '../common/components/Button';
+import { DISABLE_PASSWORD_INPUTS } from '../config/Config';
 
 /**
  * Register Form
@@ -77,14 +75,16 @@ export default class RegisterFormNew extends Component {
 
   getFormBody = () => {
     return (
-      <ScrollView style={[CommonStyle.flexContainer]}>
-        <View style={CommonStyle.marginBottom3x}>
+      <ScrollView style={[CS.flexContainer, CS.marginTop2x]}>
+        <View style={CS.marginBottom3x}>
           <TouchableOpacity onPress={this.props.onBack}>
-            <Icon size={34} name="keyboard-arrow-left" color='#777777'/>
+            <Icon size={34} name="keyboard-arrow-left" style={CS.colorSecondaryText} />
           </TouchableOpacity>
         </View>
-        <View style={CommonStyle.marginBottom3x}>
-          <TitleText>{i18n.t('auth.join')}</TitleText>
+        <View style={[CS.marginBottom3x, CS.centered]}>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>
+            {i18n.t('auth.join')}
+          </Text>
         </View>
         <View>
           <Text style={{color: '#F00', textAlign: 'center', paddingTop:4, paddingLeft:4}}>
@@ -96,27 +96,31 @@ export default class RegisterFormNew extends Component {
           onChangeText={this.setUsername}
           value={this.state.username}
           editable={!this.state.inProgress}
+          testID="registerUsernameInput"
         />
         <Input
           placeholder={i18n.t('auth.email')}
           onChangeText={this.setEmail}
           value={this.state.email}
           editable={!this.state.inProgress}
+          testID="registerEmailInput"
         />
         <Input
           placeholder={i18n.t('auth.password')}
-          secureTextEntry={true}
+          secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
           onChangeText={this.setPassword}
           value={this.state.password}
           editable={!this.state.inProgress}
+          testID="registerPasswordInput"
         />
         { this.state.password ?
           <Input
             placeholder={i18n.t('auth.confirmpassword')}
-            secureTextEntry={true}
+            secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
             onChangeText={this.setConfirmPassword}
             value={this.state.confirmPassword}
             editable={!this.state.inProgress}
+            testID="registerPasswordConfirmInput"
           /> : null }
         <CheckBox
           right
@@ -127,6 +131,7 @@ export default class RegisterFormNew extends Component {
           textStyle={ComponentsStyle.registerCheckboxTextNew}
           onPress={() => { this.setState({ termsAccepted: !this.state.termsAccepted }) }}
           disabled={this.state.inProgress}
+          testID="checkbox"
         />
       </ScrollView>
     );
@@ -134,7 +139,7 @@ export default class RegisterFormNew extends Component {
 
   getFormFooter = () => {
     return (
-      <View style={[styles.containerButton]}>
+      <View style={CS.flexContainer}>
         <Button
           onPress={() => this.onPressRegister()}
           borderRadius={2}
@@ -142,28 +147,34 @@ export default class RegisterFormNew extends Component {
           loading={this.state.inProgress}
           loadingRight={true}
           disabled={this.state.inProgress}
+          text={''}
+          testID="registerCreateButton"
         >
           <Text style={ComponentsStyle.loginButtonTextNew}>{i18n.t('auth.createChannel')}</Text>
         </Button>
-        <SubTitle>
+        <Text style={[CS.subTitleText, CS.colorSecondaryText, CS.centered, CS.marginTop2x]}>
           {i18n.to('auth.alreadyHaveAccount', null, {
             login: (
-              <Text style={[ComponentsStyle.linkNew, CommonStyle.fontL]} onPress={this.props.onBack}>
+              <Text style={[ComponentsStyle.linkNew, CS.fontL]} onPress={this.props.onBack}>
                 {i18n.t('auth.login')}
               </Text>
             ),
           })}
-        </SubTitle>
+        </Text>
       </View>
     );
   };
 
   render() {
     return (
-      <MindsLayout 
-        body={this.getFormBody()}
-        footer={this.getFormFooter()}
-      />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getFormBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFormFooter()}
+        </View>
+      </View>
     );
   }
 
@@ -211,34 +222,3 @@ export default class RegisterFormNew extends Component {
     this.setState({ inProgress: false });
   }
 }
-
-const styles = StyleSheet.create({
-  joinText: {
-    color: '#4A4A4A',
-    fontFamily: 'Roboto',
-    fontSize: 36,
-    fontWeight: 'bold',
-    lineHeight: 37,
-    textAlign: 'center',
-    paddingTop: 25,
-  },
-  containerButton: {
-    flex: 1,
-  },
-  button: {
-    alignSelf: 'stretch',
-  },
-});
-
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-  align-self: center;
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']};
-  align-self: center;
-  margin-top: 20px;
-`;

src/auth/RegisterScreenNew.js

@@ -22,10 +22,7 @@ import VideoBackground from '../common/components/VideoBackground';
 import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 import logService from '../common/services/log.service';
-import TriangleCornerYellow from '../common/components/shapes/TriangleCornerYellow';
 import RegisterFormNew from './RegisterFormNew';
-import TriangleCorner from '../common/components/shapes/TriangleCorner';
-import Rectangle from '../common/components/shapes/Rectangle';
 
 export default class RegisterScreenNew extends Component {
 

src/channel/subscription/SubscriptionButtonNew.js

@@ -11,7 +11,7 @@ import type UserModel from '../UserModel';
 
 import Button from '../../common/components/Button';
 import i18n from '../../common/services/i18n.service';
-import { CommonStyle } from '../../styles/Common';
+import { CommonStyle as CS } from '../../styles/Common';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ListItemButton from '../../common/components/ListItemButton';
@@ -64,27 +64,27 @@ class SubscriptionButtonNew extends Component<PropsType> {
     if (channel.isOpen()) {
       if (channel.subscribed) {
         name = 'check';
-        color = '#4C92A4'
+        color = CS.colorDone;
       } else {
         name = 'add';
-        color = '#A5A5A5'
+        color = CS.colorActionNew;
       }
     } else {
       if (channel.subscribed) {
         name = 'check';
-        color = '#4C92A4'
+        color = CS.colorDone;
       } else if (channel.pending_subscribe) {
         name = 'close';
-        color = '#E02020'
+        color = CS.colorActionNew;
       } else {
         name = 'add';
-        color = '#A5A5A5'
+        color = CS.colorActionNew;
       }
     }
 
     return (
-      <ListItemButton onPress={this.onPress}>
-        <Icon name={name} size={26} color={color} />
+      <ListItemButton onPress={this.onPress} {...this.props}>
+        <Icon name={name} size={26} style={color} />
       </ListItemButton>
     )
   }

src/common/components/Input.js

@@ -2,11 +2,12 @@ import React, { Component } from 'react';
 import {TextInput, Text, View, StyleSheet, TouchableOpacity, Modal, TouchableHighlight, Alert} from 'react-native';
 import { ComponentsStyle } from '../../styles/Components';
 import i18n from '../services/i18n.service';
-import { CommonStyle } from '../../styles/Common';
+import { CommonStyle as CS } from '../../styles/Common';
 import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
 import PhoneInput from 'react-native-phone-input';
 import DateTimePicker from 'react-native-modal-datetime-picker';
 import InfoPopup from './InfoPopup';
+import PhoneValidationComponent from './PhoneValidationComponent';
 
 export default class Input extends Component {
 
@@ -43,14 +44,9 @@ export default class Input extends Component {
   
   phoneInput = () => {
     return (
-      <PhoneInput
-        {...this.props}
+      <PhoneValidationComponent 
         style={[ComponentsStyle.loginInputNew, styles.shadow, this.props.style]}
         textStyle={{color: '#FFFFFF'}}
-        onChangePhoneNumber={this.props.onChangeText}
-        onEndEditing={this.props.onEndEditing}
-        ref="phoneInput"
-        placeholder=''
       />
     );
   }
@@ -68,7 +64,7 @@ export default class Input extends Component {
         placeholder=''
         onPress={this.showDatePicker}
       >
-        <Text>{this.props.value}</Text>
+        <Text style={CS.colorPrimaryText}>{this.props.value}</Text>
       </TouchableOpacity>
       <DateTimePicker
         isVisible={this.state.datePickerVisible}
@@ -100,8 +96,8 @@ export default class Input extends Component {
     const optional = (<Text style={[styles.optional]}>{"Optional"}</Text>);
 
     return (
-      <View style={[CommonStyle.flexContainer, CommonStyle.marginBottom2x]}>
-        <View style={[styles.row, CommonStyle.marginBottom]}>
+      <View style={[CS.flexContainer, CS.marginBottom2x]}>
+        <View style={[styles.row, CS.marginBottom]}>
           <View style={styles.row}>
             <Text style={[styles.label]}>{this.props.placeholder}</Text>
             {this.props.info && <InfoPopup info={this.props.info} />}

src/common/components/ListItemButton.js

 import React, {Component} from 'react';
 
 import {StyleSheet, TouchableOpacity} from 'react-native';
+import { CommonStyle as CS } from '../../styles/Common';
 
 export default class ListItemButton extends Component {
   render() {
     return (
         <TouchableOpacity
-          onPress={this.props.onPress}
+          {...this.props}
           borderRadius={2}
-          style={styles.container}>
+          style={[styles.container, CS.borderButton, CS.centered]}>
             {this.props.children}
         </TouchableOpacity>
     );
@@ -17,9 +18,7 @@ export default class ListItemButton extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'transparent',
     borderRadius: 4,
-    borderColor: '#404A4E',
     borderWidth: 1,
     padding:4,
   }

src/common/components/MindsLayout.js

-import React, {Component} from 'react';
-import {CommonStyle} from '../../styles/Common';
-import styled, {ThemeProvider} from 'styled-components';
-
-import {inject, observer} from 'mobx-react/native'
-
-@inject('theme')
-@observer
-export default class MindsLayout extends Component {
-  render() {
-    const bodyBackground = this.props.bodyBackground ? this.props.bodyBackground : null,
-      footerBackground = this.props.footerBackground ? this.props.footerBackground : null,
-      theme = this.props.theme.theme;
-    
-    return (
-      <ThemeProvider theme={theme}>
-        <Container>
-          <Body backgroundColor={bodyBackground}>
-            {this.props.body}
-          </Body>
-          <Footer backgroundColor={footerBackground}>
-            {this.props.footer}
-          </Footer>
-        </Container>
-      </ThemeProvider>
-    );
-  }
-}
-
-const Container = styled.View`
-  flex: 1;
-  justify-content: center;
-`;
-
-const Body = styled.View`
-  flex: 10;
-  flex-direction: row;
-	justify-content: center;
-  background-color: ${(props) => props.theme[props.backgroundColor] || props.theme['primary_background']};
-  padding: 20px 20px 10px 20px;
-`;
-
-const Footer = styled.View`
-  flex: 2;
-  flex-direction: row;
-  justify-content: center;
-  background-color: ${(props) => props.theme[props.backgroundColor] || props.theme['primary_background']};
-  padding: 20px 20px 10px 20px;
-`;

src/common/components/PhoneValidationComponent.js

+import React, {
+  Component
+} from 'react';
+
+import {
+  View,
+  Text,
+  TextInput,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+
+import {
+  inject,
+  observer
+} from 'mobx-react/native'
+
+import PhoneInput from 'react-native-phone-input'
+
+import TransparentButton from './TransparentButton';
+import NavNextButton from './NavNextButton';
+
+import Colors from '../../styles/Colors';
+import stylesheet from '../../onboarding/stylesheet';
+import { CommonStyle as CS } from '../../styles/Common';
+import i18n from '../services/i18n.service';
+import logService from '../services/log.service';
+import ListItemButton from './ListItemButton';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { ComponentsStyle } from '../../styles/Components';
+
+@inject('user', 'wallet')
+@observer
+export default class PhoneValidationComponent extends Component {
+  state = {
+    inProgress: false,
+    confirming: false,
+    confirmFailed: false,
+    smsAllowed: true,
+    phone: '+1',
+    secret: '',
+    code: '',
+    error: '',
+    wait: 60,
+    confirmed: false,
+  }
+
+  componentDidMount() {
+    // this.props.onSetNavNext(this.getNextButton());
+  }
+
+  //
+
+  async join(retry = false) {
+    if (this.state.inProgress || (!retry && !this.canJoin())) {
+      return;
+    }
+
+    this.setState({ inProgress: true, error: '',confirming: false, confirmFailed: false });
+
+    try {
+      let { secret } = await this.props.wallet.join(this.state.phone, retry);
+
+      this.setState({
+        secret,
+        confirming: true,
+        inProgress: false,
+      });
+
+    } catch (e) {
+      const error = (e && e.message) || 'Unknown server error';
+      this.setState({ error, inProgress: false });
+      console.error(e);
+    }
+  }
+
+  async confirm() {
+
+    if (this.state.inProgress || !this.canConfirm()) {
+      return;
+    }
+
+    this.setState({ inProgress: true, error: '' });
+
+    try {
+      await this.props.wallet.confirm(this.state.phone, this.state.code, this.state.secret);
+      this.props.user.setRewards(true);
+      this.setState({ inProgress: false, confirmed: true});
+    } catch (e) {
+      const error = (e && e.message) || 'Unknown server error';
+      this.setState({ error });
+      logService.exception(e);
+    } finally {
+      this.setState({ inProgress: false });
+    }
+  }
+
+  //
+
+  setPhone = phone => this.setState({ phone });
+
+  setCode = code => this.setState({ code });
+
+  canJoin() {
+    return this.refs.phoneInput && this.refs.phoneInput.isValidNumber()
+  }
+
+  joinAction = () => this.join();
+
+  rejoinAction = () => this.join(true);
+
+  canConfirm() {
+    return this.state.code.length > 0;
+  }
+
+  confirmAction = () => this.confirm();
+
+  //
+
+  getInputNumberPartial() {
+    let joinButtonContent = <Text style={[
+      CS.colorPrimaryText,
+      CS.padding,
+      !this.canJoin() ? CS.colorSecondaryText : CS.colorPrimaryText
+    ]}>{i18n.t('validate')}</Text>
+
+    if (this.state.inProgress) {
+      joinButtonContent = <ActivityIndicator size="small" color={Colors.primary} />;
+    }
+
+    return (
+      <View>
+        <View style={[CS.rowStretch]} testID="RewardsOnboarding">
+          <PhoneInput
+            disabled={this.state.inProgress}
+            style={[
+              stylesheet.col,
+              stylesheet.colFirst,
+              stylesheet.phoneInput,
+              ComponentsStyle.loginInputNew,
+              CS.marginRight2x,
+            ]}
+            textStyle={CS.colorPrimaryText}
+            value={this.state.phone}
+            onChangePhoneNumber={this.setPhone}
+            ref="phoneInput"
+            placeholder={i18n.t('onboarding.phoneNumber')}
+          />
+
+          <ListItemButton onPress={this.joinAction} disabled={!this.canJoin()}>
+            {joinButtonContent}
+          </ListItemButton>
+        </View>
+      </View>
+    );
+  }
+
+  getConfirmNumberPartial() {
+    let confirmButtonContent = 'CONFIRM';
+
+    if (this.state.inProgress) {
+      confirmButtonContent = <ActivityIndicator size="small" color={Colors.primary} />;
+    }
+
+    return (
+      <View>
+        <Text style={CS.colorPrimaryText}>
+          {i18n.t('onboarding.weJustSentCode', {phone: this.state.phone})}
+        </Text>
+        <View style={[style.cols, style.form]}>
+          <TextInput
+            style={[
+              stylesheet.col,
+              stylesheet.colFirst,
+              stylesheet.phoneInput,
+              ComponentsStyle.loginInputNew,
+              CS.marginRight2x,
+            ]}
+            value={this.state.code}
+            onChangeText={this.setCode}
+            placeholder={i18n.t('onboarding.confirmationCode')}
+            keyboardType="numeric"
+          />
+
+          <ListItemButton disabled={!this.canConfirm()} onPress={this.confirmAction}>
+            <Icon 
+              name={'check'} 
+              size={26} 
+              style={!this.canConfirm() ? CS.colorSecondaryText : CS.colorDone} 
+            />
+          </ListItemButton>
+        </View>
+      </View>
+    );
+  }
+
+  getNumberConfirmedPartial() {
+    return (
+      <Text style={CS.colorPrimaryText}>{i18n.t('onboarding.numberConfirmed')}</Text>
+    );
+  }
+
+  getFormPartial() {
+    if (!this.state.confirming)
+      return this.getInputNumberPartial();
+    else if (!this.state.confirmed)
+      return this.getConfirmNumberPartial();
+    else
+      return this.getNumberConfirmedPartial();
+  }
+
+  getNextButton = () => {
+    return (
+      <NavNextButton
+        onPress={this.props.onNext}
+        title="SKIP"
+        color={Colors.darkGreyed}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <View>
+        <View>
+          {this.getFormPartial()}
+        </View>
+        {!!this.state.error && <View>
+          <Text style={style.error}>{this.state.error}</Text>
+        </View>}
+      </View>
+    );
+  }
+}
+
+const style = StyleSheet.create(stylesheet);

src/common/stores/ThemeStore.js

-import {observable, action} from 'mobx';
-import {LIGHT_THEME, DARK_THEME} from '../../styles/Colors';
-
-export default class ThemeStore {
-  @observable theme = DARK_THEME;
-
-  @action
-  swithTheme() {
-    this.theme = this.theme.name === LIGHT_THEME.name ? DARK_THEME : LIGHT_THEME;
-  }
-}

src/discovery/DiscoveryUserNew.js

@@ -19,7 +19,7 @@ import {
   MINDS_CDN_URI
 } from '../config/Config';
 
-import { CommonStyle } from '../styles/Common';
+import { CommonStyle as CS } from '../styles/Common';
 import { FLAG_SUBSCRIBE, FLAG_VIEW } from '../common/Permissions';
 import SubscriptionButtonNew from '../channel/subscription/SubscriptionButtonNew';
 
@@ -92,9 +92,9 @@ class DiscoveryUser extends Component {
     return (
       <TouchableOpacity style={styles.row} onPress={this._navToChannel} {...otherProps}>
         <Image source={this.state.source} style={styles.avatar} />
-        <View style={[CommonStyle.flexContainerCenter]}>
-          <Text style={[styles.body, styles.title]}>{row.item.name}</Text>
-          <Text style={[styles.body, styles.subtitle]}>@{row.item.username}</Text>
+        <View style={[CS.flexContainerCenter]}>
+          <Text style={[styles.body, styles.title, CS.colorPrimaryText]}>{row.item.name}</Text>
+          <Text style={[styles.body, styles.subtitle, CS.colorSecondaryText]}>@{row.item.username}</Text>
         </View>
         {this.renderRightButton()}
       </TouchableOpacity>
@@ -118,19 +118,15 @@ const styles = {
     // flex: 1,
   },
   title: {
-    color: '#FFF',
     fontSize: 17,
     fontWeight: '500'
   },
   subtitle: {
-    color: '#AEB0B8',
     fontSize: 14,
   },
   avatar: {
     height: 58,
     width: 58,
     borderRadius: 29,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#EEE',
   }
 }

src/groups/GroupsListItemNew.js

@@ -36,7 +36,7 @@ class GroupsListItemNew extends Component {
       <ListItem
         containerStyle={styles.container}
         title={this.props.group.name}
-        titleStyle={styles.title}
+        titleStyle={[styles.title, CS.colorPrimaryText]}
         keyExtractor={item => item.rowKey}
         avatar={
           <FastImage
@@ -50,7 +50,7 @@ class GroupsListItemNew extends Component {
           />
         }
         subtitle={i18n.t('groups.listMembersCount', {count: abbrev(this.props.group['members:count'])})}
-        subtitleStyle={styles.subtitle}
+        subtitleStyle={[styles.subtitle, CS.colorSecondaryText]}
         hideChevron={!button}
         rightIcon={button}
       />
@@ -79,8 +79,8 @@ class GroupsListItemNew extends Component {
 
   getJoinButton = () => {
     return (
-      <ListItemButton onPress={this.join}>
-        <Icon name="add" size={26} color={'#A5A5A5'} />
+      <ListItemButton onPress={this.join} testID={`suggestedGroup${this.props.index}`}>
+        <Icon name="add" size={26} style={CS.colorActionNew} />
       </ListItemButton>
     );
   };
@@ -88,7 +88,7 @@ class GroupsListItemNew extends Component {
   getLeaveButton = () => {
     return (
       <ListItemButton onPress={this.leave}>
-        <Icon name="check" size={26} color={'#4C92A4'} />
+        <Icon name="check" size={26} style={CS.colorDone} />
       </ListItemButton>
     );
   }
@@ -115,12 +115,10 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent'
   },
   title: {
-    color: '#FFF',
     fontSize: 17,
     fontWeight: '500'
   },
   subtitle: {
-    color: '#AEB0B8',
     fontSize: 14,
   }
 });

src/onboarding/OnboardingButtons.js

@@ -12,7 +12,8 @@ export default class OnboardingButtons extends Component {
         <Button
           onPress={this.props.onNext}
           borderRadius={2}
-          containerStyle={ComponentsStyle.loginButtonNew}>
+          containerStyle={ComponentsStyle.loginButtonNew}
+          testID="wizardNext">
           <Text style={ComponentsStyle.loginButtonTextNew}>
             {i18n.t('continue')}
           </Text>

src/onboarding/OnboardingScreenNew.js

@@ -34,7 +34,7 @@ import ChannelSetupStepNew from './steps/ChannelSetupStepNew';
 import SuggestedGroupsStepNew from './steps/SuggestedGroupsStepNew';
 
 @observer
-@inject('onboarding', 'hashtag', 'theme')
+@inject('onboarding', 'hashtag')
 export default class OnboardingScreenNew extends Component {
 
   /**
@@ -68,7 +68,7 @@ export default class OnboardingScreenNew extends Component {
     if (!this.props.onboarding.progress) {
       return <CenteredLoading/>
     }
-    const completed_items = [];//this.props.onboarding.progress.completed_items;
+    const completed_items = this.props.onboarding.progress.completed_items;
 
     if (!completed_items.some(r => r == 'creator_frequency')) {
       steps.push({component: <WelcomeStepNew onNext={this.onNext} onFinish={this.onFinish}/>, ready: () => false});
@@ -78,7 +78,9 @@ export default class OnboardingScreenNew extends Component {
       steps.push({component: <HashtagsStepNew onNext={this.onNext} onBack={this.onBack}/>});
     }
 
-    steps.push({component: <ChannelSetupStepNew ref={r => this.channelSetup = r} onNext={this.onNext} onBack={this.onBack}/> });
+    if (!completed_items.some(r => r == 'tokens_verification')) {
+      steps.push({component: <ChannelSetupStepNew ref={r => this.channelSetup = r} onNext={this.onNext} onBack={this.onBack}/> });
+    }
     
     if (!completed_items.some(r => r == 'suggested_groups')) {
       steps.push({component: <SuggestedGroupsStepNew onNext={this.onNext} onBack={this.onBack}/>});
@@ -88,12 +90,8 @@ export default class OnboardingScreenNew extends Component {
       steps.push({component: <SuggestedChannelsStepNew onNext={this.onNext} onBack={this.onBack}/>});
     }
 
-    if (!completed_items.some(r => r == 'tokens_verification')) {
-      steps.push({component: <RewardsStep onJoin={() => this.wizard.next()}/>});
-    }
-
     return (
-      <SafeAreaView style={[CS.flexContainer, {backgroundColor: this.props.theme.theme.primary_background}]}>
+      <SafeAreaView style={[CS.flexContainer, CS.backgroundDarkThemePrimary]}>
         <KeyboardAvoidingView style={[CS.flexContainer]} behavior={ Platform.OS == 'ios' ? 'padding' : null }>
           <Wizard steps={steps} onFinish={this.onFinish} ref={this.handleWizarRef}></Wizard>
         </KeyboardAvoidingView>

src/onboarding/steps/ChannelSetupStepNew.js

@@ -9,9 +9,6 @@ import { ComponentsStyle } from '../../styles/Components';
 import { ScrollView } from 'react-native-gesture-handler';
 import Input from '../../common/components/Input';
 
-import MindsLayout from '../../common/components/MindsLayout';
-import styled from 'styled-components';
-import { CommonStyled } from '../../styles/CommonStyled';
 import OnboardingButtons from '../OnboardingButtons';
 import OnboardingBackButton from '../OnboardingBackButton';
 
@@ -122,16 +119,16 @@ export default class ChannelSetupStepNew extends Component {
         <OnboardingBackButton onBack={this.props.onBack} />
         <View style={[styles.textsContainer]}>
           <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
-          <TitleText>{i18n.t('onboarding.infoTitle')}</TitleText>
-          <Step>{i18n.t('onboarding.step',{step: 2, total: 4})}</Step>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>{i18n.t('onboarding.infoTitle')}</Text>
+          <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18n.t('onboarding.step',{step: 2, total: 4})}</Text>
         </View>
         <ScrollView style={styles.inputContainer}>
           <View style={[CS.padding4x, CS.flexContainer, CS.rowJustifyStart, CS.alignCenter, CS.marginBottom2x, CS.marginTop2x]}>
-            <Text style={[CS.fontXXL, {color: '#AEB0B8'}, CS.fontMedium]}>{i18n.t('onboarding.chooseAvatar')}</Text>
+            <Text style={[CS.fontXXL, CS.colorSecondaryText, CS.fontMedium]}>{i18n.t('onboarding.chooseAvatar')}</Text>
             <View style={[CS.rowJustifyEnd, CS.flexContainer]}>
               <TouchableCustom
                 onPress={this.changeAvatarAction}
-                style={[styles.avatar, CS.marginLeft3x, CS.border, {borderColor: '#404A4E'} ]}
+                style={[styles.avatar, CS.marginLeft3x, CS.border, CS.borderButton ]}
                 disabled={this.saving}
                 testID="selectAvatar"
               >
@@ -139,7 +136,7 @@ export default class ChannelSetupStepNew extends Component {
 
                 <View style={[styles.tapOverlayView, hasAvatar ? null : CS.backgroundTransparent]}/>
                 <View style={[styles.overlay, CS.centered]}>
-                  <Icon name="md-cloud-upload" size={40} color={hasAvatar ? '#FFF': '#404A4E'} />
+                  <Icon name="md-cloud-upload" size={40} style={hasAvatar ? CS.colorWhite: CS.colorButton} />
                 </View>
                 {(this.store.isUploading && this.store.avatarProgress) ? <View style={[styles.tapOverlayView, styles.progress]}>
                   <Progress.Pie progress={this.store.avatarProgress} size={36} />
@@ -154,7 +151,7 @@ export default class ChannelSetupStepNew extends Component {
             value={this.state.phoneNumber}
             editable={true}
             optional={true}
-            info={"Tu hermana"}
+            info={"Info"}
             inputType={'phoneInput'}
           />
           <Input
@@ -163,7 +160,7 @@ export default class ChannelSetupStepNew extends Component {
             value={this.state.location}
             editable={true}
             optional={true}
-            info={"Tu hermana"}
+            info={"No Info"}
           />
           <Input
             placeholder={i18n.t('onboarding.infoDateBirth')}
@@ -171,7 +168,7 @@ export default class ChannelSetupStepNew extends Component {
             value={this.state.birthDate}
             editable={true}
             optional={true}
-            info={"Tu hermana"}
+            info={"No Info"}
             inputType={'dateInput'}
           />
         </ScrollView>
@@ -185,33 +182,18 @@ export default class ChannelSetupStepNew extends Component {
 
   render() {
     return (
-      <View style={CS.flexContainer}>
-        <MindsLayout
-          body={this.getBody()}
-          footer={this.getFooter()}
-        />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFooter()}
+        </View>
       </View>
     );
   }
 }
 
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['primary_text']}
-  margin-bottom: 20px;
-  margin-top: 25;
-`;
-
-const Step = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-`;
-
 const styles = StyleSheet.create({
   containerButton: {
     flexDirection: 'row',

src/onboarding/steps/HashtagsStepNew.js

@@ -9,9 +9,6 @@ import i18n from '../../common/services/i18n.service';
 import { ComponentsStyle } from '../../styles/Components';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
-import MindsLayout from '../../common/components/MindsLayout';
-import styled from 'styled-components';
-import { CommonStyled } from '../../styles/CommonStyled';
 import OnboardingButtons from '../OnboardingButtons';
 import OnboardingBackButton from '../OnboardingBackButton';
 
@@ -32,15 +29,20 @@ export default class HashtagsStepNew extends Component {
         <OnboardingBackButton onBack={this.props.onBack} />
         <View style={styles.textsContainer}>
           <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
-          <TitleText>{i18n.t('onboarding.hashtagTitle')}</TitleText>
-          <Step>{i18n.t('onboarding.step',{step: 1, total: 4})}</Step>
-          <SubTitle>{i18n.t('onboarding.hashtagInterest')}</SubTitle>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>{i18n.t('onboarding.hashtagTitle')}</Text>
+          <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18n.t('onboarding.step',{step: 1, total: 4})}</Text>
+          <Text style={[
+            CS.subTitleText,
+            CS.colorSecondaryText,
+            CS.marginBottom4x,
+            CS.marginTop4x
+          ]}>{i18n.t('onboarding.hashtagInterest')}</Text>
         </View>
-        <View style={styles.hashtagContainer}>
+        <View>
           <TagSelect
             tagStyle={styles.hashtag}
-            tagSelectedStyle={{borderColor: '#5DBAC0'}}
-            textSelectedStyle={{color: '#5DBAC0'}}
+            tagSelectedStyle={styles.tagSelected}
+            textSelectedStyle={styles.textSelected}
             textStyle={styles.hashtagText}
             containerStyle={[CS.rowJustifyStart]}
             onTagDeleted={this.props.hashtag.deselect}
@@ -59,36 +61,19 @@ export default class HashtagsStepNew extends Component {
 
   render() {
     return (
-      <View style={CS.flexContainer}>
-        <MindsLayout
-          body={this.getBody()}
-          footer={this.getFooter()}
-        />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFooter()}
+        </View>
       </View>
     );
   }
 }
 
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['primary_text']}
-  margin-bottom: 20px;
-  margin-top: 25;
-`;
-
-const Step = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-`;
-
 const styles = StyleSheet.create({
-  hashtagContainer: {
-  },
   textsContainer: {
     alignItems: 'center',
   },
@@ -100,5 +85,11 @@ const styles = StyleSheet.create({
   hashtagText: {
     color: '#AEB0B8',
     fontSize: 17,
+  },
+  textSelected: {
+    color: '#5DBAC0'
+  },
+  tagSelected: {
+    borderColor: '#5DBAC0'
   }
 });
\ No newline at end of file

src/onboarding/steps/SuggestedChannelsStepNew.js

@@ -15,9 +15,6 @@ import { CommonStyle as CS } from '../../styles/Common';
 import DiscoveryUserNew from '../../discovery/DiscoveryUserNew';
 import i18n from '../../common/services/i18n.service';
 
-import MindsLayout from '../../common/components/MindsLayout';
-import styled from 'styled-components';
-import { CommonStyled } from '../../styles/CommonStyled';
 import OnboardingButtons from '../OnboardingButtons';
 import OnboardingBackButton from '../OnboardingBackButton';
 
@@ -59,9 +56,14 @@ export default class SuggestedChannelsStepNew extends Component {
         <OnboardingBackButton onBack={this.props.onBack} />
         <View style={styles.textsContainer}>
           <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
-          <TitleText>{i18n.t('onboarding.suggestedChannels')}</TitleText>
-          <Step>{i18n.t('onboarding.step',{step: 4, total: 4})}</Step>
-          <SubTitle>{i18n.t('onboarding.suggestedChannelsDescription')}</SubTitle>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>{i18n.t('onboarding.suggestedChannels')}</Text>
+          <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18n.t('onboarding.step',{step: 4, total: 4})}</Text>
+          <Text style={[
+            CS.subTitleText,
+            CS.colorPrimaryText,
+            CS.marginBottom4x,
+            CS.marginTop4x
+          ]}>{i18n.t('onboarding.suggestedChannelsDescription')}</Text>
         </View>
         <ScrollView style={styles.channelContainer}>
         {!discovery.listStore.loaded && <ActivityIndicator />}
@@ -80,33 +82,18 @@ export default class SuggestedChannelsStepNew extends Component {
    */
   render() {
     return (
-      <View style={CS.flexContainer}>
-        <MindsLayout
-          body={this.getBody()}
-          footer={this.getFooter()}
-        />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFooter()}
+        </View>
       </View>
     );
   }
 }
 
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['primary_text']}
-  margin-bottom: 20px;
-  margin-top: 25;
-`;
-
-const Step = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-`;
-
 const styles = StyleSheet.create({
   channelContainer: {
     width: '100%',

src/onboarding/steps/SuggestedGroupsStepNew.js

@@ -13,9 +13,6 @@ import { CommonStyle as CS } from '../../styles/Common';
 import GroupsListItemNew from '../../groups/GroupsListItemNew';
 import i18n from '../../common/services/i18n.service';
 
-import MindsLayout from '../../common/components/MindsLayout';
-import styled from 'styled-components';
-import { CommonStyled } from '../../styles/CommonStyled';
 import OnboardingButtons from '../OnboardingButtons';
 import OnboardingBackButton from '../OnboardingBackButton';
 
@@ -34,8 +31,8 @@ export default class SuggestedGroupsStepNew extends Component {
     this.props.discovery.filters.setPeriod('30d');
   }
 
-  renderGroup = (group) => {
-    return  <GroupsListItemNew key={group.guid} group={group}/>
+  renderGroup = (group, i) => {
+    return  <GroupsListItemNew key={group.guid} group={group} index={i} />
   }
 
   getBody = () => {
@@ -46,13 +43,18 @@ export default class SuggestedGroupsStepNew extends Component {
         <OnboardingBackButton onBack={this.props.onBack} />
         <View style={styles.textsContainer}>
           <Text style={[CS.onboardingTitle, CS.marginBottom2x]}>{i18n.t('onboarding.profileSetup')}</Text>
-          <TitleText>{i18n.t('onboarding.groupTitle')}</TitleText>
-          <Step>{i18n.t('onboarding.step',{step: 3, total: 4})}</Step>
-          <SubTitle>{i18n.t('onboarding.suggestedGroupsDescription')}</SubTitle>
+          <Text style={[CS.titleText, CS.colorPrimaryText]}>{i18n.t('onboarding.groupTitle')}</Text>
+          <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18n.t('onboarding.step',{step: 3, total: 4})}</Text>
+          <Text style={[
+            CS.subTitleText,
+            CS.colorPrimaryText,
+            CS.marginBottom4x,
+            CS.marginTop4x
+          ]}>{i18n.t('onboarding.suggestedGroupsDescription')}</Text>
         </View>
         <ScrollView style={styles.groupContainer}>
           {!discovery.listStore.loaded && <ActivityIndicator />}
-          {discovery.listStore.entities.slice().map(group => this.renderGroup(group))}
+          {discovery.listStore.entities.slice().map((group, i) => this.renderGroup(group, i))}
         </ScrollView>
       </View>
     );
@@ -64,33 +66,18 @@ export default class SuggestedGroupsStepNew extends Component {
 
   render() {
     return (
-      <View style={CS.flexContainer}>
-        <MindsLayout
-          body={this.getBody()}
-          footer={this.getFooter()}
-        />
+      <View style={[CS.flexContainerCenter]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFooter()}
+        </View>
       </View>
     );
   }
 }
 
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-`;
-
-const SubTitle = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['primary_text']}
-  margin-bottom: 20px;
-  margin-top: 25;
-`;
-
-const Step = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-`;
-
 const styles = StyleSheet.create({
   groupContainer: {
     width: '100%',

src/onboarding/steps/WelcomeStepNew.js

@@ -9,16 +9,8 @@ import {
 import { observer, inject } from 'mobx-react';
 
 import { CommonStyle as CS } from '../../styles/Common';
-import colors from '../../styles/Colors';
-import { ListItem } from 'react-native-elements';
-import logService from '../../common/services/log.service';
 import i18nService from '../../common/services/i18n.service';
 import { ComponentsStyle } from '../../styles/Components';
-
-import Icon from 'react-native-vector-icons/Ionicons';
-import MindsLayout from '../../common/components/MindsLayout';
-import styled from 'styled-components';
-import { CommonStyled } from '../../styles/CommonStyled';
 import Button from '../../common/components/Button';
 
 @inject('user')
@@ -32,11 +24,23 @@ export default class WelcomeStep extends Component {
           source={require('./../../assets/welcome.png')}
           style={[styles.welcome, CS.marginTop4x, CS.marginBottom3x]}
         />
-        <TitleText>@{this.props.user.me.name}</TitleText>
+        <Text style={[
+          CS.titleText,
+          CS.colorPrimaryText,
+          CS.marginBottom4x
+        ]}>@{this.props.user.me.name}</Text>
 
-        <Welcome>{i18nService.t('onboarding.welcomeNew')}</Welcome>
+        <Text style={[
+          CS.subTitleText,
+          CS.colorSecondaryText,
+          CS.marginBottom4x
+        ]}>{i18nService.t('onboarding.welcomeNew')}</Text>
 
-        <Privacy>{i18nService.t('onboarding.welcomePrivacy')}</Privacy>
+        <Text style={[
+          CS.subTitleText,
+          CS.colorSecondaryText,
+          CS.marginBottom4x
+        ]}>{i18nService.t('onboarding.welcomePrivacy')}</Text>
       </View>
     );
   };
@@ -48,10 +52,11 @@ export default class WelcomeStep extends Component {
           onPress={this.props.onNext}
           borderRadius={2}
           containerStyle={ComponentsStyle.loginButtonNew}
+          testID="wizardNext"
         >
           <Text style={ComponentsStyle.loginButtonTextNew}>{i18nService.t('onboarding.welcomeSetup')}</Text>
         </Button>
-         <Text style={[CS.linkNew, styles.later]} onPress={ this.props.onFinish }>{i18nService.t('onboarding.welcomeLater')}</Text>
+         <Text style={[CS.linkNew, CS.marginTop4x, CS.centered]} onPress={ this.props.onFinish }>{i18nService.t('onboarding.welcomeLater')}</Text>
       </View>
     )
   }
@@ -61,62 +66,19 @@ export default class WelcomeStep extends Component {
    */
   render() {
     return (
-      <View style={CS.flexContainer}>
-        <MindsLayout
-          body={this.getBody()}
-          footer={this.getFooter()}
-        />
+      <View style={[CS.flexContainerCenter]} testID="artTestID">
+        <View style={[CS.mindsLayoutBody, CS.backgroundDarkThemePrimary]}>
+          {this.getBody()}
+        </View>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundDarkThemePrimary]}>
+          {this.getFooter()}
+        </View>
       </View>
     );
   }
 }
 
-const TitleText = styled.Text`
-  ${CommonStyled.textTitle} 
-  color: ${(props) => props.theme['primary_text']};
-  margin-bottom: 20px;
-`;
-
-const Welcome = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['primary_text']}
-  margin-bottom: 20px;
-`;
-
-const Privacy = styled.Text`
-  ${CommonStyled.textSubTitle}
-  color: ${(props) => props.theme['secondary_text']}
-  margin-top: 20px;
-`;
-
 const styles = StyleSheet.create({
-  containerButton: {
-    flex: 1,
-    marginLeft: 10,
-    marginRight: 20,
-    marginBottom: 20,
-    justifyContent: 'flex-end',
-    width: '80%',
-  },
-  button: {
-    alignSelf: 'stretch',
-    backgroundColor: "#5DBAC0",
-    borderRadius: 2,
-  },
-  privacy: {
-    color: '#9B9B9B',
-    fontSize: 16,
-    lineHeight: 23,
-    fontWeight: '600',
-    marginLeft: 20,
-    marginRight: 20,
-    marginTop: 20,
-    marginBottom: 50,
-  },
-  later: {
-    alignSelf: 'center',
-    marginTop: 20
-  },
   welcome: {
     height: 36,
     width: 36,

src/styles/Colors.js

@@ -21,6 +21,8 @@ export const LIGHT_THEME = {
   secondary_text: '#AEB0B8',
   button_backgound: '#5DBAC0',
   button_border: '#404A4E',
+  done: '#4C92A4',
+  action: '#A5A5A5',
 };
 
 export const DARK_THEME = {
@@ -31,4 +33,6 @@ export const DARK_THEME = {
   secondary_text: '#AEB0B8',
   button_backgound: '#5DBAC0',
   button_border: '#404A4E',
+  done: '#4C92A4',
+  action: '#A5A5A5',
 };

src/styles/Common.js

 import { StyleSheet } from 'react-native';
 
-import colors from './Colors';
+import colors, {DARK_THEME} from './Colors';
 
 /**
  * Styles
@@ -59,6 +59,10 @@ export const CommonStyle = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start'
   },
+  rowStretch: {
+    alignItems: 'stretch',
+    flexDirection: 'row',
+  },
   // align
   alignCenter: {
     alignItems: 'center'
@@ -113,6 +117,21 @@ export const CommonStyle = StyleSheet.create({
   colorLightGreyed: {
     color: colors.lightGreyed
   },
+  colorPrimaryText: {
+    color: DARK_THEME.primary_text
+  },
+  colorSecondaryText: {
+    color: DARK_THEME.secondary_text
+  },
+  colorButton: {
+    color: DARK_THEME.button_border
+  },
+  colorDone: {
+    color: DARK_THEME.done
+  },
+  colorActionNew: {
+    color: DARK_THEME.action
+  },
   // backgrounds
   backgroundWhite: {
     backgroundColor: 'white'
@@ -153,6 +172,12 @@ export const CommonStyle = StyleSheet.create({
   backgroundTertiary: {
     backgroundColor: colors.tertiary
   },
+  backgroundDarkThemePrimary: {
+    backgroundColor: DARK_THEME.primary_background,
+  },
+  backgroundDarkThemeSecondary: {
+    backgroundColor: DARK_THEME.secondary_background,
+  },
   // borders
   borderWhite: {
     borderColor: 'white'
@@ -190,6 +215,9 @@ export const CommonStyle = StyleSheet.create({
   borderTransparent: {
     borderColor: 'transparent'
   },
+  borderButton: {
+    borderColor: DARK_THEME.button_border
+  },
   // margin
   margin4x: {
     margin: 20
@@ -237,6 +265,9 @@ export const CommonStyle = StyleSheet.create({
     marginLeft: 5
   },
   // margin bottom
+  marginBottom4x: {
+    marginBottom: 20
+  },
   marginBottom3x: {
     marginBottom: 15
   },
@@ -617,5 +648,33 @@ export const CommonStyle = StyleSheet.create({
     color: '#9B9B9B',
     fontSize: 13,
     lineHeight: 20
+  },
+  mindsLayoutBody: {
+    flex: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 10,
+  },
+  mindsLayoutFooter: {
+    flex: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 10,
+  },
+  titleText: {
+    fontFamily: 'Roboto',
+    fontSize: 28,
+    fontWeight: 'bold',
+    lineHeight: 44,
+  },
+  subTitleText: {
+    fontFamily: 'Roboto',
+    fontSize: 17,
+    fontWeight: '500',
+    lineHeight: 23,
   }
 });