ikualo-ui-kit-mobile 1.4.0 → 1.4.2

package/assets/styles/elements/buttons.ts

@@ -230,7 +230,7 @@ const getStylesButtonActionCircle = (theme: ITheme) =>
       justifyContent: 'center',
       borderRadius: 50,
       alignItems: 'center',
-      backgroundColor: theme?.colors.primary_50,
+      backgroundColor: theme?.colors.background_focus,
     },
 
     'btn-text-item': {

package/assets/styles/elements/cards.ts

@@ -15,6 +15,8 @@ export const getStylesCards = (theme: ITheme) =>
       backgroundColor: theme.colors.background_card,
       paddingTop: 16,
       paddingBottom: 16,
+      paddingRight: 16,
+      borderRadius: 8,
     },
     'card-interactive-icon': {
       marginHorizontal: 16,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/dialogs/DialogDown.tsx

@@ -54,7 +54,7 @@ export const DialogDown = (props: IDialogDown) => {
             {image ? (
               <View style={stylesDialog['dialog-img']}>{image}</View>
             ) : (
-              <View style={{ marginTop: image ? 0 : -5, position: 'relative' }}>
+              <View style={{ marginTop: image ? 0 : -16, position: 'relative' }}>
                 <Text style={[stylesDialog['dialog-title']]}>{title}</Text>
               </View>
             )}

package/src/elements/dialogs/DialogGeneral.tsx

@@ -1,7 +1,15 @@
 import { Text, Button, Icon } from 'react-native-paper';
 import { BtnOutlined, BtnContained } from '../../';
 import { getStylesDialog } from '../../../assets/styles/elements/dialog';
-import { Keyboard, StyleProp, TextStyle, TouchableWithoutFeedback, View, ViewStyle, Modal } from 'react-native';
+import {
+  Keyboard,
+  StyleProp,
+  TextStyle,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+  Modal,
+} from 'react-native';
 import React from 'react';
 import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
 import useStore from '../../store';
@@ -29,30 +37,44 @@ export const DialogGeneral = (props: IFDialogIcon) => {
   const theme = useStore().theme;
   const stylesDialog = getStylesDialog(theme);
 
-  const { isLoading, isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm, textStyle, additionalTextStyle, additionalText, isDisabled, children, styleBtnContainer, showClose } = props;
+  const {
+    isLoading,
+    isVisible,
+    title,
+    text,
+    textCancel,
+    textOk,
+    icon,
+    onDismiss,
+    onConfirm,
+    textStyle,
+    additionalTextStyle,
+    additionalText,
+    isDisabled,
+    children,
+    styleBtnContainer,
+    showClose,
+  } = props;
   const icons = {
     error: <MaterialIcons name="delete-forever" size={24} color={theme.colors.error} />,
     warning: <FontAwesome name="warning" size={24} color={theme.colors.warning} />,
     info: <MaterialIcons name="info-outline" size={24} color={theme.colors.info} />,
-    success: <MaterialIcons name="check-circle" size={24} color={theme.colors.success} />
-  }
-  const IconDelete = <View style={[stylesDialog['dialog-icon'], icon ? stylesDialog[`dialog-icon--${icon}`] : null]}>
-    {icon && icons[icon]}
-  </View>
+    success: <MaterialIcons name="check-circle" size={24} color={theme.colors.success} />,
+  };
+  const IconDelete = (
+    <View style={[stylesDialog['dialog-icon'], icon ? stylesDialog[`dialog-icon--${icon}`] : null]}>
+      {icon && icons[icon]}
+    </View>
+  );
   const handleDismissKeyboard = () => {
     Keyboard.dismiss();
   };
   return (
-    <Modal
-      visible={isVisible}
-      transparent={true}
-      animationType="fade"
-      onRequestClose={onDismiss}
-    >
+    <Modal visible={isVisible} transparent={true} animationType="fade" onRequestClose={onDismiss}>
       <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
         <View style={stylesDialog.modalBackground}>
           <View style={stylesDialog.dialog}>
-            {showClose &&
+            {showClose && (
               <Button onPress={onDismiss} style={stylesDialog['dialog-general-close']}>
                 <Icon
                   source="close"
@@ -60,27 +82,32 @@ export const DialogGeneral = (props: IFDialogIcon) => {
                   size={stylesDialog['dialog-down-close-icon'].width}
                 />
               </Button>
-            }
-            {icon && (
-              <View style={stylesDialog['dialog-container-icon']}>
-                {IconDelete}
-              </View>
             )}
-            <Text style={[stylesDialog['dialog-title'], !text && !children && stylesDialog['dialog-only-title']]}>{title}</Text>
-            <Text style={textStyle || stylesDialog['dialog-text']}>
-              {text}
+            {icon && <View style={stylesDialog['dialog-container-icon']}>{IconDelete}</View>}
+            <Text
+              style={[
+                stylesDialog['dialog-title'],
+                { textAlign: 'center' },
+                !text && !children && stylesDialog['dialog-only-title'],
+              ]}
+            >
+              {title}
             </Text>
+            <Text style={textStyle || stylesDialog['dialog-text']}>{text}</Text>
             {children}
             <View style={stylesDialog['dialog-actions']}>
               {textCancel && (
-                <BtnOutlined color={icon === 'error' ? 'error' : 'primary'}
-                  size='sm'
-                  onPress={onDismiss} text={textCancel} />
+                <BtnOutlined
+                  color={icon === 'error' ? 'error' : 'primary'}
+                  size="sm"
+                  onPress={onDismiss}
+                  text={textCancel}
+                />
               )}
               {textOk && (
                 <BtnContained
                   color={icon === 'error' ? 'error' : 'primary'}
-                  size='sm'
+                  size="sm"
                   isLoading={isLoading}
                   onPress={onConfirm}
                   text={textOk}
@@ -93,4 +120,4 @@ export const DialogGeneral = (props: IFDialogIcon) => {
       </TouchableWithoutFeedback>
     </Modal>
   );
-};
+};