fixed home screen for dark theme

This commit is contained in:
u-e 2018-12-21 16:02:50 +03:00
parent 5c81c6eb1d
commit f912a0ff1e
15 changed files with 61 additions and 44 deletions

View File

@ -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,

View File

@ -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: {

View File

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

View File

@ -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}

View File

@ -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,
});

View File

@ -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: {

View File

@ -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 }}
colors={['#2d5aa0', '#357ce6']}
end={{ x: 0.5, y: 0 }}
colors={gredientColor}
style={[
styles.avatarButtonWrapper,
isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,

View File

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

View File

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

View File

@ -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 }, () => {

View File

@ -15,18 +15,18 @@ import styles from './tabBarStyles';
class TabBar extends PureComponent {
/* Props
* ------------------------------------------------ TODO: Fill fallowlines
* @prop { type } name - Description.
* @prop { type } name - Description.
*
*/
* ------------------------------------------------ TODO: Fill fallowlines
* @prop { type } name - Description.
* @prop { type } name - Description.
*
*/
constructor(props) {
super(props);
this.state = {
activeColor: !props.isDarkTheme ? '#357ce6' : '#357ce6',
inactiveColor: !props.isDarkTheme ? '#788187' : '#eaf2fc',
activeColor: !props.isDarkTheme ? '#357ce6' : '#96c0ff',
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>
);

View File

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

View File

@ -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"
leftIconName="md-close-circle"
rightIconName="at"
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"
leftIconName="md-close-circle"
rightIconName="lock"
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>
);

View File

@ -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',

View File

@ -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',