(chore): use themed styles in onboarding

src/navigation/NavigationStack.js

@@ -121,7 +121,7 @@ const AppStack = function(props) {
       <AppStackNav.Screen name="WalletOnboarding" component={WalletOnboardingScreen} />
       <AppStackNav.Screen name="NotSupported" component={NotSupportedScreen} />
       <AppStackNav.Screen name="OnboardingScreen" component={OnboardingScreen} />
-      <AppStackNav.Screen name="OnboardingScreenNew" component={OnboardingScreenNew} />
+      <AppStackNav.Screen name="OnboardingScreenNew" component={OnboardingScreenNew} options={hideHeader}/>
       <AppStackNav.Screen name="Messenger" component={MessengerScreen} />
     </AppStackNav.Navigator>
   );

src/onboarding/OnboardingScreenNew.js

@@ -26,13 +26,13 @@ import Wizard from '../common/components/Wizard';
 import SuggestedChannelsStepNew from './steps/SuggestedChannelsStepNew';
 import RewardsStep from './steps/RewardsStep';
 import WelcomeStepNew from './steps/WelcomeStepNew';
-import { CommonStyle as CS } from '../styles/Common';
 import navigationService from '../navigation/NavigationService';
 import i18nService from '../common/services/i18n.service';
 import CenteredLoading from '../common/components/CenteredLoading';
 import HashtagsStepNew from './steps/HashtagsStepNew';
 import ChannelSetupStepNew from './steps/ChannelSetupStepNew';
 import SuggestedGroupsStepNew from './steps/SuggestedGroupsStepNew';
+import ThemedStyles from '../styles/ThemedStyles';
 
 export default
 @inject('onboarding', 'hashtag', 'groupsBar', 'discovery')
@@ -107,6 +107,7 @@ class OnboardingScreenNew extends Component {
   onBack = () => this.wizard.previous();
 
   render() {
+    const CS = ThemedStyles.style;
     const steps = [];
     if (!this.props.onboarding.progress) {
       return <CenteredLoading/>

src/onboarding/steps/ChannelSetupStepNew.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import {View, Text, TouchableHighlight, StyleSheet, TouchableOpacity, Image} from 'react-native';
 import { observer, inject } from 'mobx-react';
 
-import { CommonStyle as CS } from '../../styles/Common';
 import i18n from '../../common/services/i18n.service';
 import { ComponentsStyle } from '../../styles/Components';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -19,6 +18,7 @@ import { UserError } from '../../common/UserError';
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import * as Progress from 'react-native-progress';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 const TouchableCustom = withPreventDoubleTap(TouchableOpacity);
 
@@ -114,6 +114,7 @@ export default class ChannelSetupStepNew extends Component {
   toggleFooter = () => this.setState({showFooter: !this.state.showFooter});
 
   getBody = () => {
+    const CS = ThemedStyles.style;
     const hasAvatar = this.props.user.hasAvatar() || this.state.preview_avatar;
     const avatar = this.getAvatar();
     return (
@@ -130,7 +131,7 @@ export default class ChannelSetupStepNew extends Component {
             <View style={[CS.rowJustifyEnd, CS.flexContainer]}>
               <TouchableCustom
                 onPress={this.changeAvatarAction}
-                style={[styles.avatar, CS.marginLeft3x, CS.border, CS.borderButton ]}
+                style={[styles.avatar, CS.marginLeft3x, CS.border, CS.buttonBorder ]}
                 disabled={this.saving}
                 testID="selectAvatar"
               >
@@ -190,6 +191,7 @@ export default class ChannelSetupStepNew extends Component {
   };
 
   render() {
+    const CS = ThemedStyles.style;
     return (
       <View style={[CS.flexContainerCenter]}>
         <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>

src/onboarding/steps/HashtagsStepNew.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import {View, Text, TouchableHighlight, StyleSheet} from 'react-native';
 import { observer, inject } from 'mobx-react';
 
-import { CommonStyle as CS } from '../../styles/Common';
 import TagSelect from '../../common/components/TagSelect';
 import i18n from '../../common/services/i18n.service';
 import { ComponentsStyle } from '../../styles/Components';
@@ -11,6 +10,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import OnboardingButtons from '../OnboardingButtons';
 import OnboardingBackButton from '../OnboardingBackButton';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 @inject('hashtag')
 @observer
@@ -24,6 +24,7 @@ export default class HashtagsStepNew extends Component {
   }
 
   getBody = () => {
+    const CS = ThemedStyles.style;
     return (
       <View style={[CS.flexContainer, CS.columnAlignCenter]}>
         <OnboardingBackButton onBack={this.props.onBack} />
@@ -58,6 +59,7 @@ export default class HashtagsStepNew extends Component {
   };
 
   render() {
+    const CS = ThemedStyles.style;
     return (
       <View style={[CS.flexContainerCenter]}>
         <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>

src/onboarding/steps/WelcomeStepNew.js

@@ -8,16 +8,17 @@ import {
 } from 'react-native';
 import { observer, inject } from 'mobx-react';
 
-import { CommonStyle as CS } from '../../styles/Common';
 import i18nService from '../../common/services/i18n.service';
 import { ComponentsStyle } from '../../styles/Components';
 import Button from '../../common/components/Button';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 @inject('user')
 @observer
 export default class WelcomeStep extends Component {
 
   getBody = () => {
+    const CS = ThemedStyles.style;
     return (
       <View style={[CS.flexContainer, CS.columnAlignCenter]}>
         <Image
@@ -39,13 +40,15 @@ export default class WelcomeStep extends Component {
         <Text style={[
           CS.subTitleText,
           CS.colorSecondaryText,
-          CS.marginBottom4x
+          CS.marginBottom4x,
+          CS.textJustify
         ]}>{i18nService.t('onboarding.welcomePrivacy')}</Text>
       </View>
     );
   };
 
   getFooter = () => {
+    const CS = ThemedStyles.style;
     return (
       <View style={CS.flexContainer}>
         <Button
@@ -65,6 +68,7 @@ export default class WelcomeStep extends Component {
    * Render
    */
   render() {
+    const CS = ThemedStyles.style;
     return (
       <View style={[CS.flexContainerCenter]} testID="artTestID">
         <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>

src/styles/ThemedStyles.js

@@ -27,6 +27,14 @@ for (let index = 0; index < repetitions; index++) {
   dynamicStyles[`paddingRight${post}`] = { paddingRight: value };
   dynamicStyles[`paddingBottom${post}`] = { paddingBottom: value };
   dynamicStyles[`paddingHorizontal${post}`] = { paddingHorizontal: value };
+
+  dynamicStyles[`border${post}`] = { borderWidth: index };
+  dynamicStyles[`borderLeft${post}`] = { borderLeftWidth: index };
+  dynamicStyles[`borderRight${post}`] = { borderRightWidth: index };
+  dynamicStyles[`borderTop${post}`] = { borderTopWidth: index };
+  dynamicStyles[`borderBottom${post}`] = { borderBottomWidth: index };
+  dynamicStyles[`borderRadius${post}`] = { borderRadius: index * 2 };
+
 }
 
 /**
@@ -145,6 +153,10 @@ class ThemedStylesStore {
         flex: 1,
         flexDirection: 'column',
       },
+      columnAlignCenter: {
+        alignItems: 'center',
+        flexDirection: 'column',
+      },
       flexColumnStretch: {
         flex: 1,
         flexDirection: 'column',
@@ -174,6 +186,9 @@ class ThemedStylesStore {
         flexDirection: 'row',
         justifyContent: 'flex-start'
       },
+      alignCenter: {
+        alignItems: 'center'
+      },
       centered: {
         alignContent: 'center',
         alignItems: 'center',
@@ -232,6 +247,9 @@ class ThemedStylesStore {
       backgroundSeparator: {
         backgroundColor: theme.separator,
       },
+      backgroundTransparent: {
+        backgroundColor: 'transparent'
+      },
 
       // fonts
       fontXS: {
@@ -399,6 +417,26 @@ class ThemedStylesStore {
         borderWidth: 0,
         marginTop: 15,
       },
+
+      // borders
+      borderHair: {
+        borderWidth: StyleSheet.hairlineWidth
+      },
+      borderLeftHair: {
+        borderLeftWidth: StyleSheet.hairlineWidth
+      },
+      borderRightHair: {
+        borderRightWidth: StyleSheet.hairlineWidth
+      },
+      borderTopHair: {
+        borderTopWidth: StyleSheet.hairlineWidth
+      },
+      borderBottomHair: {
+        borderBottomWidth: StyleSheet.hairlineWidth
+      },
+      buttonBorder: {
+        borderColor: theme.button_border
+      },
     });
   }
 }