Merge pull request #9 from degica/task/ui-finetune-p1

did some finetunes on the ui

example/App.tsx

@@ -3,12 +3,15 @@ import {KomojuSDK} from 'react-native-komoju';
 import {PUBLIC_KEY} from '@env';
 
 import Component from './component';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 
 function App(): React.JSX.Element {
   return (
-    <KomojuSDK.KomojuProvider urlScheme="" publicKey={PUBLIC_KEY}>
-      <Component />
-    </KomojuSDK.KomojuProvider>
+    <GestureHandlerRootView>
+      <KomojuSDK.KomojuProvider urlScheme="" publicKey={PUBLIC_KEY}>
+        <Component />
+      </KomojuSDK.KomojuProvider>
+    </GestureHandlerRootView>
   );
 }
 

payment_sdk/src/components/CardInputGroup.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
     minHeight: 130,
   },
   label: {
+    fontSize: 16,
     marginBottom: 8,
     color: "#172E44",
   },

payment_sdk/src/components/Input.tsx

@@ -33,6 +33,7 @@ const Input: React.FC<InputProps> = ({
 
 const styles = StyleSheet.create({
   label: {
+    fontSize: 16,
     marginBottom: 8,
     color: '#172E44',
   },

payment_sdk/src/components/PaymentSheet.tsx

@@ -26,16 +26,10 @@ const PaymentSheet = forwardRef<PaymentSheetRefProps, {}>((props, ref) => {
   );
 
   return (
-    <GestureHandlerRootView style={styles.container}>
       <Sheet ref={sheetRef}>
         <SheetContent />
       </Sheet>
-    </GestureHandlerRootView>
   );
 });
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-});
-
 export default PaymentSheet;

payment_sdk/src/components/Pill.tsx

@@ -5,11 +5,12 @@ import {
   StyleSheet,
   Dimensions,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 
 interface PillProps {
   label: string;
-  icon: string;
+  icon: any;
   onPress: () => void;
   isSelected?: boolean;
 }
@@ -19,7 +20,7 @@ const Pill: React.FC<PillProps> = ({label, icon, onPress, isSelected}) => {
     <TouchableOpacity
       style={[styles.pill, isSelected && styles.activeDeco]}
       onPress={onPress}>
-      <Text style={styles.icon}>{icon}</Text>
+      <Image style={styles.icon} source={icon} />
       <Text style={styles.label}>{label}</Text>
     </TouchableOpacity>
   );
@@ -47,13 +48,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-evenly',
   },
   icon: {
-    fontSize: 18,
     marginRight: 8,
   },
   label: {
     fontSize: 16,
     color: '#172E44',
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
   activeDeco: {
     borderColor: '#172E44',

payment_sdk/src/components/PillContainer.tsx

@@ -11,17 +11,17 @@ type Props = {
 const options = [
   {
     label: 'Credit Card',
-    icon: '💳',
+    icon: require('../assets/images/cc.png'),
     color: '#e0e0e0',
   },
   {
     label: 'Konbini',
-    icon: '🏪',
+    icon: require('../assets/images/shop.png'),
     color: '#a5d6a7',
   },
   {
     label: 'Paypay',
-    icon: '💰',
+    icon: require('../assets/images/paypay.png'),
     color: '#ef9a9a',
   },
 ];

payment_sdk/src/components/Sheet.tsx

@@ -4,11 +4,9 @@ import React, {
   ForwardRefRenderFunction,
   useContext,
 } from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
-  Extrapolation,
-  interpolate,
   useAnimatedProps,
   useAnimatedStyle,
   useSharedValue,
@@ -57,7 +55,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
     ref,
     () => ({
       open: () => {
-        scrollTo(MAX_TRANSLATE_Y);
+        scrollTo(MAX_TRANSLATE_Y + 50);
 
         //TODO find a better way to handle bellow reset
         dispatch({
@@ -81,7 +79,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
     })
     .onUpdate((event) => {
       translateY.value = event.translationY + context.value.y;
-      translateY.value = Math.max(translateY.value, MAX_TRANSLATE_Y);
+      translateY.value = Math.max(translateY.value, MAX_TRANSLATE_Y + 50);
     })
     .onEnd(() => {
       if (translateY.value > -SCREEN_HEIGHT / 1) {
@@ -92,15 +90,7 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
     });
 
   const rSheetStyle = useAnimatedStyle(() => {
-    const borderRadius = interpolate(
-      translateY.value,
-      [MAX_TRANSLATE_Y + 50, MAX_TRANSLATE_Y],
-      [25, 5],
-      Extrapolation.CLAMP
-    );
-
     return {
-      borderRadius,
       transform: [{ translateY: translateY.value }],
     };
   });
@@ -131,9 +121,11 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
           <Animated.View>
             <View style={styles.line}>
               <Text style={styles.headerLabel}>Payment Options</Text>
-              <Text style={styles.crossBtn} onPress={() => scrollTo(0)}>
-                ✖️
-              </Text>
+              <TouchableOpacity
+                style={styles.crossBtn}
+                onPress={() => scrollTo(0)}>
+                <Image source={require('../assets/images/close.png')} />
+              </TouchableOpacity>
             </View>
           </Animated.View>
         </GestureDetector>
@@ -149,12 +141,12 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(0,0,0,0.6)",
   },
   bottomSheetContainer: {
-    height: SCREEN_HEIGHT,
+    height: SCREEN_HEIGHT - 85,
     width: "100%",
     backgroundColor: "white",
     position: "absolute",
     top: SCREEN_HEIGHT,
-    borderRadius: 25,
+    borderRadius: 0,
   },
   line: {
     flexDirection: "row",
@@ -176,6 +168,9 @@ const styles = StyleSheet.create({
     padding: 10,
     fontSize: 16,
   },
+  contentContainer: {
+    flex: 1,
+  }
 });
 
 export default React.forwardRef<SheetRefProps, SheetProps>(Sheet);

payment_sdk/src/components/SheetContent.tsx

@@ -7,6 +7,7 @@ import CardSection from "./sections/CardSection";
 import PayPaySection from "./sections/PayPaySection";
 import { StateContext } from "../state";
 import Loader from "./Loader";
+import SheetFooter from "./sections/SheetFooter";
 
 const SheetContent = () => {
   const { webViewLink, loading } = useContext(StateContext);
@@ -27,6 +28,7 @@ const SheetContent = () => {
       {selectedPill === 0 && <CardSection />}
       {selectedPill === 2 && <PayPaySection />}
       {renderLoading}
+      <SheetFooter />
     </ScrollView>
   );
 };

payment_sdk/src/components/sections/CardSection.tsx

@@ -56,6 +56,7 @@ export default CardSection;
 
 const styles = StyleSheet.create({
   cardContainer: {
+    position: 'relative',
     flex: 1,
   },
   cardNameContainer: {

payment_sdk/src/components/sections/KombiniSection.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+type Props = {}
+
+const KombiniSection = (props: Props) => {
+  return (
+    <View style={styles.container}>
+        <Text>Kombini Section</Text>
+    </View>
+  )
+}
+
+export default KombiniSection
+
+const styles = StyleSheet.create({
+    container:{
+        display: 'flex',
+        flex:1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})

payment_sdk/src/components/sections/SheetFooter.tsx

@@ -0,0 +1,33 @@
+import { Image, StyleSheet, Platform, View } from 'react-native'
+import React from 'react'
+
+type Props = {}
+
+const SheetFooter = (props: Props) => {
+  return (
+    <View style={styles.container}>
+      <Image source={require('../../assets/images/footer_image1.png')} />
+      <Image source={require('../../assets/images/footer_image2.png')} />
+    </View>
+  )
+}
+
+export default SheetFooter
+
+const styles = StyleSheet.create({
+    container:{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+       ...Platform.select({
+            ios: {
+                bottom: 48,
+            },
+            android: {
+                bottom: 32,
+            }
+       }),
+        marginHorizontal: 16,
+    }
+})