Use system separator color in Separator component (#757)

* border color is too distracting and does not look "native". Now we using system separator color to provide "native" experience :-)

src/components/Separator.tsx

@@ -22,7 +22,7 @@ const ComponentSeparator: React.FC<Props> = ({
         style,
         {
           backgroundColor: colors.backgroundDefault,
-          borderTopColor: colors.border,
+          borderTopColor: colors.separator,
           borderTopWidth: 1,
           marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
           marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight

src/utils/styles/themes.ts

@@ -1,4 +1,5 @@
 import { DarkTheme, DefaultTheme } from '@react-navigation/native'
+import { Platform, PlatformColor } from 'react-native'
 
 export type Theme = 'light' | 'dark_lighter' | 'dark_darker'
 
@@ -16,6 +17,7 @@ export type ColorDefinitions =
   | 'backgroundOverlayDefault'
   | 'backgroundOverlayInvert'
   | 'border'
+  | 'separator'
   | 'shimmerDefault'
   | 'shimmerHighlight'
 
@@ -94,6 +96,33 @@ const themeColors: {
     dark_darker: 'rgb(90, 90, 90)'
   },
 
+  separator: {
+    light: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(180, 180, 180)'
+      }),
+      'rgb(180, 180, 180)'
+    ) as unknown as string,
+    dark_lighter: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(90, 90, 90)'
+      }),
+      'rgb(90, 90, 90)'
+    ) as unknown as string,
+    dark_darker: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(90, 90, 90)'
+      }),
+      'rgb(90, 90, 90)'
+    ) as unknown as string
+  },
+
   shimmerDefault: {
     light: 'rgba(25, 25, 25, 0.05)',
     dark_lighter: 'rgba(250, 250, 250, 0.05)',