Redesign settings

front/components/UI/SeparatorBase.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  line: {
+    flex: 1,
+    height: 2,
+    backgroundColor: 'white',
+  },
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  text: {
+    color: 'white',
+    paddingHorizontal: 16,
+  },
+});
+
+interface SeparatorBaseProps {
+    children: ReactNode;
+}
+
+const SeparatorBase: FunctionComponent<SeparatorBaseProps> = ({children}) => (
+  <View style={styles.container}>
+    <View style={styles.line} />
+    <Text style={styles.text}>{children}</Text>
+    <View style={styles.line} />
+  </View>
+);
+
+export default SeparatorBase;