added dark theme image still implementing colors

2024-11-22 23:28:56 +03:00 · 2018-11-22 14:28:48 +03:00 · 2018-11-22 14:28:48 +03:00 · 1308efeefe
commit 1308efeefe
parent 97ebaf4f16
22 changed files with 59 additions and 51 deletions
--- a/src/assets/dark_cover_image.png
+++ b/src/assets/dark_cover_image.png
--- a/src/components/basicUIElements/view/grayWrapperStyles.js
+++ b/src/components/basicUIElements/view/grayWrapperStyles.js
@ -3,7 +3,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export default EStyleSheet.create({
  wrapper: {
    flexDirection: 'column',
-    backgroundColor: '$primaryGray',
+    backgroundColor: '$primaryLightBackground',
    borderRadius: 8,
  },
 });
--- a/src/components/basicUIElements/view/postCardPlaceHolderStyles.js
+++ b/src/components/basicUIElements/view/postCardPlaceHolderStyles.js
@ -7,7 +7,7 @@ export default EStyleSheet.create({
    borderStyle: 'solid',
    borderWidth: 1,
    borderTopWidth: 1,
-    borderColor: '#e2e5e8',
+    borderColor: '$primaryLightBackground',
    borderRadius: 5,
    marginRight: 0,
    marginLeft: 0,
--- a/src/components/basicUIElements/view/profileSummaryPlaceHolderStyles.js
+++ b/src/components/basicUIElements/view/profileSummaryPlaceHolderStyles.js
@ -7,7 +7,7 @@ export default EStyleSheet.create({
    borderStyle: 'solid',
    borderWidth: 1,
    borderTopWidth: 1,
-    borderColor: '#e2e5e8',
+    borderColor: '$primaryLightBackground',
    borderRadius: 5,
    marginRight: 0,
    marginLeft: 0,
--- a/src/components/basicUIElements/view/userListItemStyles.js
+++ b/src/components/basicUIElements/view/userListItemStyles.js
@ -16,6 +16,7 @@ export default EStyleSheet.create({
    padding: 16,
    borderRadius: 8,
    flexDirection: 'row',
+    backgroundColor: '$primaryBackgroundColor',
  },
  voteItemWrapperGray: {
    backgroundColor: '$primaryLightBackground',
--- a/src/components/basicUIElements/view/walletDetailsPlaceHolderStyles.js
+++ b/src/components/basicUIElements/view/walletDetailsPlaceHolderStyles.js
@ -7,7 +7,7 @@ export default EStyleSheet.create({
    borderStyle: 'solid',
    borderWidth: 1,
    borderTopWidth: 1,
-    borderColor: '#e2e5e8',
+    borderColor: '$primaryLightBackground',
    borderRadius: 5,
    marginRight: 0,
    marginLeft: 0,
--- a/src/components/containerHeader/view/containerHeaderStyles.js
+++ b/src/components/containerHeader/view/containerHeaderStyles.js
@ -9,7 +9,7 @@ export default EStyleSheet.create({
    justifyContent: 'space-between',
  },
  hasTopBorder: {
-    borderTopColor: '#cfcfcf',
+    borderTopColor: '$borderTopColor',
    borderTopWidth: 1,
  },
  title: {
--- a/src/components/notification/view/notificationStyles.js
+++ b/src/components/notification/view/notificationStyles.js
@ -2,7 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
-    backgroundColor: '#fff',
+    backgroundColor: '$primaryBackgroundColor',
  },
  scrollView: {
    height: '$deviceHeight / 1.35',
--- a/src/components/notificationLine/view/notificationLineStyles.js
+++ b/src/components/notificationLine/view/notificationLineStyles.js
@ -8,6 +8,7 @@ export default EStyleSheet.create({
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 64,
+    backgroundColor: '$primaryBackgroundColor',
  },
  avatar: {
    width: 32,
--- a/src/components/notificationLine/view/notificationLineView.js
+++ b/src/components/notificationLine/view/notificationLineView.js
@ -54,9 +54,11 @@ class NotificationLineView extends Component {
              })}
            </Text>
          </View>
-          <Text numberOfLines={1} style={styles.description}>
-            {notification.description}
-          </Text>
+          {notification.description && (
+            <Text numberOfLines={1} style={styles.description}>
+              {notification.description}
+            </Text>
+          )}
        </View>
        {notification.image && (
          <Image
--- a/src/components/postCard/view/postCardStyles.js
+++ b/src/components/postCard/view/postCardStyles.js
@ -65,13 +65,13 @@ export default EStyleSheet.create({
  comment: {
    alignSelf: 'center',
    fontSize: 10,
-    color: '#626262',
    marginLeft: 3,
+    color: '$primaryDarkGray',
  },
  commentIcon: {
    alignSelf: 'flex-start',
    fontSize: 20,
-    color: '#007ee5',
+    color: '$primaryDarkGray',
    margin: 0,
    width: 20,
  },
--- a/src/components/postCard/view/postCardView.js
+++ b/src/components/postCard/view/postCardView.js
@ -100,12 +100,15 @@ class PostCard extends Component {
        <View style={styles.bodyFooter}>
          <Upvote isShowpayoutValue content={content} user={user} isLoggedIn={isLoggedIn} />
          <TouchableOpacity style={styles.commentButton}>
-            <Icon style={[styles.commentIcon]} name="ios-chatbubbles-outline" />
+            <Icon style={[styles.commentIcon]} iconType="MaterialIcons" name="chat" />
            <Text style={styles.comment}>{content.children}</Text>
          </TouchableOpacity>
        </View>
        {content && content.top_likers ? (
-          <TouchableOpacity style={styles.likersWrapper} onPress={() => this._handleOnVotersPress()}>
+          <TouchableOpacity
+            style={styles.likersWrapper}
+            onPress={() => this._handleOnVotersPress()}
+          >
            <View style={styles.topLikers}>
              {content.top_likers.map((liker, i) => (
                <FastImage
--- a/src/components/profileSummary/view/profileSummaryView.js
+++ b/src/components/profileSummary/view/profileSummaryView.js
@ -4,7 +4,8 @@ import {
 } from 'react-native';

 // Constants
-import DEFAULT_IMAGE from '../../../assets/default_cover_image.png';
+import LIGHT_COVER_IMAGE from '../../../assets/default_cover_image.png';
+import DARK_COVER_IMAGE from '../../../assets/dark_cover_image.png';

 // Components
 import { TextWithIcon } from '../../basicUIElements';
@ -55,6 +56,7 @@ class ProfileSummaryView extends Component {
      handleFollowUnfollowUser,
      handleMuteUnmuteUser,
      handleOnFollowsPress,
+      isDarkTheme,
    } = this.props;
    const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
    const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
@ -85,7 +87,7 @@ class ProfileSummaryView extends Component {
        <Image
          style={styles.longImage}
          source={{ uri: coverImage }}
-          defaultSource={DEFAULT_IMAGE}
+          defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
        />
        <TouchableOpacity onPress={() => this.setState({ isShowPercentText: !isShowPercentText })}>
          <PercentBar
--- a/src/components/walletDetails/view/walletDetailsView.js
+++ b/src/components/walletDetails/view/walletDetailsView.js
@ -48,7 +48,6 @@ class WalletDetailsView extends Component {
            rightText={`${Math.round(
              vestsToSp(walletData.vestingShares, walletData.steemPerMVests) * 1000,
            ) / 1000} SP`}
-            tightTextColor="red"
            isBoldText
          />

--- a/src/screens/follows/screen/followScreenStyles.js
+++ b/src/screens/follows/screen/followScreenStyles.js
@ -2,9 +2,9 @@ import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
+    flex: 1,
    padding: 8,
-    flexDirection: 'row',
-    height: '$deviceHeight - 110',
+    backgroundColor: '$primaryBackgroundColor',
  },
  text: {
    color: '$iconColor',
--- a/src/screens/follows/screen/followsScreen.js
+++ b/src/screens/follows/screen/followsScreen.js
@ -63,14 +63,14 @@ class FollowsScreen extends Component {
    const headerTitle = `${title} (${count})`;

    return (
-      <View style={{ flex: 1, padding: 8 }}>
+      <View style={styles.container}>
        <BasicHeader
          title={headerTitle}
          rightIconName="ios-search"
          isHasSearch
          handleOnSearch={handleSearch}
        />
-        {true || (filterResult && data && filterResult.length > 0) || data.length > 0 ? (
+        {(filterResult && data && filterResult.length > 0) || data.length > 0 ? (
          <FlatList
            data={filterResult || data}
            keyExtractor={item => item.voter}
--- a/src/screens/notification/screen/notificationScreen.js
+++ b/src/screens/notification/screen/notificationScreen.js
@ -1,5 +1,5 @@
 import React, { Fragment, PureComponent } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
 import { TabBar } from '../../../components/tabBar';
 import { Notification } from '../../../components/notification';
@ -11,6 +11,7 @@ import { NoPost } from '../../../components/basicUIElements';

 // Styles
 import MESSAGES_IMAGE from '../../../assets/keep_calm.png';
+import globalStyles from '../../../globalStyles';

 class NotificationScreen extends PureComponent {
  constructor(props) {
@ -21,18 +22,12 @@ class NotificationScreen extends PureComponent {
  render() {
    const { notifications, getActivities } = this.props;
    return (
-      <Fragment>
+      <View style={globalStyles.container}>
        <Header />
        <ScrollableTabView
          style={styles.tabView}
          renderTabBar={() => (
-            <TabBar
-              style={styles.tabbar}
-              tabUnderlineDefaultWidth={100}
-              tabUnderlineScaleX={2}
-              activeColor="#357ce6"
-              inactiveColor="#222"
-            />
+            <TabBar style={styles.tabbar} tabUnderlineDefaultWidth={100} tabUnderlineScaleX={2} />
          )}
        >
          <View tabLabel="Notification" style={styles.notificationTab}>
@ -50,7 +45,7 @@ class NotificationScreen extends PureComponent {
            />
          </View>
        </ScrollableTabView>
-      </Fragment>
+      </View>
    );
  }
 }
--- a/src/screens/notification/screen/notificationStyles.js
+++ b/src/screens/notification/screen/notificationStyles.js
@ -4,20 +4,19 @@ export default EStyleSheet.create({
  tabbar: {
    alignSelf: 'center',
    height: 55,
-    backgroundColor: 'white',
-    borderBottomColor: '#f1f1f1',
+    backgroundColor: '$primaryBackgroundColor',
  },
  tabView: {
    alignSelf: 'center',
    backgroundColor: 'transparent',
  },
  notificationTab: {
-    backgroundColor: '#fff',
+    backgroundColor: '$primaryBackgroundColor',
    minWidth: '$deviceWidth',
  },
  leaderboardTab: {
    flex: 1,
-    backgroundColor: '#ffffff',
+    backgroundColor: '$primaryBackgroundColor',
    minWidth: '$deviceWidth',
  },
 });
--- a/src/screens/profile/container/profileContainer.js
+++ b/src/screens/profile/container/profileContainer.js
@ -262,6 +262,7 @@ class ProfileContainer extends Component {
      user,
      username,
    } = this.state;
+    const { isDarkTheme } = this.props;

    return (
      <Fragment>
@ -282,7 +283,7 @@ class ProfileContainer extends Component {
          isReverseHeader={isReverseHeader}
          user={user}
          username={username}
-          {...this.props}
+          isDarkTheme={isDarkTheme}
        />
      </Fragment>
    );
@ -292,6 +293,7 @@ class ProfileContainer extends Component {
 const mapStateToProps = state => ({
  isLoggedIn: state.application.isLoggedIn,
  currentAccount: state.account.currentAccount,
+  isDarkTheme: state.application.isDarkTheme,
 });

 export default connect(mapStateToProps)(ProfileContainer);
--- a/src/screens/profile/screen/profileScreen.js
+++ b/src/screens/profile/screen/profileScreen.js
@ -44,6 +44,7 @@ class ProfileScreen extends Component {
      handleMuteUnmuteUser,
      isProfileLoading,
      handleOnFollowsPress,
+      isDarkTheme,
    } = this.props;
    let _about;
    let avatar;
@ -87,24 +88,25 @@ class ProfileScreen extends Component {
              // locked={!isLoggedIn}
            >
              <ProfileSummary
-                handleOnFollowsPress={handleOnFollowsPress}
-                isFollowing={isFollowing}
-                isMuted={isMuted}
-                isOwnProfile={!isReverseHeader}
-                percentVP={votingPower}
-                isProfileLoading={isProfileLoading}
-                isLoggedIn={isLoggedIn}
-                handleFollowUnfollowUser={handleFollowUnfollowUser}
-                handleMuteUnmuteUser={handleMuteUnmuteUser}
-                percentRC={resourceCredits}
-                hoursVP={fullInHourVP || null}
-                hoursRC={fullInHourRC || null}
-                location={location}
-                link={website}
+                coverImage={coverImage}
                date={getFormatedCreatedDate(user && user.created)}
                followerCount={follows.follower_count}
                followingCount={follows.following_count}
-                coverImage={coverImage}
+                handleFollowUnfollowUser={handleFollowUnfollowUser}
+                handleMuteUnmuteUser={handleMuteUnmuteUser}
+                handleOnFollowsPress={handleOnFollowsPress}
+                hoursRC={fullInHourRC || null}
+                hoursVP={fullInHourVP || null}
+                isDarkTheme={isDarkTheme}
+                isFollowing={isFollowing}
+                isLoggedIn={isLoggedIn}
+                isMuted={isMuted}
+                isOwnProfile={!isReverseHeader}
+                isProfileLoading={isProfileLoading}
+                link={website}
+                location={location}
+                percentRC={resourceCredits}
+                percentVP={votingPower}
              />
            </CollapsibleCard>
          )}
--- a/src/themes/darkTheme.js
+++ b/src/themes/darkTheme.js
@ -10,7 +10,7 @@ export default {
  $black: '#000000',
  $primaryBlue: '#357ce6',
  $primaryDarkBlue: '#1a509a',
-  $primaryLightBlue: '#eaf2fc',
+  $primaryLightBlue: '#2e3d51',
  $primaryGray: '#f5f5f5',
  $primaryDarkGray: '#c1c5c7',
  $primaryLightGray: '#f6f6f6',
@ -20,6 +20,7 @@ export default {
  // General Colors
  $borderColor: '#c5c5c5',
  $bubblesBlue: '#5CCDFF',
+  $borderTopColor: '#757575',
  $iconColor: '#c1c5c7',
  $dangerColor: '#fff',
  $warningColor: '#fff',
--- a/src/themes/lightTheme.js
+++ b/src/themes/lightTheme.js
@ -21,6 +21,7 @@ export default {
  $borderColor: '#c5c5c5',
  $bubblesBlue: '#5CCDFF',
  $iconColor: '#c1c5c7',
+  $borderTopColor: '#cfcfcf',
  $dangerColor: '#fff',
  $warningColor: '#fff',
  $successColor: '#fff',