From ce84bf038c55e9ddca295ee9274748e53954c621 Mon Sep 17 00:00:00 2001
From: Kamal Joshi <kkjoshi.it@gmail.com>
Date: Mon, 30 Sep 2024 10:31:01 +0530
Subject: [PATCH] fix image color preview area

---
 components/GridActionButton.js | 36 +++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/components/GridActionButton.js b/components/GridActionButton.js
index c29a7e01..e9804030 100644
--- a/components/GridActionButton.js
+++ b/components/GridActionButton.js
@@ -239,14 +239,8 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
                   <Image source={{ uri: selectedImage.uri }} style={styles.previewImage} />
                 )}
 
-                <View
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                    height: 230
-                  }}>
-                  <View style={styles.imageColorPreviewModelContent}>
+                <View style={styles.imageActionArea}>
+                  <View style={styles.imageExtractedColorPreview}>
                     <MultiColorView colors={automaticColors}></MultiColorView>
                   </View>
                   <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
@@ -303,11 +297,30 @@ const styles = {
     backgroundColor: 'white',
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
+    paddingTop: 8,
     height: '50%',
     width: '100%',
     position: 'absolute',
     bottom: 0
   },
+  imageActionArea: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: 120
+  },
+  imageExtractedColorPreview: {
+    margin: 16,
+  },
+  colorPickerModalContent: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    height: '60%',
+    width: '100%',
+    position: 'absolute',
+    bottom: 0
+  },
   previewImage: {
     height: 150,
     resizeMode: 'contain',
@@ -326,7 +339,8 @@ const styles = {
     margin: 5
   },
   pickColorsButton: {
-    alignItems: 'center'
+    alignItems: 'center',
+    marginVertical: 8,
   },
   pickColorsButtonText: {
     fontSize: 18,
@@ -338,10 +352,10 @@ const styles = {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'white',
-    paddingHorizontal: 10,
     paddingVertical: 5,
     borderRadius: 5,
-    marginLeft: 10,
+    marginHorizontal: 16,
+    marginBottom: 8,
     borderWidth: 1,
     borderColor: Colors.primary
   },