mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-18 19:01:38 +03:00
fixed home screen for dark theme
This commit is contained in:
parent
5c81c6eb1d
commit
f912a0ff1e
@ -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,
|
||||
|
@ -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: {
|
||||
|
@ -14,7 +14,7 @@ export default EStyleSheet.create({
|
||||
alignSelf: 'center',
|
||||
},
|
||||
rightIcon: {
|
||||
color: '$iconColor',
|
||||
color: '$primaryDarkText',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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: {
|
||||
|
@ -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,
|
||||
|
@ -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} />;
|
||||
}
|
||||
|
@ -33,9 +33,8 @@ export default EStyleSheet.create({
|
||||
mascot: {
|
||||
position: 'absolute',
|
||||
width: 160,
|
||||
|
||||
height: 227,
|
||||
marginTop: 10,
|
||||
marginTop: 40,
|
||||
right: -20,
|
||||
},
|
||||
titleText: {
|
||||
|
@ -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 }, () => {
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -23,7 +23,6 @@ export default EStyleSheet.create({
|
||||
shadowColor: '$shadowColor',
|
||||
shadowOffset: { height: 4 },
|
||||
zIndex: 99,
|
||||
elevation: 4,
|
||||
},
|
||||
tabbarItem: {
|
||||
flex: 1,
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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',
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user