fix white lines issue in color palette card and make card and other UI

components round

components/Card.js

@@ -1,35 +1,67 @@
-import * as React from 'react';
+import React, { useRef } from 'react';
 import * as Animatable from 'react-native-animatable';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Animated } from 'react-native';
 import Colors from '../constants/Colors';
 import PropTypes from 'prop-types';
 
-export default class Card extends React.Component {
-  render() {
-    return (
-      <Animatable.View animation={this.props.animationType} duration={500} useNativeDriver={true}>
-        <TouchableOpacity
-          onLongPress={this.props.onLongPress}
-          onPress={this.props.onPress}
-          style={[styles.inner]}>
-          <View {...this.props}>{this.props.children}</View>
-        </TouchableOpacity>
-      </Animatable.View>
-    );
-  }
-}
+const Card = ({ animationType, onLongPress, onPress, children }) => {
+  const scaleValue = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    Animated.timing(scaleValue, {
+      toValue: 0.95,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.timing(scaleValue, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  };
+
+  const scaleStyle = {
+    transform: [{ scale: scaleValue }]
+  };
+
+  return (
+    <Animatable.View animation={animationType} duration={500} useNativeDriver={true}>
+      <TouchableOpacity
+        activeOpacity={1}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={styles.touchable}>
+        <Animated.View style={[styles.inner, scaleStyle]}>
+          <View>{children}</View>
+        </Animated.View>
+      </TouchableOpacity>
+    </Animatable.View>
+  );
+};
 
 Card.propTypes = {
   animationType: PropTypes.string,
   onLongPress: PropTypes.func,
   onPress: PropTypes.func,
-  children: PropTypes.children
+  children: PropTypes.node
 };
 
 const styles = StyleSheet.create({
+  touchable: {
+    borderRadius: 8
+  },
   inner: {
     backgroundColor: Colors.white,
     marginVertical: 8,
-    elevation: 1
+    elevation: 1,
+    overflow: 'hidden',
+    borderRadius: 8
   }
 });
+
+export default Card;

components/ColorDetails.js

@@ -86,9 +86,11 @@ export const ColorDetail = ({ color }) => {
         flex: 1,
         flexDirection: 'column',
         padding: 8,
-        backgroundColor: '#fff'
+        backgroundColor: '#fff',
+        borderRadius: 8,
+        marginTop: 12
       }}>
-      <View style={[styles.backgroundColor]}></View>
+      <View style={[styles.backgroundColor, { borderRadius: 8 }]}></View>
       {/* <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} >{props.color}</Text> */}
       <View style={{ marginTop: 20 }}>
         {items.map((item, index) => (

components/CromaButton.js

@@ -54,7 +54,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    borderRadius: 8
   },
   text: {
     textTransform: 'uppercase',
@@ -63,4 +64,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default CromaButton;
+export default CromaButton;

components/MultiColorView.js

@@ -18,9 +18,11 @@ const styles = StyleSheet.create({
   palette: {
     alignItems: 'stretch',
     flexDirection: 'row',
-    height: 112
+    height: 112,
+    overflow: 'hidden'
   },
   color: {
-    flex: 1
+    flex: 1,
+    marginStart: -1
   }
 });

components/SavePalette.js

@@ -109,7 +109,8 @@ const styles = StyleSheet.create({
     elevation: 2,
     height: 92,
     marginVertical: 10,
-    padding: 10
+    padding: 10,
+    borderRadius: 8
   },
   title: {
     fontWeight: '700'

components/SingleColorView.js

@@ -12,8 +12,7 @@ export class SingleColorView extends React.Component {
           }
           Clipboard.setString(this.props.color.color);
         }}
-        style={[styles.container, { backgroundColor: this.props.color.color }]}
-      >
+        style={[styles.container, { backgroundColor: this.props.color.color }]}>
         <Text style={styles.colorText}>
           {this.props.color.color +
             (this.props.color.name ? ' (' + this.props.color.name + ')' : '')}

screens/ColorListScreen.js

@@ -24,9 +24,11 @@ export default function ColorListScreen({ navigation }) {
   logEvent('color_list_screen');
   return (
     <ScrollView style={styles.listview} showsVerticalScrollIndicator={false}>
-      {colors.map((color) => (
-        <SingleColorView key={color.color} color={color} />
-      ))}
+      <View>
+        {colors.map((color) => (
+          <SingleColorView key={color.color} color={color} />
+        ))}
+      </View>
       <CromaButton
         onPress={() => {
           navigation.navigate('SavePalette');
@@ -48,7 +50,7 @@ function uniqueColors(colors) {
   return uniqueColors;
 }
 
-const CustomHeader = ({ navigation }) => {
+const CustomHeader = () => {
   const { t } = useTranslation();
 
   return (

screens/PaletteLibraryScreen.js

@@ -47,7 +47,8 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     marginVertical: 8,
     elevation: 1,
-    padding: 4
+    padding: 8,
+    borderRadius: 8
   },
   title: {
     ...material.title