change navigation color and refactor code

m4rc0z · May 15, 2018 · 9cc9a7a · 9cc9a7a
1 parent 8147384
commit 9cc9a7a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 38 deletions.
diff --git a/app/components/ratingComponent/ratingComponent.js b/app/components/ratingComponent/ratingComponent.js
@@ -6,7 +6,7 @@ class RatingComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            rating: this.props.ratingvalue
+            rating: this.props.ratingvalue,
         };
     }
 
@@ -23,7 +23,6 @@ class RatingComponent extends React.Component {
         this.ratingElement.setCurrentRating(nextState.rating);
     }
 
-
     render() {
         return (
             <View>

diff --git a/app/components/searchComponent/searchComponent.js b/app/components/searchComponent/searchComponent.js
@@ -44,10 +44,6 @@ class SearchComponent extends React.Component {
         this.props.setSelectedCountry(this.state.countries.find(country => country.regions.find(regionPar => regionPar == region)));
         this.props.setSelectedRegion(region);
         NavigationService.goBack();
-        // NavigationService.navigate('Home', {
-        //     country: this.state.countries.find(country => country.regions.find(regionPar => regionPar == region)),
-        //     region: region,
-        // });
     }
 
     render() {
@@ -92,13 +88,13 @@ const DismissKeyboard = ({children}) => (
 
 const styles = StyleSheet.create({
     searchBar: {
-        backgroundColor: 'blue',
+        backgroundColor: '#733626',
         borderTopWidth: 0,
         borderBottomWidth: 0,
         height: 40,
     },
     searchInput: {
-        backgroundColor: 'blue',
+        backgroundColor: '#733626',
         borderWidth: 0,
     }
 });
@@ -109,7 +105,7 @@ const SearchBarContainer = styled.View`
 const SearchResultContainer = styled.View`
   height: 100%;
   width: 100%;
-  background-color: white;
+  background-color: ${props => props.theme.colors.backgroundColor};
 `;
 const DummyRightElement = styled.View`
   height: 0;

diff --git a/app/index.js b/app/index.js
@@ -8,34 +8,46 @@ import SearchComponent from "./components/searchComponent/searchComponent";
 import NavigationService from "./services/navigation/NavigationService";
 import store from "./store";
 import {Provider} from "react-redux";
+import {ThemeProvider} from "styled-components";
 
 const TopLevelNavigator = createStackNavigator({
-    SplashScreen: { screen: Loader },
-    MainNavigator: { screen: MainPartComponent },
-    Search: { screen: createBottomTabNavigator({
-            SearchBar: { screen: SearchComponent },
-            Home: { screen: MainPartComponent },
-})},
+    SplashScreen: {screen: Loader},
+    MainNavigator: {screen: MainPartComponent},
+    Search: {
+        screen: createBottomTabNavigator({
+            SearchBar: {screen: SearchComponent},
+            Home: {screen: MainPartComponent},
+        })
+    },
 }, {
     headerMode: 'screen',
-    cardStyle: { backgroundColor: 'white'},
+    cardStyle: {backgroundColor: 'white'},
     navigationOptions: {
-        header: <HeaderComponent />
+        header: <HeaderComponent/>
     }
 });
 
 class App extends React.Component {
     render() {
         return (
-            <Provider store={store}>
-                <TopLevelNavigator
-                    ref={navigatorRef => {
-                        NavigationService.setTopLevelNavigator(navigatorRef)
-                    }}/>
-            </Provider>
+            <ThemeProvider theme={theme}>
+                <Provider store={store}>
+                    <TopLevelNavigator
+                        ref={navigatorRef => {
+                            NavigationService.setTopLevelNavigator(navigatorRef)
+                        }}/>
+                </Provider>
+            </ThemeProvider>
         )
     };
 }
 
+const theme = {
+    colors: {
+        navigationColor: '#733626',
+        backgroundColor: '#FFFFFF',
+        textColor: '#2B2C28',
+    }
+};
 
 export default App;
diff --git a/app/pages/header/header.js b/app/pages/header/header.js
@@ -19,7 +19,7 @@ class HeaderComponent extends React.Component {
 }
 
 const HeaderContainer = styled.View`
-  background: blue;
+  background: ${props => props.theme.colors.navigationColor};
   padding-top: 25px;
   height: 60px;
 `;

diff --git a/app/services/api/countryService.js b/app/services/api/countryService.js