fix: message status icon height and width issue (#3406)

Author: khushal87

package/src/components/Message/MessageSimple/MessageStatus.tsx

@@ -68,35 +68,33 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     <View style={[styles.container, container]}>
       {read ? (
         <CheckAll
-          height={20}
+          height={16}
           stroke={semantics.accentPrimary}
-          width={20}
+          width={16}
           accessibilityLabel='Read'
           {...checkAllIcon}
         />
       ) : delivered ? (
         <CheckAll
           stroke={semantics.chatTextTimestamp}
-          height={20}
-          width={20}
+          height={16}
+          width={16}
           accessibilityLabel='Delivered'
           {...checkAllIcon}
         />
       ) : sending ? (
-        <View style={styles.sendingContainer}>
-          <Time
-            stroke={semantics.chatTextTimestamp}
-            height={12}
-            width={12}
-            accessibilityLabel='Sending'
-            {...timeIcon}
-          />
-        </View>
+        <Time
+          stroke={semantics.chatTextTimestamp}
+          height={16}
+          width={16}
+          accessibilityLabel='Sending'
+          {...timeIcon}
+        />
       ) : sent ? (
         <Check
           stroke={semantics.chatTextTimestamp}
-          height={20}
-          width={20}
+          height={16}
+          width={16}
           accessibilityLabel='Sent'
           {...checkIcon}
         />
@@ -209,9 +207,7 @@ const useStyles = () => {
       container: {
         alignItems: 'center',
         flexDirection: 'row',
-      },
-      sendingContainer: {
-        paddingRight: primitives.spacingXxs,
+        gap: primitives.spacingXxs,
       },
     });
   }, [semantics]);

package/src/icons/Check.tsx

@@ -5,9 +5,9 @@ import Svg, { Path } from 'react-native-svg';
 import { IconProps } from './utils/base';
 
 export const Check = ({ height, width, ...rest }: IconProps) => (
-  <Svg viewBox='0 0 20 20' fill='none' height={height} width={width}>
+  <Svg viewBox='0 0 16 16' fill='none' height={height} width={width}>
     <Path
-      d='M6.45833 10.8856L9.11458 13.5418L13.5417 6.4585'
+      d='M3.75 9.0625L6.9375 12.25L12.25 3.75'
       strokeWidth={1.5}
       strokeLinecap='round'
       strokeLinejoin='round'

package/src/icons/CheckAll.tsx

@@ -5,9 +5,9 @@ import Svg, { Path } from 'react-native-svg';
 import { IconProps } from './utils/base';
 
 export const CheckAll = ({ height, width, ...rest }: IconProps) => (
-  <Svg viewBox='0 0 20 20' fill='none' height={height} width={width}>
+  <Svg viewBox='0 0 16 16' fill='none' height={height} width={width}>
     <Path
-      d='M4.79167 10.8856L7.44792 13.5418L11.875 6.4585M10.7813 13.5418L15.2083 6.4585'
+      d='M1.75 9.0625L4.9375 12.25L10.25 3.75M8.9375 12.25L14.25 3.75'
       strokeWidth={1.5}
       strokeLinecap='round'
       strokeLinejoin='round'

package/src/icons/Time.tsx

@@ -5,9 +5,9 @@ import Svg, { Path } from 'react-native-svg';
 import { IconProps } from './utils/base';
 
 export const Time = ({ height, width, ...rest }: IconProps) => (
-  <Svg viewBox='0 0 12 12' fill='none' height={height} width={width}>
+  <Svg viewBox='0 0 16 16' fill='none' height={height} width={width}>
     <Path
-      d='M6 3.875V6L7.375 7.375M10.625 6C10.625 8.5543 8.5543 10.625 6 10.625C3.44568 10.625 1.375 8.5543 1.375 6C1.375 3.44568 3.44568 1.375 6 1.375C8.5543 1.375 10.625 3.44568 10.625 6Z'
+      d='M8.00001 5.16659V7.99992L9.83334 9.83325M14.1667 7.99992C14.1667 11.4057 11.4057 14.1666 8.00001 14.1666C4.59426 14.1666 1.83334 11.4057 1.83334 7.99992C1.83334 4.59417 4.59426 1.83325 8.00001 1.83325C11.4057 1.83325 14.1667 4.59417 14.1667 7.99992Z'
       strokeWidth={1.5}
       strokeLinecap='round'
       strokeLinejoin='round'