primary blue changed with variable

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -23,6 +23,8 @@ export default EStyleSheet.create({
   dropdown: {
     marginTop: 5,
     marginLeft: -2,
+    paddingTop: 10,
+    paddingBottom: 10,
     minWidth: "$deviceWidth / 2",
     borderColor: "#e7e7e7",
     borderRadius: 5,
@@ -67,7 +69,7 @@ export default EStyleSheet.create({
   highlightedRow: {
     borderRadius: 20,
     height: 35,
-    backgroundColor: "#387BE5",
+    backgroundColor: "$primaryBlue",
     marginLeft: 5,
     width: "$deviceWidth / 3.2",
   },

src/components/dropdownButton/view/dropdownButtonView.js

@@ -54,10 +54,7 @@ const DropdownButtonView = ({
       <ModalDropdown
         style={styles.button}
         textStyle={styles.buttonText}
-        dropdownStyle={[
-          styles.dropdown,
-          // { height: DEVICE_HEIGHT / (19 / options.length + 1) },
-        ]}
+        dropdownStyle={[styles.dropdown, { height: 35 * (options.length + 1) }]}
         dropdownTextStyle={styles.dropdownText}
         dropdownTextHighlightStyle={styles.dropdownTextHighlight}
         options={options}

src/components/formInput/view/formInputView.js

@@ -81,7 +81,7 @@ class FormInputView extends Component {
         <TextInput
           onFocus={() =>
             this.setState({
-              inputBorderColor: "#357ce6",
+              inputBorderColor: "$primaryBlue",
             })
           }
           onSubmitEditing={() =>

src/components/mainButton/view/mainButtonStyles.js

@@ -7,7 +7,7 @@ export default EStyleSheet.create({
     minWidth: 56,
     height: 56,
     borderRadius: 30,
-    backgroundColor: "#357ce6",
+    backgroundColor: "$primaryBlue",
     flexDirection: "row",
     margin: 5,
     shadowOffset: {

src/index.js

@@ -6,42 +6,42 @@ import { StatusBar, Dimensions } from "react-native";
 import EStyleSheet from "react-native-extended-stylesheet";
 
 EStyleSheet.build({
-    // Primary Colors
-    $white: "#FFFFFF",
-    $black: "#000000",
-    $primaryBlue: "#357ce6",
-    $primaryGray: "#788187",
-    $primaryLightGray: "#f6f6f6",
-    $primaryRed: "#e63535",
+  // Primary Colors
+  $white: "#FFFFFF",
+  $black: "#000000",
+  $primaryBlue: "#357ce6",
+  $primaryGray: "#788187",
+  $primaryLightGray: "#f6f6f6",
+  $primaryRed: "#e63535",
 
-    // General Colors
-    $borderColor: "#ffff",
-    $bubblesBlue: "#5CCDFF",
-    $iconColor: "#c1c5c7",
-    $dangerColor: "#fff",
-    $warningColor: "#fff",
-    $successColor: "#fff",
-    $disableButton: "#fff",
-    $shadowColor: "#fff",
-    $disableGray: "#fff",
+  // General Colors
+  $borderColor: "#ffff",
+  $bubblesBlue: "#5CCDFF",
+  $iconColor: "#c1c5c7",
+  $dangerColor: "#fff",
+  $warningColor: "#fff",
+  $successColor: "#fff",
+  $disableButton: "#fff",
+  $shadowColor: "#fff",
+  $disableGray: "#fff",
 
-    // Devices Sizes
-    $deviceHeight: Dimensions.get("window").height,
-    $deviceWidth: Dimensions.get("window").width,
+  // Devices Sizes
+  $deviceHeight: Dimensions.get("window").height,
+  $deviceWidth: Dimensions.get("window").width,
 
-    // Fonts Properties
-    $primaryFont: "Roboto",
-    $primaryLatterSpacing: 0,
+  // Fonts Properties
+  $primaryFont: "Roboto",
+  $primaryLatterSpacing: 0,
 });
 
 registerScreens();
 
 Navigation.events().registerAppLaunchedListener(() => {
-    Navigation.setRoot({
-        root: {
-            component: {
-                name: "navigation.eSteem.Splash",
-            },
-        },
-    });
+  Navigation.setRoot({
+    root: {
+      component: {
+        name: "navigation.eSteem.Splash",
+      },
+    },
+  });
 });

src/screens/home/home.js

@@ -26,198 +26,198 @@ import FeedPage from "./feed";
 import TrendingPage from "./trending";
 
 export default class Home extends React.PureComponent {
-    static get options() {
-        return {
-            _statusBar: {
-                visible: true,
-                drawBehind: false,
-            },
-            topBar: {
-                animate: true,
-                hideOnScroll: true,
-                drawBehind: false,
-                noBorder: true,
-                elevation: 0,
-            },
-            layout: {
-                backgroundColor: "#f5fcff",
-            },
-            bottomTabs: {
-                visible: true,
-                drawBehind: true,
-            },
-        };
-    }
-    constructor(props) {
-        super(props);
-        Navigation.events().bindComponent(this); // <== Will be automatically unregistered when unmounted
-        this.state = {
-            user: {
-                name: "null",
-            },
-            isLoggedIn: false,
-            isLoading: true,
-            category: "HOT",
-            options: ["HOT", "TRENDING", "CLOSE"],
-        };
-    }
-
-    navigationButtonPressed({ buttonId }) {
-        if (buttonId === "search") {
-            Navigation.showOverlay({
-                component: {
-                    name: "navigation.eSteem.Search",
-                },
-                options: {
-                    overlay: {
-                        interceptTouchOutside: true,
-                    },
-                },
-            });
-        }
-    }
-
-    showActionSheet = () => {
-        this.ActionSheet.show();
+  static get options() {
+    return {
+      _statusBar: {
+        visible: true,
+        drawBehind: false,
+      },
+      topBar: {
+        animate: true,
+        hideOnScroll: true,
+        drawBehind: false,
+        noBorder: true,
+        elevation: 0,
+      },
+      layout: {
+        backgroundColor: "#f5fcff",
+      },
+      bottomTabs: {
+        visible: true,
+        drawBehind: true,
+      },
     };
+  }
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this); // <== Will be automatically unregistered when unmounted
+    this.state = {
+      user: {
+        name: "null",
+      },
+      isLoggedIn: false,
+      isLoading: true,
+      category: "HOT",
+      options: ["HOT", "TRENDING", "CLOSE"],
+    };
+  }
 
-    async componentDidMount() {
-        let user;
-        let userData;
-        let isLoggedIn;
-
-        await getAuthStatus().then(res => {
-            isLoggedIn = res;
-        });
-
-        if (isLoggedIn == true) {
-            await getUserData().then(res => {
-                user = Array.from(res);
-            });
-            userData = await getUser(user[0].username);
-
-            this.setState({
-                user: userData,
-                isLoggedIn: isLoggedIn,
-                isLoading: false,
-            });
-        } else {
-            await this.setState({
-                isLoading: false,
-            });
-        }
+  navigationButtonPressed({ buttonId }) {
+    if (buttonId === "search") {
+      Navigation.showOverlay({
+        component: {
+          name: "navigation.eSteem.Search",
+        },
+        options: {
+          overlay: {
+            interceptTouchOutside: true,
+          },
+        },
+      });
     }
+  }
 
-    render() {
-        return (
-            <View style={styles.root} key={"overlay"}>
-                <ScrollableTabView
-                    style={styles.tabView}
-                    renderTabBar={() => (
-                        <TabBar
-                            style={styles.tabbar}
-                            tabUnderlineDefaultWidth={80} // default containerWidth / (numberOfTabs * 4)
-                            tabUnderlineScaleX={2} // default 3
-                            activeColor={"#357ce6"}
-                            inactiveColor={"#222"}
-                            tabBarPosition="overlayTop"
-                        />
-                    )}
-                >
-                    <View tabLabel="Feed" style={styles.tabbarItem}>
-                        {this.state.isLoggedIn ? (
-                            <FeedPage
-                                user={this.state.user}
-                                isLoggedIn={this.state.isLoggedIn}
-                                componentId={this.props.componentId}
-                            />
-                        ) : (
-                            <Text>Login to see your Feed</Text>
-                        )}
-                    </View>
-                    <View tabLabel="Hot" style={styles.tabbarItem}>
-                        <HotPage
-                            user={this.state.user}
-                            isLoggedIn={this.state.isLoggedIn}
-                            componentId={this.props.componentId}
-                        />
-                    </View>
-                    <View tabLabel="Trending" style={styles.tabbarItem}>
-                        <TrendingPage
-                            user={this.state.user}
-                            isLoggedIn={this.state.isLoggedIn}
-                            componentId={this.props.componentId}
-                        />
-                    </View>
-                </ScrollableTabView>
-                <View style={styles.buttonContainer} />
-            </View>
-        );
+  showActionSheet = () => {
+    this.ActionSheet.show();
+  };
+
+  async componentDidMount() {
+    let user;
+    let userData;
+    let isLoggedIn;
+
+    await getAuthStatus().then(res => {
+      isLoggedIn = res;
+    });
+
+    if (isLoggedIn == true) {
+      await getUserData().then(res => {
+        user = Array.from(res);
+      });
+      userData = await getUser(user[0].username);
+
+      this.setState({
+        user: userData,
+        isLoggedIn: isLoggedIn,
+        isLoading: false,
+      });
+    } else {
+      await this.setState({
+        isLoading: false,
+      });
     }
+  }
+
+  render() {
+    return (
+      <View style={styles.root} key={"overlay"}>
+        <ScrollableTabView
+          style={styles.tabView}
+          renderTabBar={() => (
+            <TabBar
+              style={styles.tabbar}
+              tabUnderlineDefaultWidth={80} // default containerWidth / (numberOfTabs * 4)
+              tabUnderlineScaleX={2} // default 3
+              activeColor={"$primaryBlue"}
+              inactiveColor={"#222"}
+              tabBarPosition="overlayTop"
+            />
+          )}
+        >
+          <View tabLabel="Feed" style={styles.tabbarItem}>
+            {this.state.isLoggedIn ? (
+              <FeedPage
+                user={this.state.user}
+                isLoggedIn={this.state.isLoggedIn}
+                componentId={this.props.componentId}
+              />
+            ) : (
+              <Text>Login to see your Feed</Text>
+            )}
+          </View>
+          <View tabLabel="Hot" style={styles.tabbarItem}>
+            <HotPage
+              user={this.state.user}
+              isLoggedIn={this.state.isLoggedIn}
+              componentId={this.props.componentId}
+            />
+          </View>
+          <View tabLabel="Trending" style={styles.tabbarItem}>
+            <TrendingPage
+              user={this.state.user}
+              isLoggedIn={this.state.isLoggedIn}
+              componentId={this.props.componentId}
+            />
+          </View>
+        </ScrollableTabView>
+        <View style={styles.buttonContainer} />
+      </View>
+    );
+  }
 }
 
 const styles = {
-    root: {
-        justifyContent: "center",
-        alignItems: "center",
-        flex: 1,
-    },
-    buttonContainer: {
-        width: "50%",
-        alignItems: "center",
-    },
-    tabView: {
-        alignSelf: "center",
-        backgroundColor: "transparent",
-    },
-    tabbar: {
-        alignSelf: "center",
-        height: 40,
-        backgroundColor: "white",
-    },
-    tabbarItem: {
-        flex: 1,
-        paddingHorizontal: 7,
-        backgroundColor: "#f9f9f9",
-        minWidth: Dimensions.get("window").width,
-    },
-    container: {
-        backgroundColor: "#F9F9F9",
-        flex: 1,
-    },
-    tabs: {
-        flex: 1,
-    },
-    placeholder: {
-        backgroundColor: "white",
-        padding: 20,
-        borderStyle: "solid",
-        borderWidth: 1,
-        borderTopWidth: 1,
-        borderColor: "#e2e5e8",
-        borderRadius: 5,
-        marginRight: 0,
-        marginLeft: 0,
-        marginTop: 10,
-    },
-    header: {
-        backgroundColor: "#284b78",
-        borderBottomWidth: 0,
-        borderColor: "#284b78",
-    },
-    avatar: {
-        width: 30,
-        height: 30,
-        borderRadius: 15,
-        borderWidth: 1,
-        borderColor: "white",
-    },
-    searchButton: {
-        color: "white",
-        fontWeight: "bold",
-    },
-    loginButton: {
-        alignSelf: "center",
-        marginTop: 100,
-    },
+  root: {
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+  },
+  buttonContainer: {
+    width: "50%",
+    alignItems: "center",
+  },
+  tabView: {
+    alignSelf: "center",
+    backgroundColor: "transparent",
+  },
+  tabbar: {
+    alignSelf: "center",
+    height: 40,
+    backgroundColor: "white",
+  },
+  tabbarItem: {
+    flex: 1,
+    paddingHorizontal: 7,
+    backgroundColor: "#f9f9f9",
+    minWidth: Dimensions.get("window").width,
+  },
+  container: {
+    backgroundColor: "#F9F9F9",
+    flex: 1,
+  },
+  tabs: {
+    flex: 1,
+  },
+  placeholder: {
+    backgroundColor: "white",
+    padding: 20,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderTopWidth: 1,
+    borderColor: "#e2e5e8",
+    borderRadius: 5,
+    marginRight: 0,
+    marginLeft: 0,
+    marginTop: 10,
+  },
+  header: {
+    backgroundColor: "#284b78",
+    borderBottomWidth: 0,
+    borderColor: "#284b78",
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: "white",
+  },
+  searchButton: {
+    color: "white",
+    fontWeight: "bold",
+  },
+  loginButton: {
+    alignSelf: "center",
+    marginTop: 100,
+  },
 };

src/screens/login/screen/loginScreen.js

@@ -131,7 +131,7 @@ class LoginScreen extends Component {
                 style={styles.tabbar}
                 tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
                 tabUnderlineScaleX={2} // default 3
-                activeColor={"#357ce6"}
+                activeColor={"$primaryBlue"}
                 inactiveColor={"#222"}
               />
             )}

src/screens/notification/screen/notificationScreen.js

@@ -17,7 +17,7 @@ class NotificationScreen extends React.Component {
               style={styles.tabbar}
               tabUnderlineDefaultWidth={100}
               tabUnderlineScaleX={2}
-              activeColor={"#357ce6"}
+              activeColor={"$primaryBlue"}
               inactiveColor={"#222"}
             />
           )}

src/styles/pinCode.styles.js

@@ -1,32 +1,32 @@
 import EStyleSheet from "react-native-extended-stylesheet";
 
 export default EStyleSheet.create({
-    title: {
-        color: "#357ce6",
-        fontSize: 20,
-        fontWeight: "bold",
-        marginTop: 25,
-        alignSelf: "center",
-        marginBottom: 25,
-    },
-    logo: {
-        marginTop: "$deviceHeight / 8",
-    },
-    forgotButtonText: {
-        color: "#788187",
-        fontSize: 14,
-        marginTop: 25,
-        alignSelf: "center",
-        marginBottom: 25,
-    },
-    input: {
-        backgroundColor: "#f5f5f5",
-        borderColor: "#fff",
-        borderRadius: 5,
-        paddingLeft: 15,
-        minWidth: "$deviceWidth / 2",
-    },
-    icon: {
-        color: "#357ce6",
-    },
+  title: {
+    color: "$primaryBlue",
+    fontSize: 20,
+    fontWeight: "bold",
+    marginTop: 25,
+    alignSelf: "center",
+    marginBottom: 25,
+  },
+  logo: {
+    marginTop: "$deviceHeight / 8",
+  },
+  forgotButtonText: {
+    color: "#788187",
+    fontSize: 14,
+    marginTop: 25,
+    alignSelf: "center",
+    marginBottom: 25,
+  },
+  input: {
+    backgroundColor: "#f5f5f5",
+    borderColor: "#fff",
+    borderRadius: 5,
+    paddingLeft: 15,
+    minWidth: "$deviceWidth / 2",
+  },
+  icon: {
+    color: "$primaryBlue",
+  },
 });