chore: SLA style issues

android/app/build.gradle

@@ -79,8 +79,8 @@ android {
         applicationId "com.chatwoot.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5180024
-        versionName "1.10.34"
+        versionCode 5180026
+        versionName "1.10.36"
     }
     lintOptions {
         checkReleaseBuilds false

ios/Chatwoot.xcodeproj/project.pbxproj

@@ -557,7 +557,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Chatwoot/Chatwoot.entitlements;
-				CURRENT_PROJECT_VERSION = 334;
+				CURRENT_PROJECT_VERSION = 336;
 				DEVELOPMENT_TEAM = L7YLMN4634;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Chatwoot/Info.plist;
@@ -566,7 +566,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.10.34;
+				MARKETING_VERSION = 1.10.36;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -591,15 +591,15 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Chatwoot/Chatwoot.entitlements;
-				CURRENT_PROJECT_VERSION = 334;
+				CURRENT_PROJECT_VERSION = 336;
 				DEVELOPMENT_TEAM = L7YLMN4634;
 				INFOPLIST_FILE = Chatwoot/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Chatwoot;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.10.34;
+				MARKETING_VERSION = 1.10.36;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "1.10.34",
+  "version": "1.10.36",
   "private": true,
   "scripts": {
     "android": "react-native run-android",

src/screens/Conversation/components/ConversationItem/ConversationItem.js

@@ -18,7 +18,7 @@ import AnalyticsHelper from 'helpers/AnalyticsHelper';
 import { CONVERSATION_EVENTS } from 'constants/analyticsEvents';
 
 import ConversationLabel from './ConversationLabels';
-import ConversationSLA from './ConversationSLA';
+
 import ConversationPriority from './ConversationPriority';
 import { selectors as contactSelectors } from 'reducer/contactSlice';
 
@@ -257,12 +257,7 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
                     {getTextSubstringWithEllipsis(typingUser, 25)}
                   </Text>
                 )}
-                <View style={styles.conversationAdditionalDetails}>
-                  <ConversationLabel conversationDetails={item} conversationId={id} />
-                  {item.sla_policy_id && (
-                    <ConversationSLA conversationDetails={item} conversationId={id} />
-                  )}
-                </View>
+                <ConversationLabel conversationDetails={item} conversationId={id} />
               </View>
             </View>
             <View style={styles.unreadTimestampContainer}>
@@ -329,10 +324,6 @@ const createStyles = theme => {
       justifyContent: 'space-between',
       alignItems: 'flex-start',
     },
-    conversationAdditionalDetails: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
     conversationMeta: {
       marginBottom: spacing.tiny,
       flexDirection: 'row',

src/screens/Conversation/components/ConversationItem/ConversationLabels.js

@@ -5,26 +5,29 @@ import { Text } from 'components';
 import { useSelector } from 'react-redux';
 import { View, StyleSheet } from 'react-native';
 import { labelsSelector } from 'reducer/labelSlice';
+import ConversationSLA from './ConversationSLA';
 
 const createStyles = theme => {
   const { spacing, colors } = theme;
   return StyleSheet.create({
-    cardLabelWrap: {
+    container: {
       marginTop: spacing.micro,
       paddingTop: spacing.tiny,
       flexDirection: 'row',
+      alignItems: 'center',
       flexWrap: 'wrap',
+      width: '100%',
+      gap: 4,
     },
     labelView: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginRight: 4,
-      marginBottom: 4,
       paddingHorizontal: 4,
       paddingVertical: 2,
       borderRadius: 4,
       borderWidth: 0.5,
       borderColor: colors.borderLight,
+      height: 20,
     },
   });
 };
@@ -45,8 +48,8 @@ const ConversationLabel = ({ conversationDetails, conversationId }) => {
   const getLabelStyle = color => {
     return {
       backgroundColor: color,
-      width: 8,
-      height: 8,
+      width: 7,
+      height: 7,
       borderRadius: 3,
       marginRight: 4,
     };
@@ -60,7 +63,10 @@ const ConversationLabel = ({ conversationDetails, conversationId }) => {
       : [];
 
   return (
-    <View style={styles.cardLabelWrap}>
+    <View style={styles.container}>
+      {conversationDetails?.sla_policy_id && (
+        <ConversationSLA conversationDetails={conversationDetails} />
+      )}
       {activeLabels.map(({ id, title, color }) => (
         <View style={styles.labelView} key={id}>
           <View style={[getLabelStyle(color)]} />

src/screens/Conversation/components/ConversationItem/ConversationSLA.js

@@ -2,19 +2,18 @@ import React, { useMemo, useEffect, useRef, useCallback, useState } from 'react'
 import { useTheme } from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import { Text, Icon } from 'components';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { Pressable } from 'components';
 import BottomSheetModal from 'components/BottomSheet/BottomSheet';
 import SLAMisses from './SLAMisses';
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import i18n from 'i18n';
 const REFRESH_INTERVAL = 60000;
 
 const createStyles = theme => {
-  const { spacing, colors } = theme;
+  const { colors } = theme;
   return StyleSheet.create({
     container: {
-      marginTop: spacing.micro,
-      paddingTop: spacing.tiny,
       flexDirection: 'row',
       flexWrap: 'wrap',
     },
@@ -32,15 +31,14 @@ const createStyles = theme => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      marginRight: 4,
-      marginBottom: 4,
       paddingVertical: 2,
       borderRadius: 4,
       borderWidth: 0.5,
       backgroundColor: colors.background,
       borderColor: colors.borderLight,
       gap: 4,
       paddingHorizontal: 4,
+      height: 20,
     },
     extendedSlaView: {
       height: 26,
@@ -131,7 +129,7 @@ const ConversationSLa = ({ conversationDetails, showExtendedInfo = false }) => {
   };
 
   return (
-    <TouchableOpacity
+    <Pressable
       style={[styles.container, showExtendedInfo && styles.extendedContainer]}
       onPress={toggleConversationSLAMissesModal}>
       <View style={[styles.slaView, showExtendedInfo && styles.extendedSlaView]}>
@@ -155,7 +153,7 @@ const ConversationSLa = ({ conversationDetails, showExtendedInfo = false }) => {
         closeFilter={closeConversationSLAMissesModal}
         children={<SLAMisses slaMissedEvents={conversationDetails.sla_events} />}
       />
-    </TouchableOpacity>
+    </Pressable>
   );
 };