From 2fb5ded51726a8f0bc82cd627bc9973aa2d52102 Mon Sep 17 00:00:00 2001
From: ue <ugurerdal93@gmail.com>
Date: Fri, 23 Nov 2018 14:16:26 +0300
Subject: [PATCH] place holders implemented for dark theme

---
 .../view/postCardPlaceHolderView.js           | 13 ++--
 .../view/postPlaceHolderView.js               | 67 +++++++++++--------
 .../view/profileSummaryPlaceHolder.js         | 48 +++++++------
 .../view/walletDetailsPlaceHolder.js          | 49 ++++++++------
 4 files changed, 103 insertions(+), 74 deletions(-)

diff --git a/src/components/basicUIElements/view/postCardPlaceHolderView.js b/src/components/basicUIElements/view/postCardPlaceHolderView.js
index 23053c26a..0ca5f6567 100644
--- a/src/components/basicUIElements/view/postCardPlaceHolderView.js
+++ b/src/components/basicUIElements/view/postCardPlaceHolderView.js
@@ -1,19 +1,20 @@
 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}>
         <Placeholder.Media size={25} hasRadius animate="fade" color={color} />
         <Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} />
       </View>
-      <Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color}/>
+      <Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color} />
       <View style={styles.paragraphWrapper}>
         <Placeholder.Paragraph
           lineNumber={3}
@@ -28,9 +29,7 @@ const PostCardPlaceHolder = (props) => {
       </View>
     </View>
   );
-}
-
-
+};
 
 const mapStateToProps = state => ({
   isDarkTheme: state.application.isDarkTheme,
diff --git a/src/components/basicUIElements/view/postPlaceHolderView.js b/src/components/basicUIElements/view/postPlaceHolderView.js
index 98b10480d..41ce93256 100644
--- a/src/components/basicUIElements/view/postPlaceHolderView.js
+++ b/src/components/basicUIElements/view/postPlaceHolderView.js
@@ -1,36 +1,47 @@
 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 = () => (
-  <View>
-    <View style={styles.paragraphWrapper}>
-      <Placeholder.Paragraph
-        lineNumber={2}
-        textSize={16}
-        lineSpacing={5}
-        width="100%"
-        lastLineWidth="70%"
-        firstLineWidth="50%"
-        animate="fade"
-      />
+  return (
+    <View>
+      <View style={styles.paragraphWrapper}>
+        <Placeholder.Paragraph
+          color={color}
+          lineNumber={2}
+          textSize={16}
+          lineSpacing={5}
+          width="100%"
+          lastLineWidth="70%"
+          firstLineWidth="50%"
+          animate="fade"
+        />
+      </View>
+      <View style={styles.paragraphWrapper} />
+      <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}
+          width="100%"
+          lastLineWidth="70%"
+          firstLineWidth="50%"
+          animate="fade"
+        />
+      </View>
     </View>
-    <View style={styles.paragraphWrapper} />
-    <Placeholder.Box animate="fade" height={200} width="100%" radius={5} />
-    <View style={styles.paragraphWrapper}>
-      <Placeholder.Paragraph
-        lineNumber={18}
-        textSize={16}
-        lineSpacing={5}
-        width="100%"
-        lastLineWidth="70%"
-        firstLineWidth="50%"
-        animate="fade"
-      />
-    </View>
-  </View>
-);
+  );
+};
 
-export default PostPlaceHolder;
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(PostPlaceHolder);
diff --git a/src/components/basicUIElements/view/profileSummaryPlaceHolder.js b/src/components/basicUIElements/view/profileSummaryPlaceHolder.js
index 89764dff4..8c9830e9c 100644
--- a/src/components/basicUIElements/view/profileSummaryPlaceHolder.js
+++ b/src/components/basicUIElements/view/profileSummaryPlaceHolder.js
@@ -1,27 +1,37 @@
 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 = () => (
-  <View style={styles.container}>
-    <View style={styles.textWrapper}>
-      <Placeholder.Paragraph lineNumber={1} />
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        <Placeholder.Paragraph lineNumber={1} color={color} />
+      </View>
+      <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}
+          width="100%"
+          lastLineWidth="70%"
+          firstLineWidth="50%"
+          animate="fade"
+        />
+      </View>
     </View>
-    <Placeholder.Box animate="fade" height={75} width="100%" radius={5} />
-    <View style={styles.paragraphWrapper}>
-      <Placeholder.Paragraph
-        lineNumber={3}
-        textSize={16}
-        lineSpacing={5}
-        width="100%"
-        lastLineWidth="70%"
-        firstLineWidth="50%"
-        animate="fade"
-      />
-    </View>
-  </View>
-);
+  );
+};
 
-export default ProfileSummaryPlaceHolder;
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);
diff --git a/src/components/basicUIElements/view/walletDetailsPlaceHolder.js b/src/components/basicUIElements/view/walletDetailsPlaceHolder.js
index 8406f6d02..13d3c7749 100644
--- a/src/components/basicUIElements/view/walletDetailsPlaceHolder.js
+++ b/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 = () => (
-  <View style={styles.container}>
-    <View style={styles.textWrapper}>
-      <Placeholder.Paragraph lineNumber={1} />
-    </View>
-    <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
-    </View>
-    <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
-    </View>
-    <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
-    </View>
-    <View style={styles.textWrapper}>
-      <Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
-    </View>
-  </View>
-);
+const WalletDetailsPlaceHolder = (props) => {
+  const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
-export default WalletDetailsPlaceHolder;
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        <Placeholder.Paragraph lineNumber={1} color={color} />
+      </View>
+      <View style={styles.textWrapper}>
+        <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} color={color} />
+      </View>
+      <View style={styles.textWrapper}>
+        <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} color={color} />
+      </View>
+    </View>
+  );
+};
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(WalletDetailsPlaceHolder);