[add]: LinkBase && PopupCC, starting theme management (light and dark) and translation

front/components/UI/SeparatorBase.tsx

@@ -1,11 +1,12 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { Text, useTheme } from 'native-base';
+import useColorScheme from '../../hooks/colorScheme';
 
 const styles = StyleSheet.create({
 	line: {
 		flex: 1,
 		height: 2,
-		backgroundColor: 'white',
 	},
 	container: {
 		width: '100%',
@@ -14,7 +15,6 @@ const styles = StyleSheet.create({
 		marginVertical: 2,
 	},
 	text: {
-		color: 'white',
 		paddingHorizontal: 16,
 	},
 });
@@ -23,12 +23,18 @@ 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>
-);
+const SeparatorBase: FunctionComponent<SeparatorBaseProps> = ({ children }) => {
+	const colorScheme = useColorScheme();
+	const { colors } = useTheme();
+	const color = colorScheme === 'light' ? colors.black[500] : '#FFFFFF';
+	
+	return (
+		<View style={styles.container}>
+			<View style={[styles.line, {backgroundColor: color}]} />
+			<Text style={styles.text}>{children}</Text>
+			<View style={[styles.line, {backgroundColor: color}]} />
+		</View>
+	);
+}
 
 export default SeparatorBase;