Header style

components/Home/index.js

@@ -139,7 +139,9 @@ const styles = StyleSheet.create({
  paddingVertical: 0
  },
  tabBar: {
- backgroundColor: Colors.BLUE2,
+ backgroundColor: Colors.BLUE1,
+ borderTopColor: Colors.BLUE2,
+ borderTopWidth: 1,
  elevation: 0,
  height: 65,
  paddingTop: 2

components/List/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Image, RefreshControl, StyleSheet } from 'react-native'
 import { Content, Text, View } from 'native-base'
 import { connect } from 'react-redux'
+import { format } from 'date-fns'
 import Touchable from 'react-native-platform-touchable'
 
 import { Colors, Ranges } from '../../constants'
@@ -24,7 +25,9 @@ class List extends Component {
  refreshControl={<RefreshControl refreshing={this.props.loading} onRefresh={this.onRefresh} />}
  style={styles.list}
  >
- <Text style={globalStyles.header}>{this.props.header}</Text>
+ <View style={globalStyles.headerContainer}>
+ <Text style={globalStyles.headerContainer}>{this.props.header}</Text>
+ </View>
  {this.props.list.map((stock, index) => {
  const logo = cryptoLogos(stock.symbol)
 
@@ -96,7 +99,8 @@ const styles = StyleSheet.create({
  companyName: {
  color: Colors.TEXT_DARK,
  flex: 1,
- fontSize: 13
+ fontSize: 13,
+ paddingRight: 8
  },
  stockChange: {
  fontSize: 13

components/Search/index.js

@@ -32,7 +32,7 @@ class Search extends Component {
 
  render = () => (
  <View style={styles.container}>
- <Item searchBar style={styles.input}>
+ <Item searchBar style={styles.item}>
  <Icon name="md-search" style={styles.icon} />
  <Input
  autoCapitalize="characters"
@@ -41,10 +41,11 @@ class Search extends Component {
  keyboardAppearance="dark"
  onChangeText={symbol => this.onChangeText(symbol)}
  onSubmitEditing={this.onSubmitEditing}
- placeholder="Search by stock symbol"
+ placeholder="SEARCH BY STOCK SYMBOL"
  ref={ref => (this.input = ref)}
  returnKeyType="search"
  spellCheck={false}
+ style={[styles.input, { color: '#ffffff' }]}
  value={this.props.symbol}
  />
  </Item>
@@ -56,14 +57,18 @@ const styles = StyleSheet.create({
  container: {
  zIndex: 1
  },
- input: {
- backgroundColor: Colors.BLUE2,
+ item: {
  height: 50,
  paddingLeft: 20,
  marginLeft: 0
  },
  icon: {
  color: Colors.TEXT_NORMAL
+ },
+ input: {
+ color: Colors.TEXT_DARK,
+ fontSize: 12,
+ fontWeight: '400'
  }
 })
 

components/Sectors/index.js

@@ -19,7 +19,9 @@ class Sectors extends Component {
 
  return (
  <Content refreshControl={<RefreshControl refreshing={loading} onRefresh={this.onRefresh} />}>
- <Text style={globalStyles.header}>SECTORS PERFORMANCE</Text>
+ <View style={globalStyles.headerContainer}>
+ <Text style={globalStyles.headerContainer}>SECTORS PERFORMANCE</Text>
+ </View>
  <View style={styles.container}>
  {data.map((sector, index) => {
  const icon = sectorIcons(sector.name)

styles/index.js

@@ -2,11 +2,20 @@ import { StyleSheet } from 'react-native'
 import { Colors } from '../constants'
 
 export const globalStyles = StyleSheet.create({
- header: {
+ headerContainer: {
+ borderBottomColor: Colors.BLUE2,
+ borderBottomWidth: 1,
+ paddingHorizontal: 8,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
  color: Colors.TEXT_DARK,
- fontSize: 12,
- paddingHorizontal: 16,
- paddingVertical: 20,
+ fontSize: 13,
+ fontWeight: '400',
+ height: 50,
+ lineHeight: 50,
  textAlign: 'center'
+ },
+ headerText: {
+
  }
 })