place holders implemented for dark theme

src/components/basicUIElements/view/postCardPlaceHolderView.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { View } from 'react-native';
-import { connect } from "react-redux";
 import Placeholder from 'rn-placeholder';
 
 import styles from './postCardPlaceHolderStyles';
-
+// TODO: make container for place holder wrapper after alpha
 const PostCardPlaceHolder = (props) => {
-  const color = props.isDarkTheme ? "#2e3d51" : "#f6f6f6";
+  const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
+
   return (
     <View style={styles.container}>
       <View style={styles.textWrapper}>
@@ -28,9 +29,7 @@ const PostCardPlaceHolder = (props) => {
       </View>
     </View>
   );
-}
+};
-
-
 
 const mapStateToProps = state => ({
   isDarkTheme: state.application.isDarkTheme,

src/components/basicUIElements/view/postPlaceHolderView.js

@@ -1,13 +1,18 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import styles from './postCardPlaceHolderStyles';
+// TODO: make container for place holder wrapper after alpha
+const PostPlaceHolder = (props) => {
+  const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
-const PostPlaceHolder = () => (
+  return (
     <View>
       <View style={styles.paragraphWrapper}>
         <Placeholder.Paragraph
+          color={color}
           lineNumber={2}
           textSize={16}
           lineSpacing={5}
@@ -18,9 +23,10 @@ const PostPlaceHolder = () => (
         />
       </View>
       <View style={styles.paragraphWrapper} />
-    <Placeholder.Box animate="fade" height={200} width="100%" radius={5} />
+      <Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color} />
       <View style={styles.paragraphWrapper}>
         <Placeholder.Paragraph
+          color={color}
           lineNumber={18}
           textSize={16}
           lineSpacing={5}
@@ -32,5 +38,10 @@ const PostPlaceHolder = () => (
       </View>
     </View>
   );
+};
 
-export default PostPlaceHolder;
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(PostPlaceHolder);

src/components/basicUIElements/view/profileSummaryPlaceHolder.js

@@ -1,17 +1,22 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import styles from './profileSummaryPlaceHolderStyles';
+// TODO: make container for place holder wrapper after alpha
+const ProfileSummaryPlaceHolder = (props) => {
+  const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
-const ProfileSummaryPlaceHolder = () => (
+  return (
     <View style={styles.container}>
       <View style={styles.textWrapper}>
-      <Placeholder.Paragraph lineNumber={1} />
+        <Placeholder.Paragraph lineNumber={1} color={color} />
       </View>
-    <Placeholder.Box animate="fade" height={75} width="100%" radius={5} />
+      <Placeholder.Box animate="fade" height={75} width="100%" radius={5} color={color} />
       <View style={styles.paragraphWrapper}>
         <Placeholder.Paragraph
+          color={color}
           lineNumber={3}
           textSize={16}
           lineSpacing={5}
@@ -23,5 +28,10 @@ const ProfileSummaryPlaceHolder = () => (
       </View>
     </View>
   );
+};
 
-export default ProfileSummaryPlaceHolder;
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);

src/components/basicUIElements/view/walletDetailsPlaceHolder.js

@@ -1,27 +1,36 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
 import styles from './walletDetailsPlaceHolderStyles';
 
-const WalletDetailsPlaceHolder = () => (
+const WalletDetailsPlaceHolder = (props) => {
+  const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
+
+  return (
     <View style={styles.container}>
       <View style={styles.textWrapper}>
-      <Placeholder.Paragraph lineNumber={1} />
+        <Placeholder.Paragraph lineNumber={1} color={color} />
       </View>
       <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
+        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
       </View>
       <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
+        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
       </View>
       <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
+        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
       </View>
       <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
+        <Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
       </View>
     </View>
   );
+};
 
-export default WalletDetailsPlaceHolder;
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(WalletDetailsPlaceHolder);