From 581fbd440a0d0d532412f2a86c2b667531276f2b Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Wed, 30 Sep 2026 23:32:26 -0300
Subject: [PATCH 1/3] feat: match date separator with web

---
 app/containers/Separator/MessageSeparator.tsx | 46 ++++++++-----------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/app/containers/Separator/MessageSeparator.tsx b/app/containers/Separator/MessageSeparator.tsx
index 5a4e1bf519..88661e37aa 100644
--- a/app/containers/Separator/MessageSeparator.tsx
+++ b/app/containers/Separator/MessageSeparator.tsx
@@ -2,7 +2,6 @@ import { type ReactElement } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import I18n from '~/i18n';
-import { formatLongDate } from '~/lib/dayjs';
 import sharedStyles from '~/views/Styles';
 import { useTheme } from '~/theme';
 import DateSeparator from './DateSeparator';
@@ -10,43 +9,34 @@ import { separatorStyles } from './styles';
 
 const styles = StyleSheet.create({
 	text: {
-		fontSize: 14,
-		...sharedStyles.textMedium
-	},
-	marginRight: {
-		marginRight: 14
-	},
-	marginHorizontal: {
-		marginHorizontal: 14
+		fontSize: 12,
+		lineHeight: 16,
+		marginLeft: 8,
+		...sharedStyles.textBold
 	}
 });
 
-const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): ReactElement | null => {
+const UnreadSeparator = (): ReactElement => {
 	const { colors } = useTheme();
 
+	return (
+		<View style={separatorStyles.container}>
+			<View style={[separatorStyles.line, { backgroundColor: colors.strokeError }]} />
+			<Text style={[styles.text, { color: colors.fontDanger }]}>{I18n.t('unread_messages')}</Text>
+		</View>
+	);
+};
+
+const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): ReactElement | null => {
 	if (!ts && !unread) {
 		return null;
 	}
 
-	const unreadLine = { backgroundColor: colors.buttonBackgroundDangerDefault };
-	const unreadText = { color: colors.fontDanger };
-	if (ts && unread) {
-		return (
-			<View style={separatorStyles.container}>
-				<Text style={[styles.text, unreadText]}>{I18n.t('unread_messages')}</Text>
-				<View style={[separatorStyles.line, unreadLine, styles.marginHorizontal]} />
-				<Text style={[styles.text, unreadText]}>{formatLongDate(ts)}</Text>
-			</View>
-		);
-	}
-	if (ts) {
-		return <DateSeparator ts={ts} />;
-	}
 	return (
-		<View style={separatorStyles.container}>
-			<Text style={[styles.text, unreadText, styles.marginRight]}>{I18n.t('unread_messages')}</Text>
-			<View style={[separatorStyles.line, unreadLine]} />
-		</View>
+		<>
+			{ts ? <DateSeparator ts={ts} /> : null}
+			{unread ? <UnreadSeparator /> : null}
+		</>
 	);
 };
 

From 8f89e7b1e64ed148a5935f0f2e30f3fbb95b6a72 Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Wed, 30 Sep 2026 23:32:33 -0300
Subject: [PATCH 2/3] test

---
 .../__snapshots__/Message.test.tsx.snap       | 268 ++++++++++++------
 1 file changed, 188 insertions(+), 80 deletions(-)

diff --git a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
index d61b74ca5d..1c3a3eaebb 100644
--- a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
@@ -23090,34 +23090,67 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
     </ExternalKeyboardView>
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "margin": 12,
-        }
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "margin": 12,
+          },
+          {
+            "gap": 12,
+          },
+        ]
       }
     >
-      <Text
+      <View
         style={
           [
             {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 14,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "500",
-              "textAlign": "left",
+              "flex": 1,
+              "height": 1,
             },
             {
-              "color": "#D40C26",
+              "backgroundColor": "#EBECEF",
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "borderRadius": 16,
+              "paddingHorizontal": 8,
+              "paddingVertical": 2,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
             },
           ]
         }
       >
-        unread
-      </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "700",
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          November 10, 2017
+        </Text>
+      </View>
       <View
         style={
           [
@@ -23126,10 +23159,30 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
               "height": 1,
             },
             {
-              "backgroundColor": "#EC0D2A",
+              "backgroundColor": "#EBECEF",
             },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "margin": 12,
+        }
+      }
+    >
+      <View
+        style={
+          [
             {
-              "marginHorizontal": 14,
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
@@ -23140,11 +23193,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
@@ -23153,7 +23208,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
           ]
         }
       >
-        November 10, 2017
+        unread
       </Text>
     </View>
     <ExternalKeyboardView
@@ -23621,43 +23676,42 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
         }
       }
     >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
+            },
+          ]
+        }
+      />
       <Text
         style={
           [
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
               "color": "#D40C26",
             },
-            {
-              "marginRight": 14,
-            },
           ]
         }
       >
         unread
       </Text>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EC0D2A",
-            },
-          ]
-        }
-      />
     </View>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -25331,34 +25385,67 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
     </ExternalKeyboardView>
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "margin": 12,
-        }
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "margin": 12,
+          },
+          {
+            "gap": 12,
+          },
+        ]
       }
     >
-      <Text
+      <View
         style={
           [
             {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 14,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "500",
-              "textAlign": "left",
+              "flex": 1,
+              "height": 1,
             },
             {
-              "color": "#D40C26",
+              "backgroundColor": "#EBECEF",
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "borderRadius": 16,
+              "paddingHorizontal": 8,
+              "paddingVertical": 2,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
             },
           ]
         }
       >
-        unread
-      </Text>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "700",
+                "textAlign": "left",
+              },
+              {
+                "color": "#1F2329",
+              },
+            ]
+          }
+        >
+          November 10, 2017
+        </Text>
+      </View>
       <View
         style={
           [
@@ -25367,10 +25454,30 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
               "height": 1,
             },
             {
-              "backgroundColor": "#EC0D2A",
+              "backgroundColor": "#EBECEF",
             },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "margin": 12,
+        }
+      }
+    >
+      <View
+        style={
+          [
             {
-              "marginHorizontal": 14,
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
@@ -25381,11 +25488,13 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
@@ -25394,7 +25503,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
           ]
         }
       >
-        November 10, 2017
+        unread
       </Text>
     </View>
     <ExternalKeyboardView
@@ -25862,43 +25971,42 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
         }
       }
     >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "height": 1,
+            },
+            {
+              "backgroundColor": "#EC0D2A",
+            },
+          ]
+        }
+      />
       <Text
         style={
           [
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontVariant": [
                 "tabular-nums",
               ],
-              "fontWeight": "500",
+              "fontWeight": "700",
+              "lineHeight": 16,
+              "marginLeft": 8,
               "textAlign": "left",
             },
             {
               "color": "#D40C26",
             },
-            {
-              "marginRight": 14,
-            },
           ]
         }
       >
         unread
       </Text>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EC0D2A",
-            },
-          ]
-        }
-      />
     </View>
     <ExternalKeyboardView
       canBeFocused={true}

From c662c9044142711c70b1b8ae5ad4829c8e380df7 Mon Sep 17 00:00:00 2001
From: OtavioStasiak <otaviostasiakmusic@outlook.com>
Date: Thu, 1 Oct 2026 19:53:27 -0300
Subject: [PATCH 3/3] match unread separator with web

---
 app/containers/Separator/MessageSeparator.tsx |  29 ++-
 .../__snapshots__/Message.test.tsx.snap       | 184 +++++++-----------
 2 files changed, 92 insertions(+), 121 deletions(-)

diff --git a/app/containers/Separator/MessageSeparator.tsx b/app/containers/Separator/MessageSeparator.tsx
index 88661e37aa..bd20d746f2 100644
--- a/app/containers/Separator/MessageSeparator.tsx
+++ b/app/containers/Separator/MessageSeparator.tsx
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import I18n from '~/i18n';
 import sharedStyles from '~/views/Styles';
 import { useTheme } from '~/theme';
-import DateSeparator from './DateSeparator';
+import DateSeparator, { DateSeparatorLabel } from './DateSeparator';
 import { separatorStyles } from './styles';
 
 const styles = StyleSheet.create({
@@ -13,15 +13,27 @@ const styles = StyleSheet.create({
 		lineHeight: 16,
 		marginLeft: 8,
 		...sharedStyles.textBold
+	},
+	dateLabel: {
+		marginHorizontal: 12
 	}
 });
 
-const UnreadSeparator = (): ReactElement => {
+const UnreadSeparator = ({ ts }: { ts?: Date | string | null }): ReactElement => {
 	const { colors } = useTheme();
+	const lineStyle = { backgroundColor: colors.strokeError };
 
 	return (
 		<View style={separatorStyles.container}>
-			<View style={[separatorStyles.line, { backgroundColor: colors.strokeError }]} />
+			<View style={[separatorStyles.line, lineStyle]} />
+			{ts ? (
+				<>
+					<View style={styles.dateLabel}>
+						<DateSeparatorLabel ts={ts} />
+					</View>
+					<View style={[separatorStyles.line, lineStyle]} />
+				</>
+			) : null}
 			<Text style={[styles.text, { color: colors.fontDanger }]}>{I18n.t('unread_messages')}</Text>
 		</View>
 	);
@@ -32,12 +44,11 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 		return null;
 	}
 
-	return (
-		<>
-			{ts ? <DateSeparator ts={ts} /> : null}
-			{unread ? <UnreadSeparator /> : null}
-		</>
-	);
+	if (unread) {
+		return <UnreadSeparator ts={ts} />;
+	}
+
+	return <DateSeparator ts={ts!} />;
 };
 
 export default MessageSeparator;
diff --git a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
index 1c3a3eaebb..de402e89cb 100644
--- a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
@@ -23090,16 +23090,11 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
     </ExternalKeyboardView>
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "margin": 12,
-          },
-          {
-            "gap": 12,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "margin": 12,
+        }
       }
     >
       <View
@@ -23110,70 +23105,55 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
               "height": 1,
             },
             {
-              "backgroundColor": "#EBECEF",
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
       />
       <View
         style={
-          [
-            {
-              "borderRadius": 16,
-              "paddingHorizontal": 8,
-              "paddingVertical": 2,
-            },
-            {
-              "backgroundColor": "#E4E7EA",
-            },
-          ]
+          {
+            "marginHorizontal": 12,
+          }
         }
       >
-        <Text
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 14,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
+                "borderRadius": 16,
+                "paddingHorizontal": 8,
+                "paddingVertical": 2,
               },
               {
-                "color": "#1F2329",
+                "backgroundColor": "#E4E7EA",
               },
             ]
           }
         >
-          November 10, 2017
-        </Text>
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "700",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            November 10, 2017
+          </Text>
+        </View>
       </View>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      />
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "margin": 12,
-        }
-      }
-    >
       <View
         style={
           [
@@ -25385,16 +25365,11 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
     </ExternalKeyboardView>
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "margin": 12,
-          },
-          {
-            "gap": 12,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "margin": 12,
+        }
       }
     >
       <View
@@ -25405,70 +25380,55 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
               "height": 1,
             },
             {
-              "backgroundColor": "#EBECEF",
+              "backgroundColor": "#EC0D2A",
             },
           ]
         }
       />
       <View
         style={
-          [
-            {
-              "borderRadius": 16,
-              "paddingHorizontal": 8,
-              "paddingVertical": 2,
-            },
-            {
-              "backgroundColor": "#E4E7EA",
-            },
-          ]
+          {
+            "marginHorizontal": 12,
+          }
         }
       >
-        <Text
+        <View
           style={
             [
               {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 14,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
+                "borderRadius": 16,
+                "paddingHorizontal": 8,
+                "paddingVertical": 2,
               },
               {
-                "color": "#1F2329",
+                "backgroundColor": "#E4E7EA",
               },
             ]
           }
         >
-          November 10, 2017
-        </Text>
+          <Text
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 14,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "700",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                },
+              ]
+            }
+          >
+            November 10, 2017
+          </Text>
+        </View>
       </View>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-              "height": 1,
-            },
-            {
-              "backgroundColor": "#EBECEF",
-            },
-          ]
-        }
-      />
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "margin": 12,
-        }
-      }
-    >
       <View
         style={
           [