Merge pull request #117 from esteemapp/alpha/enhancment-bugfix

Enhancment Bugfix - PART 1

src/components/basicUIElements/index.js

@@ -1,19 +1,19 @@
 // import Card from './view/cardView';
-import Chip from './view/chipView';
-import GrayWrapper from './view/grayWrapperView';
-import LineBreak from './view/lineBreakView';
-import NoPost from './view/noPostView';
-import PostCardPlaceHolder from './view/postCardPlaceHolderView';
-import PostPlaceHolder from './view/postPlaceHolderView';
-import ProfileSummaryPlaceHolder from './view/profileSummaryPlaceHolder';
-import WalletDetailsPlaceHolder from './view/walletDetailsPlaceHolder';
-import WalletUnclaimedPlaceHolder from './view/walletUnclaimedPlaceHolder';
-import Tag from './view/tagView';
-import TextWithIcon from './view/textWithIconView';
-import WalletLineItem from './view/walletLineItemView';
-import StickyBar from './view/stickyBarView';
-import Card from './view/cardView';
-import UserListItem from './view/userListItem';
+import Chip from './view/chip/chipView';
+import GrayWrapper from './view/grayWrapper/grayWrapperView';
+import LineBreak from './view/lineBreak/lineBreakView';
+import NoPost from './view/noPost/noPostView';
+import PostCardPlaceHolder from './view/placeHolder/postCardPlaceHolderView';
+import PostPlaceHolder from './view/placeHolder/postPlaceHolderView';
+import ProfileSummaryPlaceHolder from './view/placeHolder/profileSummaryPlaceHolder';
+import WalletDetailsPlaceHolder from './view/placeHolder/walletDetailsPlaceHolder';
+import WalletUnclaimedPlaceHolder from './view/placeHolder/walletUnclaimedPlaceHolder';
+import Tag from './view/tag/tagView';
+import TextWithIcon from './view/textWithIcon/textWithIconView';
+import WalletLineItem from './view/walletLineItem/walletLineItemView';
+import StickyBar from './view/stickyBar/stickyBarView';
+import Card from './view/card/cardView';
+import UserListItem from './view/userListItem/userListItem';
 
 export {
   Card,

src/components/basicUIElements/view/chip/chipView.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { TextInput } from 'react-native';
+import { TextInput } from '../../../textInput';
+
 import styles from './chipStyle';
 
 const Chip = props => (

src/components/basicUIElements/view/noPost/noPostView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, Image } from 'react-native';
-import NO_POST from '../../../assets/no_post.png';
+import NO_POST from '../../../../assets/no_post.png';
 import styles from './noPostStyles';
 
 const NoPost = ({

src/components/basicUIElements/view/textWithIcon/textWithIconView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableHighlight, Text } from 'react-native';
-import { Icon } from '../../icon';
+import { Icon } from '../../../icon';
 import styles from './textWithIconStyles';
 
 const TextWithIcon = ({

src/components/basicUIElements/view/walletLineItem/walletLineItemView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 
-import IconComp from '../../icon';
+import IconComp from '../../../icon';
 
 import styles from './walletLineItemStyles';
 

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { TextInput, View } from 'react-native';
+import { View } from 'react-native';
 // Constants
 
 // Components
+import { TextInput } from '../../../textInput';
 
 // Styles
 import styles from './titleAreaStyles';

src/components/formInput/view/formInputView.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import { View, TextInput } from 'react-native';
+import { View } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import FastImage from 'react-native-fast-image';
 
 // Constants
 
 // Components
-
+import { TextInput } from '../../textInput';
 // Styles
 import styles from './formInputStyles';
 

src/components/index.js

@@ -10,7 +10,7 @@ import { PinAnimatedInput } from './pinAnimatedInput';
 import { SideMenu } from './sideMenu';
 import Modal from './modal';
 import Icon from './icon';
-import UserListItem from './basicUIElements/view/userListItem';
+import UserListItem from './basicUIElements/view/userListItem/userListItem';
 
 export {
   Logo,

src/components/loginHeader/view/loginHeaderStyles.js

@@ -4,13 +4,15 @@ export default EStyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    height: '$deviceHeight / 3',
+    height: '$deviceHeight / 4',
+    backgroundColor: '$primaryBackgroundColor',
   },
   body: {
     flexDirection: 'row',
-    maxHeight: '$deviceHeight / 3',
+    maxHeight: '$deviceHeight / 4',
     overflow: 'hidden',
     backgroundColor: '$primaryBackgroundColor',
+    height: '$deviceHeight / 3.9',
   },
   description: {
     textAlignVertical: 'center',
@@ -26,22 +28,21 @@ export default EStyleSheet.create({
     marginBottom: 16,
   },
   mascot: {
-    width: 217,
-    height: 300,
-    marginLeft: 50,
-    marginTop: 40,
+    position: 'absolute',
+    width: '$deviceWidth / 2',
+    height: '$deviceHeight / 2.5',
+    marginTop: 10,
+    right: -20,
   },
   titleText: {
-    flex: 0.4,
     alignSelf: 'center',
-    height: 100,
-    marginTop: 50,
+    marginTop: 20,
     marginLeft: 32,
+    width: '$deviceWidth / 4',
   },
   headerRow: {
     width: '$deviceWidth',
     flexDirection: 'row',
-    height: 55,
     justifyContent: 'space-between',
     backgroundColor: '$primaryBackgroundColor',
   },

src/components/loginHeader/view/loginHeaderView.js

@@ -6,8 +6,7 @@ import { View, Text, Image } from 'react-native';
 import { TextButton } from '../../buttons';
 import { LineBreak } from '../../basicUIElements';
 // Styles
-// eslint-disable-next-line
-import styles from "./loginHeaderStyles";
+import styles from './loginHeaderStyles';
 
 class LoginHeaderView extends Component {
   /* Props
@@ -27,18 +26,15 @@ class LoginHeaderView extends Component {
 
   render() {
     const {
-      description, title, onPress, isKeyboardOpen,
+      description, isKeyboardOpen, onPress, rightButtonText, title,
     } = this.props;
 
     return (
       <View styles={styles.container}>
         <View style={styles.headerRow}>
-          <Image
-            style={styles.logo}
-            source={require('../../../assets/esteem.png')}
-          />
+          <Image style={styles.logo} source={require('../../../assets/esteem_transparent.png')} />
           <View style={styles.headerButton}>
-            <TextButton onPress={onPress} text="Sign up" />
+            <TextButton onPress={onPress} text={rightButtonText} />
           </View>
         </View>
         {!isKeyboardOpen && (
@@ -47,12 +43,7 @@ class LoginHeaderView extends Component {
               <Text style={styles.title}>{title}</Text>
               <Text style={styles.description}>{description}</Text>
             </View>
-            <View style={{ flex: 0.7 }}>
-              <Image
-                style={styles.mascot}
-                source={require('../../../assets/love_mascot.png')}
-              />
-            </View>
+            <Image style={styles.mascot} source={require('../../../assets/love_mascot.png')} />
           </View>
         )}
         <LineBreak />

src/components/mainButton/view/mainButtonStyles.js

@@ -47,6 +47,6 @@ export default EStyleSheet.create({
     height: 20,
   },
   disableTouchable: {
-    backgroundColor:"$iconColor",
+    backgroundColor: '$iconColor',
   },
 });

src/components/markdownEditor/view/markdownEditorView.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  View, TextInput, KeyboardAvoidingView, ScrollView, FlatList, Text,
+  View, KeyboardAvoidingView, ScrollView, FlatList, Text,
 } from 'react-native';
 import Markdown, { getUniqueID } from 'react-native-markdown-renderer';
 
@@ -9,7 +9,7 @@ import Formats from './formats/formats';
 import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
 import { StickyBar } from '../../basicUIElements';
-
+import { TextInput } from '../../textInput';
 // Styles
 import styles from './markdownEditorStyles';
 import markdownStyle from './markdownPreviewStyles';
@@ -23,10 +23,6 @@ export default class MarkdownEditorView extends Component {
     };
   }
 
-  componentDidMount() {
-    this.textInput.focus();
-  }
-
   componentWillReceiveProps(nextProps) {
     const { draftBody } = this.props;
 
@@ -153,7 +149,6 @@ export default class MarkdownEditorView extends Component {
             onSelectionChange={this._handleOnSelectionChange}
             placeholder="What would you like to write about today?"
             placeholderTextColor="#c1c5c7"
-            ref={textInput => (this.textInput = textInput)}
             selection={selection}
             selectionColor="#357ce6"
             style={styles.textWrapper}
@@ -168,7 +163,6 @@ export default class MarkdownEditorView extends Component {
           && this._renderEditorButtons({
             getState: this._getState,
             setState: (state, callback) => {
-              this.textInput.focus();
               this.setState(state, callback);
             },
           })}

src/components/postButton/container/postButtonContainer.js

@@ -27,7 +27,7 @@ class PostButtonContainer extends Component {
 }
 
 const mapStateToProps = state => ({
-  isLoggedIn: state.application.isLoggedIn,
+  routes: state.nav.routes,
 });
 
 export default connect(mapStateToProps)(withNavigation(PostButtonContainer));

src/components/postButton/view/postButtonStyles.js

@@ -22,6 +22,6 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     shadowColor: '$shadowColor',
     shadowOffset: { height: 0 },
-    shadowOpacity: 1,
+    shadowOpacity: 0.5,
   },
 });

src/components/postButton/view/postButtonView.js

@@ -26,6 +26,18 @@ class PostButtonView extends Component {
 
   icon3 = new Animated.Value(0);
 
+  componentWillReceiveProps(nextProps) {
+    // For closing sub buttons
+    if (this.mode._value) {
+      const { routes } = this.props;
+      const nextRouteName = nextProps.routes[0].routes[nextProps.routes[0].routes.length - 1].routeName;
+      const routeName = routes[0].routes[routes[0].routes.length - 1].routeName;
+      if (routeName !== nextRouteName && nextRouteName !== ROUTES.DRAWER.MAIN) {
+        this.toggleView();
+      }
+    }
+  }
+
   toggleView = () => {
     if (this.mode._value) {
       Animated.parallel(
@@ -95,8 +107,7 @@ class PostButtonView extends Component {
             top: firstY,
           }}
           icon="camera"
-          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)
-          }
+          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
         />
         <SubPostButton
           size={SIZE}
@@ -105,8 +116,7 @@ class PostButtonView extends Component {
             top: secondY,
           }}
           icon="pencil"
-          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)
-          }
+          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
         />
         <SubPostButton
           size={SIZE}
@@ -115,8 +125,7 @@ class PostButtonView extends Component {
             top: thirdY,
           }}
           icon="video-camera"
-          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)
-          }
+          onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
         />
         <TouchableOpacity onPress={this.toggleView} activeOpacity={1}>
           <Animated.View

src/components/textInput/index.js

@@ -0,0 +1,4 @@
+import TextInput from './view/textInputView';
+
+export { TextInput };
+export default TextInput;

src/components/textInput/view/textInputView.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { TextInput } from 'react-native';
+
+const TextInputView = props => (
+  <TextInput keyboardAppearance={props.isDarkTheme ? 'dark' : 'light'} {...props} />
+);
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(TextInputView);

src/config/locales/en-US.json

@@ -6,7 +6,7 @@
     "claim_reward_balance": "Claim Reward Balance",
     "transfer": "Transfer",
     "transfer_to_vesting": "Transfer To Vesting",
-    "withdraw_vesting": "withdraw_vesting",
+    "withdraw_vesting": "Power Down",
     "fill_order": "Fill Order"
   },
   "notification": {
@@ -31,5 +31,16 @@
   },
   "voters": {
     "voters_info": "Voters Info"
+  },
+  "login": {
+    "signin": "Sign in",
+    "signup": "Sign up",
+    "signin_title": "To get all the benefits of using eSteem",
+    "username": "Username",
+    "password": "Password or WIF",
+    "description": "User credentials are kept locally on the device. Credentials are removed upon logout!",
+    "cancel": "cancel",
+    "login": "LOGIN",
+    "steemconnect_description": "If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
   }
 }

src/config/locales/tr-TR.json

@@ -31,5 +31,16 @@
   },
   "voters": {
     "voters_info": "Oy Verenler"
+  },
+  "login": {
+    "signin": "Giriş",
+    "signup": "Kayıt",
+    "signin_title": "eSteem'in ayrıçalıklı dünyasına hoşgeldiniz.",
+    "username": "Kullanıcı Adı",
+    "password": "Şifre yada WIF",
+    "description": "Kullanıçı bilgileri telefonunuz üzeründe şifreli olarak tutulur ve çıkış yaptıgınızda tüm bilgiler silinir.",
+    "cancel": "geç",
+    "login": "GİRİŞ",
+    "steemconnect_description": "Eğer kullanıçı bilgilerini şifreli olarak tutulmasını istemiyorsanız Steemconnect ilede giriş yapabilirsiniz."
   }
 }

src/screens/application/container/applicationContainer.js

@@ -25,9 +25,9 @@ class ApplicationContainer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { isDarkTheme } = this.props;
+    const { isDarkTheme, selectedLanguage } = this.props;
 
-    if (isDarkTheme !== nextProps.isDarkTheme) {
+    if (isDarkTheme !== nextProps.isDarkTheme || selectedLanguage !== nextProps.selectedLanguage) {
       this.setState({ isRenderRequire: false }, () => this.setState({ isRenderRequire: true }));
     }
   }

src/screens/editor/container/editorContainer.js

@@ -116,21 +116,22 @@ class ExampleContainer extends Component {
   };
 
   render() {
-    const { isLoggedIn } = this.props;
+    const { isLoggedIn, isDarkTheme } = this.props;
     const {
       isPostSending, isDraftSaving, isDraftSaved, draftPost,
     } = this.state;
 
     return (
       <EditorScreen
-        handleOnSaveButtonPress={this._handleOnSaveButtonPress}
-        isPostSending={isPostSending}
-        handleFormChanged={this._handleFormChanged}
-        isDraftSaving={isDraftSaving}
-        isDraftSaved={isDraftSaved}
         draftPost={draftPost}
-        isLoggedIn={isLoggedIn}
+        handleFormChanged={this._handleFormChanged}
+        handleOnSaveButtonPress={this._handleOnSaveButtonPress}
         handleOnSubmit={this._handleSubmit}
+        isDarkTheme={isDarkTheme}
+        isDraftSaved={isDraftSaved}
+        isDraftSaving={isDraftSaving}
+        isLoggedIn={isLoggedIn}
+        isPostSending={isPostSending}
       />
     );
   }
@@ -138,6 +139,7 @@ class ExampleContainer extends Component {
 
 const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
+
   currentAccount: state.account.currentAccount,
 });
 

src/screens/editor/screen/editorScreen.js

@@ -125,7 +125,7 @@ export class EditorScreen extends Component {
       isPreviewActive, wordsCount, isFormValid, fields, isChanged,
     } = this.state;
     const {
-      isLoggedIn, isPostSending, isDraftSaving, isDraftSaved, draftPost,
+      isLoggedIn, isPostSending, isDraftSaving, isDraftSaved, draftPost
     } = this.props;
 
     return (

src/screens/login/screen/loginScreen.js

@@ -4,15 +4,15 @@ import {
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
-import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
 
 // Actions
 import {
-  failedAccount, addOtherAccount, updateCurrentAccount,
+  failedAccount,
+  addOtherAccount,
+  updateCurrentAccount,
 } from '../../../redux/actions/accountAction';
-import {
-  login as loginAction, openPinCodeModal,
-} from '../../../redux/actions/applicationActions';
+import { login as loginAction, openPinCodeModal } from '../../../redux/actions/applicationActions';
 
 // Internal Components
 import { FormInput } from '../../../components/formInput';
@@ -90,19 +90,26 @@ class LoginScreen extends Component {
   };
 
   render() {
-    const { navigation } = this.props;
+    const { navigation, intl } = this.props;
     const {
       isLoading, username, isUsernameValid, keyboardIsOpen, password,
     } = this.state;
 
     return (
-      <View style={{ flex: 1 }}>
+      <View style={styles.container}>
         <StatusBar hidden translucent />
         <LoginHeader
           isKeyboardOpen={keyboardIsOpen}
-          title="Sign in"
-          description="To get all the benefits using eSteem"
+          title={intl.formatMessage({
+            id: 'login.signin',
+          })}
+          description={intl.formatMessage({
+            id: 'login.signin_title',
+          })}
           onPress={() => this._handleSignUp()}
+          rightButtonText={intl.formatMessage({
+            id: 'login.signup',
+          })}
         />
         <ScrollableTabView
           locked={isLoading}
@@ -117,7 +124,12 @@ class LoginScreen extends Component {
             />
           )}
         >
-          <View tabLabel="Sign in" style={styles.tabbarItem}>
+          <View
+            tabLabel={intl.formatMessage({
+              id: 'login.signin',
+            })}
+            style={styles.tabbarItem}
+          >
             <KeyboardAwareScrollView
               onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
               onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
@@ -129,7 +141,9 @@ class LoginScreen extends Component {
                 leftIconName="md-close-circle"
                 isValid={isUsernameValid}
                 onChange={value => this._handleUsernameChange(value)}
-                placeholder="Username"
+                placeholder={intl.formatMessage({
+                  id: 'login.username',
+                })}
                 isEditable
                 type="username"
                 isFirstImage
@@ -140,34 +154,46 @@ class LoginScreen extends Component {
                 leftIconName="md-close-circle"
                 isValid={isUsernameValid}
                 onChange={value => this._handleOnPasswordChange(value)}
-                placeholder="Password or WIF"
+                placeholder={intl.formatMessage({
+                  id: 'login.password',
+                })}
                 isEditable
                 secureTextEntry
                 type="password"
               />
               <InformationArea
-                description="User credentials are kept locally on the device. Credentials are
-                  removed upon logout!"
+                description={intl.formatMessage({
+                  id: 'login.description',
+                })}
                 iconName="ios-information-circle-outline"
               />
             </KeyboardAwareScrollView>
 
             <View style={styles.footerButtons}>
-              <TextButton onPress={() => navigation.navigate(ROUTES.DRAWER.MAIN)} text="cancel" />
+              <TextButton
+                style={styles.cancelButton}
+                onPress={() => navigation.navigate(ROUTES.DRAWER.MAIN)}
+                text={intl.formatMessage({
+                  id: 'login.cancel',
+                })}
+              />
+              <MainButton
+                onPress={this._handleOnPressLogin}
+                iconName="md-person"
+                iconColor="white"
+                text={intl.formatMessage({
+                  id: 'login.login',
+                })}
+                isDisable={!isUsernameValid || password.length < 2 || username.length < 2}
+                isLoading={isLoading}
+              />
             </View>
-            <MainButton
-              wrapperStyle={styles.mainButtonWrapper}
-              onPress={this._handleOnPressLogin}
-              iconName="md-person"
-              iconColor="white"
-              text="LOGIN"
-              isDisable={!isUsernameValid || password.length < 2 || username.length < 2}
-              isLoading={isLoading}
-            />
           </View>
-          <View tabLabel="SteemConnect" style={styles.steemConnectTab}>
+          <View tabLabel="SteemConnect" style={styles.tabbarItem}>
             <InformationArea
-              description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
+              description={intl.formatMessage({
+                id: 'login.steemconnect_description',
+              })}
               iconName="ios-information-circle-outline"
             />
             <MainButton
@@ -185,4 +211,4 @@ class LoginScreen extends Component {
   }
 }
 
-export default connect()(LoginScreen);
+export default injectIntl(LoginScreen);

src/screens/login/screen/loginStyles.js

@@ -2,26 +2,8 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   container: {
-    margin: 0,
-    padding: 0,
-    backgroundColor: '#f1f1f1',
-    flexDirection: 'column',
-  },
-  header: {
-    flexDirection: 'row',
-    padding: 0,
-    backgroundColor: '$primaryBackgroundColor',
-    marginBottom: 10,
-    height: 200,
-    flex: 0.4,
-  },
-  footer: {
-    flex: 0.2,
-    bottom: 0,
-    marginTop: 10,
-    height: 80,
-    backgroundColor: '$primaryBackgroundColor',
-    flexDirection: 'row',
+    flex: 1,
+    backgroundColor: '$primaryLightBackground',
   },
   tabView: {
     alignSelf: 'center',
@@ -38,12 +20,6 @@ export default EStyleSheet.create({
     minWidth: '$deviceWidth',
     height: '$deviceHeight / 1.95',
   },
-  steemConnectTab: {
-    backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
-    flex: 1,
-    height: '$deviceHeight / 1.95',
-  },
   mainButtonWrapper: {
     position: 'absolute',
     right: 24,
@@ -51,13 +27,15 @@ export default EStyleSheet.create({
     flexDirection: 'row',
   },
   footerButtons: {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     alignSelf: 'flex-end',
-    position: 'absolute',
-    bottom: 45,
-    left: '$deviceWidth / 2.3',
+    marginRight: 10,
+    bottom: 24,
+    right: 24,
+  },
+  cancelButton: {
+    marginRight: 10,
   },
 });