UI Bug fixes

payment_sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@komoju/komoju-react-native",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "description": "degica payment SDK",
   "main": "dist/index.js",

payment_sdk/src/components/LightBox.tsx

@@ -1,27 +1,31 @@
 import React from "react";
 
-import { StyleSheet, Text, View } from "react-native";
+import { Image, StyleSheet, Text, View } from "react-native";
 
 import { useTranslation } from "react-i18next";
 
 import { ThemeSchemeType } from "@util/types";
 
+import Thunder from "@assets/images/thunder.png"
+
 import { resizeFonts, responsiveScale } from "@theme/scalling";
 import { useCurrentTheme } from "@theme/useCurrentTheme";
 
+
 type Props = {
   content: string;
-  icon?: string;
 };
 
-const LightBox = ({ content, icon }: Props) => {
+const LightBox = ({ content }: Props) => {
   const { t } = useTranslation();
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 
   return (
     <View style={styles.container}>
-      <View style={styles.iconWrapper}>{icon && <Text style={styles.icon}>{icon}</Text>}</View>
+      <View style={styles.iconWrapper}>
+        <Image source={Thunder} style={styles.icon} />
+      </View>
       <Text style={styles.content}>{t(content)}</Text>
     </View>
   );
@@ -37,13 +41,12 @@ const getStyles = (theme: ThemeSchemeType) => {
       flexDirection: "row",
       backgroundColor: theme.LIGHT_BOX,
       borderRadius: responsiveScale(8),
-      justifyContent: "center",
       alignItems: "center",
     },
     content: {
       fontSize: resizeFonts(16),
       color: theme.TEXT_COLOR,
-      flex: 0.9,
+      flex: 1,
     },
     iconWrapper: {
       marginRight: responsiveScale(8),
@@ -56,7 +59,8 @@ const getStyles = (theme: ThemeSchemeType) => {
       alignItems: 'center'
     },
     icon: {
-      fontSize: resizeFonts(20)
+      width: responsiveScale(18),
+      height: responsiveScale(18),
     }
   });
 

payment_sdk/src/components/sections/SimpleRedirectSection.tsx

@@ -38,7 +38,6 @@ const SimpleRedirectSection = ({ type }: SimpleRedirectSectionProps) => {
             <View style={styles.lbWrapper}>
                 <LightBox
                     content="LIGHT_BOX_CONTENT"
-                    icon="⚡️"
                 />
             </View>
             <View style={styles.btn}>

payment_sdk/src/components/sections/TransferFormSection.tsx

@@ -122,6 +122,7 @@ const TransferFormSection = ({ type }: TransferFormSectionProps) => {
       <View style={styles.inputContainer}>
         <Input
           value={transferFormFields?.email || ""}
+          autoCapitalize="none"
           label="EMAIL"
           placeholder="EXAMPLE_EMAIL"
           onChangeText={(text: string) => {

payment_sdk/src/theme/defaultColorTheme.ts

@@ -27,7 +27,7 @@ const lightTheme = {
     WHITE50: '#00000050',
     CARD_BACKGROUND: '#ffffff',
     CARD_BORDER: '#CAD6E1',
-    LIGHT_BOX: '#dbdbdb',
+    LIGHT_BOX: '#F3F7F9',
     CARD_SHADOW_IOS_COLOR: '#D9D9D9',
     CARD_SHADOW_ANDROID_COLOR: '#c4c2c2',
 };