fixed home screen for dark theme

src/components/basicUIElements/view/tag/tagStyles.js

@@ -2,14 +2,15 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   text: {
-    color: '$primaryBackgroundColor',
+    color: '$pureWhite',
     fontSize: 10,
+    fontWeight: 'bold',
   },
   isPin: {
     backgroundColor: '$primaryBlue',
   },
   isPostCardTag: {
-    backgroundColor: '$iconColor',
+    backgroundColor: '$tagColor',
   },
   textWrapper: {
     paddingHorizontal: 10,

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -15,7 +15,7 @@ export default EStyleSheet.create({
   // },
   dropdownIcon: {
     fontSize: 22,
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     marginLeft: -10,
   },
   dropdown: {
@@ -39,7 +39,7 @@ export default EStyleSheet.create({
   },
   dropdownText: {
     fontSize: 10,
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     padding: 5,
     borderColor: '#e7e7e7',
   },
@@ -53,7 +53,7 @@ export default EStyleSheet.create({
   buttonText: {
     fontSize: 10,
     alignSelf: 'center',
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     fontWeight: 'bold',
   },
   rowWrapper: {

src/components/filterBar/view/filterBarStyles.js

@@ -14,7 +14,7 @@ export default EStyleSheet.create({
     alignSelf: 'center',
   },
   rightIcon: {
-    color: '$iconColor',
+    color: '$primaryDarkText',
     textAlign: 'center',
   },
 });

src/components/formInput/view/formInputView.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import FastImage from 'react-native-fast-image';
+import { Icon } from '../../icon';
 
 // Constants
 
@@ -76,6 +76,7 @@ class FormInputView extends Component {
       leftIconName,
       rightIconName,
       secureTextEntry,
+      iconType,
     } = this.props;
     return (
       <View
@@ -98,7 +99,7 @@ class FormInputView extends Component {
             />
           </View>
         ) : (
-          <Ionicons name={rightIconName} style={styles.icon} />
+          <Icon iconType={iconType || 'MaterialIcons'} name={rightIconName} style={styles.icon} />
         )}
         <View style={styles.textInput}>
           <TextInput
@@ -115,7 +116,8 @@ class FormInputView extends Component {
         </View>
 
         {value && value.length > 0 ? (
-          <Ionicons
+          <Icon
+            iconType={iconType || 'MaterialIcons'}
             onPress={() => this.setState({ value: '' })}
             name={leftIconName}
             style={styles.icon}

src/components/header/container/headerContainer.js

@@ -41,7 +41,12 @@ class HeaderContainer extends PureComponent {
 
   render() {
     const {
-      isLoggedIn, currentAccount, selectedUser, isReverse, isLoginDone,
+      isLoggedIn,
+      currentAccount,
+      selectedUser,
+      isReverse,
+      isLoginDone,
+      isDarkTheme,
     } = this.props;
     let displayName;
     let username;
@@ -67,6 +72,7 @@ class HeaderContainer extends PureComponent {
         displayName={displayName}
         username={username}
         reputation={reputation}
+        isDarkTheme={isDarkTheme}
       />
     );
   }
@@ -75,6 +81,7 @@ class HeaderContainer extends PureComponent {
 const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
   isLoginDone: state.application.isLoginDone,
+  isDarkTheme: state.application.isDarkTheme,
 
   currentAccount: state.account.currentAccount,
 });

src/components/header/view/headerStyles.js

@@ -39,14 +39,14 @@ export default EStyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
   },
   noAuthTitle: {
     fontSize: 14,
     color: '$iconColor',
   },
   subTitle: {
-    color: '$primaryDarkGray',
+    color: '$primaryDarkText',
     fontSize: 12,
   },
   avatar: {

src/components/header/view/headerView.js

@@ -45,8 +45,10 @@ class HeaderView extends Component {
       isReverse,
       reputation,
       username,
+      isDarkTheme,
     } = this.props;
     const { isSearchModalOpen } = this.state;
+    const gredientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
 
     return (
       <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
@@ -63,8 +65,8 @@ class HeaderView extends Component {
         >
           <LinearGradient
             start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
+            end={{ x: 0.5, y: 0 }}
-            colors={['#2d5aa0', '#357ce6']}
+            colors={gredientColor}
             style={[
               styles.avatarButtonWrapper,
               isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,

src/components/icon/view/iconView.js

@@ -55,11 +55,7 @@ class IconView extends PureComponent {
       case 'MaterialIcons':
         return <MaterialIcons {...this.props}>{children}</MaterialIcons>;
       case 'MaterialCommunityIcons':
-        return (
+        return <MaterialCommunityIcons {...this.props}>{children}</MaterialCommunityIcons>;
-          <MaterialCommunityIcons name={_name} {...this.props}>
-            {children}
-          </MaterialCommunityIcons>
-        );
       default:
         return <Ionicons name={_name} {...this.props} />;
     }

src/components/loginHeader/view/loginHeaderStyles.js

@@ -33,9 +33,8 @@ export default EStyleSheet.create({
   mascot: {
     position: 'absolute',
     width: 160,
-
     height: 227,
-    marginTop: 10,
+    marginTop: 40,
     right: -20,
   },
   titleText: {

src/components/markdownEditor/view/formats/applyWebLinkFormat.js

@@ -19,7 +19,7 @@ export default ({
       newText = replaceBetween(text, selection, `${imagePrefix}[${itemText}](${selectedText})`);
       newSelection = {
         start: selection.start + 1,
-        end: selection.start + 1 + itemText.length,
+        end: selection.start + 1 + itemText && itemText.length,
       };
     } else {
       newText = replaceBetween(text, selection, `${imagePrefix}[${selectedText}](${itemUrl})`);
@@ -32,7 +32,7 @@ export default ({
     newText = replaceBetween(text, selection, `${imagePrefix}[${itemText}](${itemUrl})`);
     newSelection = {
       start: selection.start + 1,
-      end: selection.start + 1 + itemText.length,
+      end: selection.start + 1 + itemText && itemText.length,
     };
   }
   setState({ text: newText }, () => {

src/components/tabBar/view/tabBarView.js

@@ -25,8 +25,8 @@ class TabBar extends PureComponent {
     super(props);
 
     this.state = {
-      activeColor: !props.isDarkTheme ? '#357ce6' : '#357ce6',
+      activeColor: !props.isDarkTheme ? '#357ce6' : '#96c0ff',
-      inactiveColor: !props.isDarkTheme ? '#788187' : '#eaf2fc',
+      inactiveColor: !props.isDarkTheme ? '#788187' : '#526d91',
     };
   }
 
@@ -47,7 +47,7 @@ class TabBar extends PureComponent {
         onPress={() => onPressHandler(page)}
       >
         <View style={styles.tab}>
-          <Text style={[{ color: textColor, fontWeight }, styles.text ]}>{name}</Text>
+          <Text style={[{ color: textColor, fontWeight }, styles.text]}>{name}</Text>
         </View>
       </Button>
     );

src/screens/home/screen/homeStyles.js

@@ -23,7 +23,6 @@ export default EStyleSheet.create({
     shadowColor: '$shadowColor',
     shadowOffset: { height: 4 },
     zIndex: 99,
-    elevation: 4,
   },
   tabbarItem: {
     flex: 1,

src/screens/login/screen/loginScreen.js

@@ -24,7 +24,6 @@ import { MainButton } from '../../../components/mainButton';
 import { Modal } from '../../../components';
 import { TabBar } from '../../../components/tabBar';
 import { TextButton } from '../../../components/buttons';
-import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 import SteemConnect from '../../steem-connect/steemConnect';
 
 // Constants
@@ -32,6 +31,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
 
 // Styles
 import styles from './loginStyles';
+import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 
 class LoginScreen extends PureComponent {
   constructor(props) {
@@ -87,16 +87,20 @@ class LoginScreen extends PureComponent {
     Linking.openURL('https://signup.steemit.com/?ref=esteem').catch(err => alert('An error occurred', err));
   };
 
-
   _handleOnModalToggle = () => {
     const { isModalOpen } = this.state;
     this.setState({ isModalOpen: !isModalOpen });
-  }
+  };
 
   render() {
     const { navigation, intl, setPinCodeState } = this.props;
     const {
-      isLoading, username, isUsernameValid, keyboardIsOpen, password, isModalOpen,
+      isLoading,
+      username,
+      isUsernameValid,
+      keyboardIsOpen,
+      password,
+      isModalOpen,
     } = this.state;
 
     return (
@@ -141,8 +145,9 @@ class LoginScreen extends PureComponent {
               contentContainerStyle={{ flexGrow: 1 }}
             >
               <FormInput
-                rightIconName="md-at"
+                rightIconName="at"
-                leftIconName="md-close-circle"
+                leftIconName="close"
+                iconType="MaterialCommunityIcons"
                 isValid={isUsernameValid}
                 onChange={value => this._handleUsernameChange(value)}
                 placeholder={intl.formatMessage({
@@ -154,8 +159,8 @@ class LoginScreen extends PureComponent {
                 value={username}
               />
               <FormInput
-                rightIconName="md-lock"
+                rightIconName="lock"
-                leftIconName="md-close-circle"
+                leftIconName="close"
                 isValid={isUsernameValid}
                 onChange={value => this._handleOnPasswordChange(value)}
                 placeholder={intl.formatMessage({
@@ -217,7 +222,10 @@ class LoginScreen extends PureComponent {
           handleOnModalClose={this._handleOnModalToggle}
           title="Steemconnect Login"
         >
-          <SteemConnect handleOnModalClose={this._handleOnModalToggle} setPinCodeState={setPinCodeState} />
+          <SteemConnect
+            handleOnModalClose={this._handleOnModalToggle}
+            setPinCodeState={setPinCodeState}
+          />
         </Modal>
       </View>
     );

src/themes/darkTheme.js

@@ -16,17 +16,19 @@ export default {
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
   $primaryBlack: '#c1c5c7',
+  $primaryDarkText: '#526d91',
 
   // General Colors
   $borderColor: '#c5c5c5',
+  $tagColor: '#2e3d51',
   $bubblesBlue: '#5CCDFF',
   $borderTopColor: '#757575',
-  $iconColor: '#c1c5c7',
+  $iconColor: '#788187',
   $dangerColor: '#fff',
   $warningColor: '#fff',
   $successColor: '#fff',
   $disableButton: '#fff',
-  $shadowColor: '#b0b0b0',
+  $shadowColor: '#80000000',
   $disableGray: '#fff',
   $editorButtonColor: '#fff',
   $pureWhite: '#ffffff',

src/themes/lightTheme.js

@@ -16,9 +16,10 @@ export default {
   $primaryLightGray: '#f6f6f6',
   $primaryRed: '#e63535',
   $primaryBlack: '#3c4449',
-
+  $primaryDarkText: '#788187',
   // General Colors
   $borderColor: '#c5c5c5',
+  $tagColor: '#c1c5c7',
   $bubblesBlue: '#5CCDFF',
   $iconColor: '#c1c5c7',
   $borderTopColor: '#cfcfcf',