From ea997ff4f06806e63f4dbae18a7c90a99d655593 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Mon, 11 Sep 2017 11:26:18 -0500
Subject: [PATCH] Thememing progress

---
 .../java/com/sn_react/MainApplication.java    |   2 -
 index.android.js                              |   3 +-
 index.ios.js                                  |   3 +-
 src/Styles.js                                 | 244 ++++++++++--------
 src/app.js                                    |  78 +++---
 src/components/SectionedAccessoryTableCell.js |   4 +-
 src/containers/NoteCell.js                    | 160 ++++++------
 src/containers/NoteList.js                    |  14 +-
 src/img/placeholder.png                       | Bin 0 -> 17706 bytes
 src/screens/Account.js                        |  14 +-
 src/screens/Compose.js                        | 110 ++++----
 src/screens/Filter.js                         |   5 +-
 src/screens/Notes.js                          |   8 +-
 13 files changed, 343 insertions(+), 302 deletions(-)
 create mode 100644 src/img/placeholder.png

diff --git a/android/app/src/main/java/com/sn_react/MainApplication.java b/android/app/src/main/java/com/sn_react/MainApplication.java
index 92d67b89..e28e0b77 100644
--- a/android/app/src/main/java/com/sn_react/MainApplication.java
+++ b/android/app/src/main/java/com/sn_react/MainApplication.java
@@ -3,7 +3,6 @@ package com.sn_react;
 import android.app.Application;
 
 //import com.facebook.react.ReactApplication;
-import com.reactnativenavigation.NavigationReactPackage;
 import com.oblador.keychain.KeychainPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.tectiv3.aes.RCTAesPackage;
@@ -31,7 +30,6 @@ public class MainApplication extends NavigationApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.asList(
             new MainReactPackage(),
-            new NavigationReactPackage(),
             new KeychainPackage(),
             new VectorIconsPackage(),
             new RCTAesPackage()
diff --git a/index.android.js b/index.android.js
index bc74c5f1..c81e3790 100644
--- a/index.android.js
+++ b/index.android.js
@@ -1 +1,2 @@
-import App from './src/app';
+import App from './src/App';
+App.get().start();
diff --git a/index.ios.js b/index.ios.js
index bc74c5f1..c81e3790 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -1 +1,2 @@
-import App from './src/app';
+import App from './src/App';
+App.get().start();
diff --git a/src/Styles.js b/src/Styles.js
index 67007c21..5dbb7e4a 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -1,6 +1,7 @@
 var _ = require('lodash')
 
-import { StyleSheet } from 'react-native';
+import { StyleSheet, StatusBar } from 'react-native';
+import App from "./App"
 
 export default class Styles {
 
@@ -15,123 +16,156 @@ export default class Styles {
   }
 
   static styles() {
-    return this.get()._styles.rules;
+    return this.get().styles.rules;
   }
 
   static constants() {
-    return this.get()._styles.constants;
+    return this.get().styles.constants;
   }
 
   constructor() {
-    this._styles = defaultStyles;
+    this.loadDefaults();
+  }
 
-    setTimeout(function () {
-      this.changeTheme();
-    }.bind(this), 1000);
+  loadDefaults() {
+    var constants = this.defaultConstants();
+    this.setStyles(this.defaultRules(constants), constants, "dark-content");
+  }
+
+  setStyles(rules, constants, statusBar) {
+    this.constants = constants;
+    this.styles = {
+      rules: StyleSheet.create(rules),
+      constants: constants
+    }
+
+    StatusBar.setBarStyle(statusBar, true);
   }
 
   changeTheme() {
     var theme = {
       constants: {
-        mainTintColor: "green"
-      }
+        mainTintColor: "#a366c3",
+        mainBackgroundColor: "#0f0f0f",
+        mainTextColor: "white",
+        plainCellBorderColor: "#1b1b1b",
+        selectedBackgroundColor: "#a366c3",
+        composeBorderColor: "#1b1b1b"
+      },
+
+      rules: {
+
+      },
+
+      statusBar: "light-content"
     }
 
-    this._styles = _.merge(defaultStyles, theme);
+    var constants = _.merge(this.defaultConstants(), theme.constants);
+    var rules = _.merge(this.defaultRules(constants), theme.rules);
+    this.setStyles(rules, constants, theme.statusBar);
+
+    console.log("New styles", this.styles);
+    App.get().reload();
   }
-}
-
-let mainTintColor = "#fb0206";
-let PaddingLeft = 14;
-
-const constants = {
-  themeColor: "#086DD6",
-  mainBackgroundColor: "white",
-  mainTintColor: mainTintColor,
-  plainCellBorderColor: "#efefef",
-  sectionedCellHorizontalPadding: PaddingLeft,
-  textColor: "black",
-}
-
-const defaultStyles = {
-  rules: StyleSheet.create({
-
-    container: {
-      backgroundColor: "white",
-      height: "100%",
-    },
-
-    tableSection: {
-      marginTop: 10,
-      marginBottom: 10,
-    },
-
-    sectionHeader: {
-      color: "gray",
-      fontSize: 12,
-      paddingLeft: PaddingLeft,
-      paddingBottom: 10,
-      paddingTop: 10
-    },
-
-    sectionedTableCell: {
-      borderBottomColor: "#ebebf0",
-      borderBottomWidth: 1,
-      paddingLeft: PaddingLeft,
-      paddingTop: 13,
-      backgroundColor: "white",
-      height: 45
-    },
-
-    sectionedTableCellTextInput: {
-      fontSize: 16,
-      height: "100%"
-    },
-
-    sectionedTableCellFirst: {
-      borderTopColor: "#ebebf0",
-      borderTopWidth: 1,
-    },
-
-    sectionedAccessoryTableCell: {
-      paddingLeft: PaddingLeft,
-      paddingRight: PaddingLeft,
-    },
-
-    sectionedAccessoryTableCellLabel: {
-      paddingTop: 12,
-      fontSize: 16,
-      color: constants.textColor
-    },
-
-    textInputCell: {
-      paddingTop: 0
-    },
-
-    buttonCell: {
-      paddingLeft: 0,
-      paddingTop: 0
-    },
-
-    buttonCellButton: {
-      textAlign: "center",
-      color: mainTintColor,
-      fontSize: 15,
-      height: "100%",
-      paddingTop: 13
-    },
-
-    buttonCellButtonLeft: {
-      textAlign: "left",
-      paddingLeft: PaddingLeft
-    },
-
-    bold: {
-      fontWeight: "bold"
-    },
-
-
-  }),
-
-  constants: constants
+
+
+  defaultConstants() {
+    return {
+        themeColor: "#086DD6",
+        mainBackgroundColor: "white",
+        mainTintColor: "#fb0206",
+        plainCellBorderColor: "#efefef",
+        sectionedCellHorizontalPadding: 14,
+        mainTextColor: "black",
+        selectedBackgroundColor: "#efefef",
+        paddingLeft: 14,
+        composeBorderColor: "#F5F5F5"
+      }
+  }
+
+  defaultRules(constants) {
+    return {
+      container: {
+        backgroundColor: constants.mainBackgroundColor,
+        height: "100%",
+      },
+
+      view: {
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      tableSection: {
+        marginTop: 10,
+        marginBottom: 10,
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      sectionHeader: {
+        color: "gray",
+        fontSize: 12,
+        paddingLeft: constants.paddingLeft,
+        paddingBottom: 10,
+        paddingTop: 10
+      },
+
+      sectionedTableCell: {
+        borderBottomColor: constants.plainCellBorderColor,
+        borderBottomWidth: 1,
+        paddingLeft: constants.paddingLeft,
+        paddingTop: 13,
+        backgroundColor: constants.mainBackgroundColor,
+        height: 45
+      },
+
+      sectionedTableCellTextInput: {
+        fontSize: 16,
+        height: "100%"
+      },
+
+      sectionedTableCellFirst: {
+        borderTopColor: constants.plainCellBorderColor,
+        borderTopWidth: 1,
+      },
+
+      sectionedAccessoryTableCell: {
+        paddingLeft: constants.paddingLeft,
+        paddingRight: constants.paddingLeft,
+        backgroundColor: constants.mainBackgroundColor
+      },
+
+      sectionedAccessoryTableCellLabel: {
+        paddingTop: 12,
+        fontSize: 16,
+        color: constants.mainTextColor
+      },
+
+      textInputCell: {
+        paddingTop: 0
+      },
+
+      buttonCell: {
+        paddingLeft: 0,
+        paddingTop: 0,
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      buttonCellButton: {
+        textAlign: "center",
+        color: constants.mainTintColor,
+        fontSize: 15,
+        height: "100%",
+        paddingTop: 13
+      },
+
+      buttonCellButtonLeft: {
+        textAlign: "left",
+        paddingLeft: constants.paddingLeft
+      },
+
+      bold: {
+        fontWeight: "bold"
+      },
+    }
+  }
+
 }
diff --git a/src/app.js b/src/app.js
index ddc50bce..d7f0a17e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,15 +8,12 @@ import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
-  StatusBar,
   Text,
   View,
   FlatList
 } from 'react-native';
 import {Platform} from 'react-native';
 
-StatusBar.setBarStyle('dark-content', true);
-
 import {Navigation} from 'react-native-navigation';
 import {registerScreens, registerScreenVisibilityListener} from './screens';
 
@@ -25,9 +22,6 @@ import Sync from './lib/sync'
 
 import GlobalStyles from "./Styles"
 
-registerScreens();
-registerScreenVisibilityListener();
-
 const tabs = [{
   label: 'Notes',
   screen: 'sn.Notes',
@@ -40,31 +34,53 @@ const tabs = [{
   }
 ];
 
-function startApp() {
-  Navigation.startTabBasedApp({
-    tabs,
-    animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
-
-    tabsStyle: {
-      tabBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor,
-      tabBarButtonColor: 'gray',
-      tabBarSelectedButtonColor: GlobalStyles.constants().mainTintColor,
-      statusBarColor: 'black',
-      tabFontFamily: 'BioRhyme-Bold',
-    },
-
-    appStyle: {
-      navBarButtonColor: GlobalStyles.constants().mainTintColor,
-      navBarTextColor: GlobalStyles.constants().mainTintColor,
-      navigationBarColor: 'black', // android built in bar
-      navBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor, // actual top nav bar
-      statusBarColor: '#002b4c',
-    },
-  });
+// android will fail to load if icon is not specified here
+if(Platform.OS === "android") {
+  tabs.forEach(function(tab){
+    tab.icon = require("./img/placeholder.png")
+  })
 }
 
-startApp();
+registerScreens();
+registerScreenVisibilityListener();
 
-setTimeout(function () {
-  // startApp();
-}, 1500);
+export default class App {
+
+  static instance = null;
+
+  static get() {
+    if (this.instance == null) {
+      this.instance = new App();
+    }
+
+    return this.instance;
+  }
+
+  start() {
+    Navigation.startTabBasedApp({
+      tabs,
+      animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
+
+      tabsStyle: {
+        tabBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor,
+        tabBarButtonColor: 'gray',
+        tabBarSelectedButtonColor: GlobalStyles.constants().mainTintColor,
+        statusBarColor: 'black',
+        tabFontFamily: 'BioRhyme-Bold',
+      },
+
+      appStyle: {
+        navBarButtonColor: GlobalStyles.constants().mainTintColor,
+        navBarTextColor: GlobalStyles.constants().mainTintColor,
+        navigationBarColor: 'black', // android built in bar
+        navBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor, // actual top nav bar
+        statusBarColor: '#002b4c',
+        screenBackgroundColor: GlobalStyles.constants().mainBackgroundColor
+      },
+    });
+  }
+
+  reload() {
+    this.start();
+  }
+}
diff --git a/src/components/SectionedAccessoryTableCell.js b/src/components/SectionedAccessoryTableCell.js
index 1af559c5..240eb1ac 100644
--- a/src/components/SectionedAccessoryTableCell.js
+++ b/src/components/SectionedAccessoryTableCell.js
@@ -9,7 +9,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 export default class SectionedAccessoryTableCell extends SectionedTableCell {
 
   rules() {
-    return super.rules().concat([GlobalStyles.styles().sectionedAccessoryTableCell]);
+    return super.rules().concat([GlobalStyles.styles().view, GlobalStyles.styles().sectionedAccessoryTableCell]);
   }
 
   onPress = () => {
@@ -26,7 +26,7 @@ export default class SectionedAccessoryTableCell extends SectionedTableCell {
   render() {
     var iconName = (this.props.selected && this.props.selected()) ? "ios-checkmark-circle" : null;
     return (
-      <TouchableHighlight onPress={this.onPress} onLongPress={this.onLongPress}>
+      <TouchableHighlight style={GlobalStyles.styles().view} onPress={this.onPress} onLongPress={this.onLongPress}>
         <View style={this.rules()}>
           <Text style={GlobalStyles.styles().sectionedAccessoryTableCellLabel}>{this.props.text}</Text>
           {iconName &&
diff --git a/src/containers/NoteCell.js b/src/containers/NoteCell.js
index db6ea3c1..6c913fe6 100644
--- a/src/containers/NoteCell.js
+++ b/src/containers/NoteCell.js
@@ -4,9 +4,81 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import GlobalStyles from "../Styles"
 
 export default class NoteCell extends React.PureComponent {
+
+
   constructor(props) {
     super(props);
     this.state = {selected: false};
+
+    let Padding = 14;
+
+    this.styles = StyleSheet.create({
+
+      noteCell: {
+        padding: Padding,
+        paddingRight: Padding * 2,
+        borderBottomColor: GlobalStyles.constants().plainCellBorderColor,
+        borderBottomWidth: 1,
+        backgroundColor: GlobalStyles.constants().mainBackgroundColor,
+      },
+
+      noteCellSelected: {
+        backgroundColor: GlobalStyles.constants().selectedBackgroundColor,
+      },
+
+      noteTags: {
+        flex: 1,
+        flexDirection: 'row',
+        marginBottom: 5,
+      },
+
+      pinnedView: {
+        flex: 1,
+        flexDirection: 'row',
+        marginBottom: 5,
+      },
+
+      pinnedText: {
+        color: GlobalStyles.constants().mainTintColor,
+        marginLeft: 8,
+        fontWeight: "bold",
+        fontSize: 12
+      },
+
+      noteTag: {
+        marginRight: 2,
+        fontSize: 12,
+        color: GlobalStyles.constants().mainTextColor,
+        opacity: 0.5,
+      },
+
+      noteTitle: {
+        fontWeight: "bold",
+        fontSize: 16,
+        color: GlobalStyles.constants().mainTextColor
+      },
+
+
+      noteText: {
+        fontSize: 15,
+        marginTop: 4,
+        color: GlobalStyles.constants().mainTextColor
+      },
+
+
+      noteDate: {
+        marginTop: 5,
+        fontSize: 12,
+        color: GlobalStyles.constants().mainTextColor,
+        opacity: 0.5
+      },
+
+      deleting: {
+        color: GlobalStyles.constants().mainTintColor,
+        marginBottom: 5,
+
+      }
+    });
   }
 
   _onPress = () => {
@@ -43,22 +115,22 @@ export default class NoteCell extends React.PureComponent {
     var note = this.props.item;
     return (
        <TouchableWithoutFeedback onPress={this._onPress} onPressIn={this._onPressIn} onPressOut={this._onPressOut}>
-        <View style={this.aggregateStyles(styles.noteCell, styles.noteCellSelected, this.state.selected)} onPress={this._onPress}>
+        <View style={this.aggregateStyles(this.styles.noteCell, this.styles.noteCellSelected, this.state.selected)} onPress={this._onPress}>
 
           {note.deleted &&
-            <Text style={styles.deleting}>Deleting...</Text>
+            <Text style={this.styles.deleting}>Deleting...</Text>
           }
 
           {note.pinned &&
-            <View style={styles.pinnedView}>
+            <View style={this.styles.pinnedView}>
               <Icon name={"ios-bookmark"} size={14} color={GlobalStyles.constants().mainTintColor} />
-              <Text style={styles.pinnedText}>Pinned</Text>
+              <Text style={this.styles.pinnedText}>Pinned</Text>
             </View>
           }
 
           {note.tags.length > 0 &&
-            <View style={styles.noteTags}>
-              <Text numberOfLines={1} style={this.aggregateStyles(styles.noteTag)}>
+            <View style={this.styles.noteTags}>
+              <Text numberOfLines={1} style={this.aggregateStyles(this.styles.noteTag)}>
               {note.tags.map(function(tag, i){
                 var text = "#" + tag.title;
                 if(i != note.tags.length - 1) {
@@ -71,87 +143,17 @@ export default class NoteCell extends React.PureComponent {
           }
 
           {note.safeTitle().length > 0 &&
-            <Text style={this.aggregateStyles(styles.noteTitle, styles.noteTitleSelected, this.state.selected)}>{note.title}</Text>
+            <Text style={this.aggregateStyles(this.styles.noteTitle, this.styles.noteTitleSelected, this.state.selected)}>{note.title}</Text>
           }
 
           {note.safeText().length > 0 &&
-            <Text numberOfLines={2} style={this.aggregateStyles(styles.noteText, styles.noteTextSelected, this.state.selected)}>{note.text}</Text>
+            <Text numberOfLines={2} style={this.aggregateStyles(this.styles.noteText, this.styles.noteTextSelected, this.state.selected)}>{note.text}</Text>
           }
 
-          <Text numberOfLines={1} style={this.aggregateStyles(styles.noteDate, styles.noteDateSelected, this.state.selected)}>{note.createdAt()}</Text>
+          <Text numberOfLines={1} style={this.aggregateStyles(this.styles.noteDate, this.styles.noteDateSelected, this.state.selected)}>{note.createdAt()}</Text>
 
         </View>
       </TouchableWithoutFeedback>
     )
   }
 }
-
-let Padding = 14;
-
-const styles = StyleSheet.create({
-
-
-  noteCell: {
-    padding: Padding,
-    paddingRight: Padding * 2,
-    borderBottomColor: GlobalStyles.constants().plainCellBorderColor,
-    borderBottomWidth: 1
-  },
-
-  noteCellSelected: {
-    backgroundColor: "#efefef",
-  },
-
-  noteTags: {
-    flex: 1,
-    flexDirection: 'row',
-    marginBottom: 5,
-  },
-
-  pinnedView: {
-    flex: 1,
-    flexDirection: 'row',
-    marginBottom: 5,
-  },
-
-  pinnedText: {
-    color: GlobalStyles.constants().mainTintColor,
-    marginLeft: 8,
-    fontWeight: "bold",
-    fontSize: 12
-  },
-
-  noteTag: {
-    marginRight: 2,
-    fontSize: 12,
-    color: "black",
-    opacity: 0.5,
-  },
-
-  noteTitle: {
-    fontWeight: "bold",
-    fontSize: 16,
-    color: "black"
-  },
-
-
-  noteText: {
-    fontSize: 15,
-    marginTop: 4,
-    color: "black"
-  },
-
-
-  noteDate: {
-    marginTop: 5,
-    fontSize: 12,
-    color: "black",
-    opacity: 0.5
-  },
-
-  deleting: {
-    color: GlobalStyles.constants().mainTintColor,
-    marginBottom: 5,
-
-  }
-});
diff --git a/src/containers/NoteList.js b/src/containers/NoteList.js
index 8bf505bc..ee4d01cc 100644
--- a/src/containers/NoteList.js
+++ b/src/containers/NoteList.js
@@ -8,7 +8,7 @@ export default class NoteList extends Component {
 
   renderHeader = () => {
     return (
-      <View style={{paddingLeft: 5, paddingRight: 5, paddingTop: 5}}>
+      <View style={{paddingLeft: 5, paddingRight: 5, paddingTop: 5, backgroundColor: GlobalStyles.constants().mainBackgroundColor}}>
         <Search
           onChangeText={this.props.onSearchChange}
           onCancel={this.props.onSearchCancel}
@@ -37,7 +37,7 @@ export default class NoteList extends Component {
 
   render() {
     return (
-      <View style={styles.tableContainer}>
+      <View style={{backgroundColor: GlobalStyles.constants().mainBackgroundColor}}>
         <FlatList style={{height: "100%"}}
           keyboardDismissMode={'interactive'}
           refreshControl={
@@ -55,13 +55,3 @@ export default class NoteList extends Component {
     )
   }
 }
-
-let Padding = 14;
-
-const styles = StyleSheet.create({
-
-  tableContainer: {
-    backgroundColor: 'white',
-  },
-
-});
diff --git a/src/img/placeholder.png b/src/img/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d71d68f2f07e4f7b681e5f4303f9d30d6f2ac42
GIT binary patch
literal 17706
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%0DsKNCC<(K$iJ*r^mEh>EE${|vgDv#
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

literal 0
HcmV?d00001

diff --git a/src/screens/Account.js b/src/screens/Account.js
index 0107e49a..f84de4a7 100644
--- a/src/screens/Account.js
+++ b/src/screens/Account.js
@@ -142,7 +142,7 @@ export default class Account extends Abstract {
     let signedIn = !Auth.getInstance().offline();
     return (
       <View style={GlobalStyles.styles().container}>
-        <ScrollView keyboardShouldPersistTaps={'always'}>
+        <ScrollView style={{backgroundColor: GlobalStyles.constants().mainBackgroundColor}} keyboardShouldPersistTaps={'always'}>
 
           {!signedIn &&
             <AuthSection params={this.state.params} title={"Account"} onSignInPress={this.onSignInPress} onRegisterPress={this.onRegisterPress} />
@@ -151,10 +151,11 @@ export default class Account extends Abstract {
           <OptionsSection signedIn={signedIn} title={"Options"} onSignOutPress={this.onSignOutPress} onExportPress={this.onExportPress} />
 
           <PasscodeSection
-          hasPasscode={this.state.hasPasscode}
-          onEnable={this.onPasscodeEnable}
-          onDisable={this.onPasscodeDisable}
-          title={"Local Passcode"} />
+            hasPasscode={this.state.hasPasscode}
+            onEnable={this.onPasscodeEnable}
+            onDisable={this.onPasscodeDisable}
+            title={"Local Passcode"}
+          />
 
         </ScrollView>
       </View>
@@ -200,6 +201,7 @@ class AuthSection extends Component {
             autoCorrect={false}
             autoCapitalize={'none'}
             keyboardType={'email-address'}
+            underlineColorAndroid={'transparent'}
           />
         </SectionedTableCell>
 
@@ -210,6 +212,7 @@ class AuthSection extends Component {
             onChangeText={(text) => this.setState({password: text})}
             value={this.state.password}
             secureTextEntry={true}
+            underlineColorAndroid={'transparent'}
           />
         </SectionedTableCell>
 
@@ -223,6 +226,7 @@ class AuthSection extends Component {
               autoCorrect={false}
               autoCapitalize={'none'}
               keyboardType={'url'}
+              underlineColorAndroid={'transparent'}
             />
           </SectionedTableCell>
         }
diff --git a/src/screens/Compose.js b/src/screens/Compose.js
index 6b392c0e..a9f23d1b 100644
--- a/src/screens/Compose.js
+++ b/src/screens/Compose.js
@@ -8,7 +8,6 @@ import Abstract from "./Abstract"
 import {
   AppRegistry,
   StyleSheet,
-  StatusBar,
   TextInput,
   View,
   FlatList,
@@ -38,6 +37,7 @@ export default class Compose extends Abstract {
     }
     this.state = {note: note, text: note.text};
     this.configureNavBar();
+    this.loadStyles();
 
     this.syncObserver = Sync.getInstance().registerSyncObserver(function(changesMade){
       if(changesMade) {
@@ -200,9 +200,9 @@ export default class Compose extends Abstract {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View style={[this.styles.container, GlobalStyles.styles().container]}>
         <TextInput
-          style={styles.noteTitle}
+          style={this.styles.noteTitle}
           onChangeText={this.onTitleChange}
           value={this.state.note.title}
           placeholder={"Add Title"}
@@ -210,10 +210,10 @@ export default class Compose extends Abstract {
           underlineColorAndroid={'transparent'}
         />
 
-        <KeyboardAvoidingView style={{flexGrow: 1}} keyboardVerticalOffset={rawStyles.noteTitle.height + rawStyles.noteText.paddingTop} behavior={'padding'}>
-          <ScrollView style={styles.textContainer} contentContainerStyle={styles.contentContainer} keyboardDismissMode={'interactive'}>
+        <KeyboardAvoidingView style={{flexGrow: 1}} keyboardVerticalOffset={this.rawStyles.noteTitle.height + this.rawStyles.noteText.paddingTop} behavior={'padding'}>
+          <ScrollView style={this.styles.textContainer} contentContainerStyle={this.styles.contentContainer} keyboardDismissMode={'interactive'}>
             <TextInput
-                style={styles.noteText}
+                style={this.styles.noteText}
                 onChangeText={this.onTextChange}
                 multiline = {true}
                 value={this.state.note.text}
@@ -229,53 +229,53 @@ export default class Compose extends Abstract {
       </View>
     );
   }
+
+  loadStyles() {
+    this.rawStyles = {
+      container: {
+        flex: 1,
+        flexDirection: 'column',
+        height: "100%",
+      },
+
+      noteTitle: {
+        fontWeight: "600",
+        fontSize: 16,
+        color: GlobalStyles.constants().mainTextColor,
+        height: 50,
+        borderBottomColor: GlobalStyles.constants().composeBorderColor,
+        borderBottomWidth: 1,
+        paddingTop: Platform.OS === "ios" ? 5 : 12,
+        paddingLeft: GlobalStyles.constants().paddingLeft,
+        paddingRight: GlobalStyles.constants().paddingLeft,
+      },
+
+      textContainer: {
+        flexGrow: 1,
+        flex: 1,
+      },
+
+      contentContainer: {
+        flexGrow: 1
+      },
+
+      noteText: {
+        height: "100%",
+        flexGrow: 1,
+        fontSize: 17,
+        marginTop: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        color: GlobalStyles.constants().mainTextColor,
+        paddingLeft: GlobalStyles.constants().paddingLeft,
+        paddingRight: GlobalStyles.constants().paddingLeft,
+        textAlignVertical: 'top',
+        paddingVertical: 0,
+        lineHeight: 22,
+      }
+    }
+
+    this.styles = StyleSheet.create(this.rawStyles);
+
+  }
 }
-
-let PaddingLeft = 14;
-
-const rawStyles = {
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    flexDirection: 'column',
-    height: "100%",
-  },
-
-  noteTitle: {
-    fontWeight: "600",
-    fontSize: 16,
-    color: "black",
-    height: 50,
-    borderBottomColor: "#F5F5F5",
-    borderBottomWidth: 1,
-    paddingTop: Platform.OS === "ios" ? 5 : 12,
-    paddingLeft: PaddingLeft,
-    paddingRight: PaddingLeft,
-  },
-
-  textContainer: {
-    flexGrow: 1,
-    flex: 1,
-  },
-
-  contentContainer: {
-    flexGrow: 1
-  },
-
-  noteText: {
-    height: "100%",
-    flexGrow: 1,
-    fontSize: 17,
-    marginTop: 0,
-    paddingTop: 10,
-    paddingBottom: 10,
-    color: "black",
-    paddingLeft: PaddingLeft,
-    paddingRight: PaddingLeft,
-    textAlignVertical: 'top',
-    paddingVertical: 0,
-    lineHeight: 22,
-  },
-}
-
-const styles = StyleSheet.create(rawStyles);
diff --git a/src/screens/Filter.js b/src/screens/Filter.js
index e855fcd3..ef6ef574 100644
--- a/src/screens/Filter.js
+++ b/src/screens/Filter.js
@@ -193,7 +193,7 @@ export default class Filter extends Abstract {
   render() {
     return (
       <View style={GlobalStyles.styles().container}>
-        <ScrollView>
+        <ScrollView style={GlobalStyles.styles().view}>
 
           {!this.note &&
             <SortSection sortBy={this.options.sortBy} onSortChange={this.onSortChange} title={"Sort By"} />
@@ -221,6 +221,7 @@ export default class Filter extends Abstract {
   }
 }
 
+
 class TagsSection extends Component {
   constructor(props) {
     super(props);
@@ -238,7 +239,7 @@ class TagsSection extends Component {
   render() {
     let root = this;
     return (
-      <TableSection>
+      <TableSection style={GlobalStyles.styles().view}>
         <SectionHeader title={this.props.title} />
         {this.props.tags.map(function(tag, i){
           return (
diff --git a/src/screens/Notes.js b/src/screens/Notes.js
index 05172cb9..177087cb 100644
--- a/src/screens/Notes.js
+++ b/src/screens/Notes.js
@@ -26,14 +26,9 @@ export default class Notes extends Abstract {
     this.loadTabbarIcons();
     this.initializeOptionsAndNotes();
     this.beginSyncTimer();
-
-    setTimeout(function () {
-      // this.forceUpdate();
-    }.bind(this), 1500);
   }
 
   componentWillUnmount() {
-    console.log("Notes component will unmount");
     Sync.getInstance().removeSyncObserver(this.syncObserver);
     Auth.getInstance().removeSignoutObserver(this.signoutObserver);
     clearInterval(this.syncTimer);
@@ -275,7 +270,7 @@ export default class Notes extends Abstract {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View style={styles.container, GlobalStyles.styles().container}>
         <View style={styles.decryptNoticeContainer}>
           <Text style={styles.decryptNotice}>Decrypting notes...</Text>
         </View>
@@ -298,7 +293,6 @@ const styles = StyleSheet.create({
 
   container: {
     flex: 1,
-    backgroundColor: 'white',
   },
 
   decryptNoticeContainer: {