Colored subtitles for warning text

src/components/HeaderTitleView.js

@@ -12,15 +12,19 @@ export default class HeaderTitleView extends Component {
   render() {
     let styles = this.getStyles();
 
+    let subtitleStyles = styles.get('headerSubtitle');
+    if(this.props.subtitleColor) {
+      subtitleStyles[0].color = this.props.subtitleColor;
+      subtitleStyles[0].opacity = 1.0;
+    }
+
     return (
       <View style={styles.get('headerContainer')}>
+
         <Text style={styles.get('headerTitle')}>{this.props.title}</Text>
+
         {this.props.subtitle &&
-          <Text
-            numberOfLines={1}
-            style={styles.get('headerSubtitle')}
-            adjustsFontSizeToFit={true}
-          >
+          <Text numberOfLines={1} style={subtitleStyles} adjustsFontSizeToFit={true}>
             {this.props.subtitle}
           </Text>
         }

src/screens/Abstract.js

@@ -22,7 +22,11 @@ export default class Abstract extends ThemedComponent {
     // this way, things like title and the Done button in the top left are visible during transition
     if(!templateOptions) { templateOptions = {}; }
     let options = {
-      headerTitle:<HeaderTitleView title={navigation.getParam("title") || templateOptions.title} subtitle={navigation.getParam("subtitle") || templateOptions.subtitle}/>,
+      headerTitle:<HeaderTitleView
+        title={navigation.getParam("title") || templateOptions.title} 
+        subtitle={navigation.getParam("subtitle") || templateOptions.subtitle}
+        subtitleColor={navigation.getParam("subtitleColor")}
+      />,
       headerStyle: {
         backgroundColor: StyleKit.variables.stylekitContrastBackgroundColor,
         borderBottomColor: StyleKit.variables.stylekitContrastBorderColor,
@@ -170,9 +174,10 @@ export default class Abstract extends ThemedComponent {
     this.props.navigation.setParams(options);
   }
 
-  setSubTitle(subtitle) {
+  setSubTitle(subtitle, color) {
     let options = {};
     options.subtitle = subtitle;
+    options.subtitleColor = color;
     this.props.navigation.setParams(options);
   }
 

src/screens/Compose.js

@@ -323,7 +323,7 @@ export default class Compose extends Abstract {
       this.statusTimeout = setTimeout(function(){
         this.saveError = true;
         this.syncTakingTooLong = false;
-        this.setSubTitle("Error syncing (changes saved offline)");
+        this.setSubTitle("Sync Unavailable (changes saved offline)", StyleKit.variables.stylekitWarningColor);
       }.bind(this), 200)
     }
   }

src/screens/Root.js

@@ -62,27 +62,27 @@ export default class Root extends Abstract {
         this.showingErrorStatus = true;
         setTimeout( () => {
           // need timeout for syncing on app launch
-          this.setStatusBarText(text);
+          this.setSubTitle(text, StyleKit.variables.stylekitWarningColor);
         }, 250);
       } else if(status.retrievedCount > 20) {
         var text = `Downloading ${status.retrievedCount} items. Keep app open.`
-        this.setStatusBarText(text);
+        this.setSubTitle(text);
         this.showingDownloadStatus = true;
       } else if(this.showingDownloadStatus) {
         this.showingDownloadStatus = false;
         var text = "Download Complete.";
-        this.setStatusBarText(text);
+        this.setSubTitle(text);
         setTimeout(() => {
-          this.setStatusBarText(null);
+          this.setSubTitle(null);
         }, 2000);
       } else if(this.showingErrorStatus) {
-        this.setStatusBarText(null);
+        this.setSubTitle(null);
       }
     })
 
     this.signoutObserver = Auth.get().addEventHandler((event) => {
       if(event == SFAuthManager.DidSignOutEvent) {
-        this.setStatusBarText(null);
+        this.setSubTitle(null);
         let notifyObservers = false;
         ApplicationState.getOptions().reset(notifyObservers);
         this.reloadOptionsToDefault();
@@ -156,10 +156,10 @@ export default class Root extends Abstract {
 
   initializeData() {
     let encryptionEnabled = KeysManager.get().isOfflineEncryptionEnabled();
-    this.setStatusBarText(encryptionEnabled ? "Decrypting items..." : "Loading items...");
+    this.setSubTitle(encryptionEnabled ? "Decrypting items..." : "Loading items...");
     let incrementalCallback = (current, total) => {
       let notesString = `${current}/${total} items...`
-      this.setStatusBarText(encryptionEnabled ? `Decrypting ${notesString}` : `Loading ${notesString}`);
+      this.setSubTitle(encryptionEnabled ? `Decrypting ${notesString}` : `Loading ${notesString}`);
       // Incremental Callback
       if(!this.dataLoaded) {
         this.dataLoaded = true;
@@ -168,11 +168,11 @@ export default class Root extends Abstract {
     }
 
     let loadLocalCompletion = (items) => {
-      this.setStatusBarText("Syncing...");
+      this.setSubTitle("Syncing...");
       this.dataLoaded = true;
       // perform initial sync
       Sync.get().sync().then(() => {
-        this.setStatusBarText(null);
+        this.setSubTitle(null);
       });
     }
 
@@ -217,10 +217,6 @@ export default class Root extends Abstract {
     });
   }
 
-  setStatusBarText(text) {
-    this.setSubTitle(text);
-  }
-
   onNoteSelect = (note) => {
     this.composer.setNote(note);
     this.setState({selectedTagId: this.notesRef.options.selectedTagIds.length && this.notesRef.options.selectedTagIds[0]});