@controleonline/ui-customers 1.0.84 → 1.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-customers",
-  "version": "1.0.84",
+  "version": "1.0.86",
   "author": "ControleOnline",
   "description": "ControleOnline customers Quasar UI Component",
   "license": "MIT",

package/src/react/components/tabs/MediaTab.js

@@ -7,7 +7,6 @@ import {
 } from 'react-native';
 import { useStore } from '@store';
 import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
-import DefaultFile from '@controleonline/ui-default/src/react/components/files/DefaultFile';
 import { extractFileId } from '@controleonline/ui-default/src/react/components/upload/fileUpload';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
@@ -215,46 +214,6 @@ const MediaTab = ({ client, onChanged = null }) => {
                     },
                   ]}
                 >
-                  <View
-                    style={[
-                      styles.mediaPreviewFrame,
-                      styles.mediaPreviewTransparencyGrid,
-                      {
-                        borderColor: withOpacity(palette.primary || '#2563EB', 0.14),
-                      },
-                    ]}>
-                    {(() => {
-                      const rawFile = currentMedia?.file;
-                      const fileId = extractFileId(rawFile);
-                      const file =
-                        rawFile && typeof rawFile === 'object' && !Array.isArray(rawFile)
-                          ? rawFile
-                          : fileId
-                            ? {id: fileId, '@id': `/files/${fileId}`}
-                            : null;
-                      if (!file) {
-                        return (
-                          <View style={styles.mediaEmptyState}>
-                            <Text
-                              style={[
-                                styles.mediaEmptyText,
-                                {color: palette.textSecondary || '#64748B'},
-                              ]}>
-                              Sem imagem
-                            </Text>
-                          </View>
-                        );
-                      }
-                      return (
-                        <DefaultFile
-                          file={file}
-                          company={client}
-                          resizeMode="cover"
-                          style={styles.mediaPreviewImage}
-                        />
-                      );
-                    })()}
-                  </View>
                   <DefaultUpload
                     relationStoreName="people"
                     relationField="people"
@@ -360,38 +319,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
   },
-  // app-community#813: preview 320x320
-  mediaPreviewFrame: {
-    width: 320,
-    height: 320,
-    maxWidth: 320,
-    alignSelf: 'center',
-    borderRadius: 14,
-    borderWidth: 1,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  mediaPreviewTransparencyGrid: {
-    // RN StyleSheet (web) rejects multi-value backgroundPosition / CSS backgroundImage gradients.
-    // Keep solid preview background; checkerboard was cosmetic only.
-    backgroundColor: '#F8FAFC',
-  },
-  mediaPreviewImage: {
-    width: 320,
-    height: 320,
-  },
-  mediaEmptyState: {
-    width: 320,
-    height: 320,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  mediaEmptyText: {
-    fontSize: 13,
-    fontWeight: '500',
-  },
   mediaHelpText: {
     fontSize: 12,
     lineHeight: 18,

package/src/react/pages/details.js

@@ -488,10 +488,11 @@ const ClientDetails = ({ route, navigation }) => {
             imageUrl={clientAvatarImageUrl}
             name={String(client?.name || '').replace(/\s+/g, ' ').trim()}
             size={64}
-            backgroundColor={themeColors.buttonBackground}
-            borderColor={themeColors.buttonText}
-            borderWidth={3}
-            textColor={themeColors.buttonText}
+            backgroundColor={detailsStyles.listAvatarBrand.backgroundColor}
+            borderColor={detailsStyles.listAvatarBrand.borderColor}
+            borderWidth={1}
+            textColor={detailsStyles.listAvatarText.color}
+            iconColor={detailsStyles.listAvatarText.color}
             useGravatar={false}
             usePeopleImage={false}
           />

package/src/react/styles/details.js

@@ -10,6 +10,8 @@ const resolvePalette = themeColors => ({
   cardBorder: themeColors.cardBorder,
   cardText: themeColors.cardText,
   cardIcon: themeColors.cardIcon,
+  cardIconBackground: themeColors.cardIconBackground || themeColors.cardBackground,
+  cardIconColor: themeColors.cardIconColor || themeColors.cardIcon || themeColors.listItemText,
   cardShadow: themeColors.cardShadow,
   listItemBackground: themeColors.listItemBackground,
   listItemText: themeColors.listItemText,
@@ -324,12 +326,12 @@ export const createDetailsStyles = themeColors => {
     },
 
     listAvatarBrand: {
-      backgroundColor: palette.buttonBackground,
-      borderColor: palette.buttonText,
+      backgroundColor: palette.cardIconBackground,
+      borderColor: palette.cardBorder || palette.cardIconBackground,
     },
 
     listAvatarText: {
-      color: palette.buttonText,
+      color: palette.cardIconColor,
     },
 
     locationButton: {