ikualo-ui-kit-mobile 1.3.7 → 1.3.9

package/assets/styles/elements/buttons.ts

@@ -120,7 +120,7 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
   StyleSheet.create({
     'btn-light-small': {
       borderWidth: 1,
-      borderRadius: 8,
+      borderRadius: 36,
       maxWidth: 48,
       minWidth: 48,
       maxHeight: 48,
@@ -178,7 +178,7 @@ const getStylesBtnLightSmall = (theme: ITheme) =>
       color: theme.colors.icon_disabled,
     },
     'btn-light-small-label--active': {
-      color: theme.colors.freezed,
+      color: theme.colors.text_btn,
     },
     'btn-light-small-icon': {
       flexDirection: 'row',
@@ -234,11 +234,12 @@ const getStylesButtonActionCircle = (theme: ITheme) =>
     },
 
     'btn-text-item': {
-      fontFamily: 'MontserratSemiBold',
+      fontFamily: 'MontserratRegular',
       fontSize: 10,
       lineHeight: 15,
       color: theme?.colors.text_p,
       textAlign: 'center',
+      marginTop: 5,
     },
   });
 

package/assets/styles/elements/cards.ts

@@ -4,21 +4,17 @@ const { height } = Dimensions.get('window');
 export const getStylesCards = (theme: ITheme) =>
   StyleSheet.create({
     card: {
-      borderRadius: 8,
       backgroundColor: theme.colors.background_card,
       padding: 16,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
+      borderRadius: 18,
+      boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.06)',
     },
     'card-interactive': {
       flexDirection: 'row',
       justifyContent: 'space-between',
       backgroundColor: theme.colors.background_card,
-      borderColor: theme.colors.border,
-      padding: 16,
-      borderRadius: 4,
-      borderWidth: 1,
-      marginVertical: 4,
+      paddingTop: 16,
+      paddingBottom: 16,
     },
     'card-interactive-icon': {
       marginHorizontal: 16,

package/package.json

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

package/src/elements/buttons/BtnLightSmall.tsx

@@ -1,4 +1,3 @@
-
 import { ActivityIndicator, Button } from 'react-native-paper';
 import { getStylesBtnLightSmall } from '../../../assets/styles/elements/buttons';
 import { View } from 'react-native';
@@ -13,9 +12,13 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
   const stylesBtnLightSmall = getStylesBtnLightSmall(theme);
 
   const { onPress, icon, disabled = false, active, isLoading, text, transparent } = props;
-  const color = active ?
-    stylesBtnLightSmall['btn-light-small--active'].borderColor :
-    disabled ? theme.colors.border_disabled : stylesBtnLightSmall['btn-light-small--primary'].borderColor
+  const color = active
+    ? stylesBtnLightSmall['btn-light-small--active'].borderColor
+    : disabled
+    ? theme.colors.border_disabled
+    : stylesBtnLightSmall['btn-light-small--primary'].borderColor;
+
+  const colorBtnText = active ? theme.colors.text_btn : theme.colors.icon_disabled;
 
   return (
     <View style={{ alignItems: 'center', width: 'auto' }}>
@@ -24,33 +27,42 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
           stylesBtnLightSmall['btn-light-small'],
           active && stylesBtnLightSmall['btn-light-small--active'],
           disabled && stylesBtnLightSmall['btn-light-small--disabled'],
-          !active && !disabled && stylesBtnLightSmall[`btn-light-small--${transparent ? 'transparent' : 'primary'}`],
+          !active &&
+            !disabled &&
+            stylesBtnLightSmall[`btn-light-small--${transparent ? 'transparent' : 'primary'}`],
         ]}
         contentStyle={stylesBtnLightSmall['btn-light-small-content']}
         labelStyle={[
           (stylesBtnLightSmall['btn-light-small-label'],
-            active && stylesBtnLightSmall['btn-light-small-label--active'],
-            disabled && stylesBtnLightSmall['btn-light-small-label--disabled']),
+          active && stylesBtnLightSmall['btn-light-small-label--active'],
+          disabled && stylesBtnLightSmall['btn-light-small-label--disabled']),
         ]}
         onPress={onPress}
         disabled={disabled}
       >
-        {!isLoading ?
+        {!isLoading ? (
           <View style={stylesBtnLightSmall['btn-light-small-icon']}>
-            {cloneElement(icon, { size: 24, color: color, style: stylesBtnLightSmall['btn-light-small-icon--cloned'] })}
-          </View> :
+            {cloneElement(icon, {
+              size: 24,
+              color: color,
+              style: stylesBtnLightSmall['btn-light-small-icon--cloned'],
+            })}
+          </View>
+        ) : (
           <ActivityIndicator size="small" color={color} />
-        }
+        )}
       </Button>
-      {text &&
+      {text && (
         <Text
-          style={{ textAlign: 'center' }}
-          color={color}
+          style={{ textAlign: 'center', width: 60, marginTop: 5 }}
+          color={colorBtnText}
           lineHeight={15}
-          fontWeight='MontserratSemiBold600'
-          fontSize={10}>{text}
-        </Text>}
+          fontWeight="MontserratSemiBold600"
+          fontSize={10}
+        >
+          {text}
+        </Text>
+      )}
     </View>
-
   );
 };