(feat) rename style and fix initial theme

App.js

@@ -209,7 +209,7 @@ class App extends Component<Props, State> {
   async componentDidMount() {
     try {
       // load app setting before start
-      const results = await Promise.all([settingsStore.init(), Linking.getInitialURL(), ThemedStyles.init()]);
+      const results = await Promise.all([settingsStore.init(), Linking.getInitialURL()]);
 
       deepLinkUrl = results[1];
 

src/auth/ForgotScreen.js

@@ -27,7 +27,7 @@ export default class ForgotScreen extends Component {
     const CS = ThemedStyles.style;
 
     return (
-      <KeyboardAvoidingView style={[CS.flexContainer, CS.backgroundThemePrimary]} behavior={ Platform.OS == 'ios' ? 'padding' : null }>
+      <KeyboardAvoidingView style={[CS.flexContainer, CS.backgroundPrimary]} behavior={ Platform.OS == 'ios' ? 'padding' : null }>
         <View style={[CS.flexContainer, CS.padding2x]}>
           {code ? <ResetPassword
             onBack={this.onForgotBack}

src/auth/LoginScreen.js

@@ -83,7 +83,7 @@ export default class LoginScreen extends Component {
     const CS = ThemedStyles.style;
 
     return (
-      <KeyboardAvoidingView style={[CS.flexColumnStretch, CS.backgroundThemePrimary]} behavior={Platform.OS == 'ios' ? 'padding' : null} >
+      <KeyboardAvoidingView style={[CS.flexColumnStretch, CS.backgroundPrimary]} behavior={Platform.OS == 'ios' ? 'padding' : null} >
         <SafeAreaView style={[styles.flex10]}>
           <ScrollView style={CS.flexContainer}>
             <View style={[CS.paddingHorizontal4x, CS.flexColumnStretch]}>
@@ -99,7 +99,7 @@ export default class LoginScreen extends Component {
             </View>
           </ScrollView>
         </SafeAreaView>
-        <View style={[CS.paddingVertical2x, CS.backgroundThemeSecondary, CS.mindsLayoutFooter]}>
+        <View style={[CS.paddingVertical2x, CS.backgroundSecondary, CS.mindsLayoutFooter]}>
           <TouchableOpacity onPress={this.onPressRegister} testID="registerButton">
             <View style={CS.flexColumnCentered}>
               <Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18nService.t('auth.haveAccount')}</Text>

src/auth/RegisterForm.js

@@ -164,7 +164,7 @@ class RegisterForm extends Component {
   render() {
     const CS = ThemedStyles.style;
     return (
-      <View style={[CS.flexContainerCenter, CS.backgroundThemePrimary]}>
+      <View style={[CS.flexContainerCenter, CS.backgroundPrimary]}>
         {this.getFormBody()}
       </View>
     );

src/onboarding/OnboardingScreenNew.js

@@ -133,7 +133,7 @@ export default class OnboardingScreenNew extends Component {
     }
 
     return (
-      <SafeAreaView style={[CS.flexContainer, CS.backgroundThemePrimary]}>
+      <SafeAreaView style={[CS.flexContainer, CS.backgroundPrimary]}>
         <KeyboardAvoidingView style={[CS.flexContainer]} behavior={ Platform.OS == 'ios' ? 'padding' : null }>
           <Wizard steps={steps} onFinish={this.onFinish} ref={this.handleWizarRef}></Wizard>
         </KeyboardAvoidingView>

src/onboarding/steps/AllDoneStep.js

@@ -21,7 +21,7 @@ export default class AllDoneStep extends Component {
       <View
         style={[
           CS.flexContainerCenter,
-          CS.backgroundThemePrimary,
+          CS.backgroundPrimary,
           CS.centered,
         ]}>
         <Text style={[CS.onboardingTitle]}>{i18n.t('boosts.tabNewsfeed')}</Text>

src/onboarding/steps/ChannelSetupStepNew.js

@@ -45,7 +45,7 @@ export default class ChannelSetupStepNew extends Component {
 
   constructor(props) {
     super(props);
-    this.store = this.props.channel.store(sessionService.guid); 
+    this.store = this.props.channel.store(sessionService.guid);
   }
 
   changeAvatarAction = async () => {
@@ -84,7 +84,7 @@ export default class ChannelSetupStepNew extends Component {
     if (this.store.isUploading) throw new UserError('Avatar is uploading, please wait');
 
     const {phoneNumber, city, dob} = this.state;
-    
+
     const payload = {
       phoneNumber,
       city,
@@ -192,10 +192,10 @@ export default class ChannelSetupStepNew extends Component {
   render() {
     return (
       <View style={[CS.flexContainerCenter]}>
-        <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>
           {this.getBody()}
         </View>
-        { this.state.showFooter && <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        { this.state.showFooter && <View style={[CS.mindsLayoutFooter, CS.backgroundPrimary]}>
           {this.getFooter()}
         </View>}
       </View>

src/onboarding/steps/HashtagsStepNew.js

@@ -60,10 +60,10 @@ export default class HashtagsStepNew extends Component {
   render() {
     return (
       <View style={[CS.flexContainerCenter]}>
-        <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>
           {this.getBody()}
         </View>
-        <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundPrimary]}>
           {this.getFooter()}
         </View>
       </View>

src/onboarding/steps/SuggestedChannelsStepNew.js

@@ -34,7 +34,7 @@ export default class SuggestedChannelsStepNew extends Component {
    * Component did mount
    */
   componentDidMount() {
-    
+
   }
 
   /**
@@ -83,10 +83,10 @@ export default class SuggestedChannelsStepNew extends Component {
   render() {
     return (
       <View style={[CS.flexContainerCenter]}>
-        <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>
           {this.getBody()}
         </View>
-        <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundPrimary]}>
           {this.getFooter()}
         </View>
       </View>

src/onboarding/steps/SuggestedGroupsStepNew.js

@@ -25,7 +25,7 @@ export default class SuggestedGroupsStepNew extends Component {
 
     this.props.discovery.init();
   }
-  
+
   componentDidMount() {
     this.props.hashtag.setAll(false);
     this.props.discovery.filters.setType('groups');
@@ -68,10 +68,10 @@ export default class SuggestedGroupsStepNew extends Component {
   render() {
     return (
       <View style={[CS.flexContainerCenter]}>
-        <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>
           {this.getBody()}
         </View>
-        <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundPrimary]}>
           {this.getFooter()}
         </View>
       </View>

src/onboarding/steps/WelcomeStepNew.js

@@ -67,10 +67,10 @@ export default class WelcomeStep extends Component {
   render() {
     return (
       <View style={[CS.flexContainerCenter]} testID="artTestID">
-        <View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutBody, CS.backgroundPrimary]}>
           {this.getBody()}
         </View>
-        <View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
+        <View style={[CS.mindsLayoutFooter, CS.backgroundPrimary]}>
           {this.getFooter()}
         </View>
       </View>

src/settings/SettingsScreen.js

@@ -207,7 +207,7 @@ class SettingsScreen extends Component {
     }
 
     return (
-        <ScrollView style={[styles.scrollView, CS.backgroundThemePrimary]}>
+        <ScrollView style={[styles.scrollView, CS.backgroundPrimary]}>
           <ModalPicker
             onSelect={this.languageSelected}
             onCancel={this.cancel}

src/settings/SettingsStore.js

@@ -38,6 +38,7 @@ class SettingsStore {
 
     if (!data) {
       ThemedStyles.theme = 0;
+      ThemedStyles.init();
       return;
     }
     this.leftHanded = data[0][1];
@@ -51,6 +52,7 @@ class SettingsStore {
 
     // theme
     ThemedStyles.theme = data[5][1] || 0;
+    ThemedStyles.init();
 
     return this;
   }

src/styles/ThemedStyles.js

@@ -159,10 +159,10 @@ class ThemedStylesStore {
       backgroundBlack: {
         backgroundColor: 'black'
       },
-      backgroundThemePrimary: {
+      backgroundPrimary: {
         backgroundColor: theme.primary_background,
       },
-      backgroundThemeSecondary: {
+      backgroundSecondary: {
         backgroundColor: theme.secondary_background,
       },
       // fonts