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

front/components/GtkUI/Element.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { ElementProps } from './ElementTypes';
 import { RawElement } from './RawElement';
-import { View, Column } from 'native-base';
+import { View, Column, useTheme } from 'native-base';
 import { StyleSheet } from 'react-native';
 import InteractiveBase from '../UI/InteractiveBase';
 
 export const Element = <T extends ElementProps>(props: T) => {
 	let actionFunction: (() => void) | null | undefined = null;
 	const [dropdownValue, setDropdownValue] = useState(false);
+	const { colors } = useTheme();
 
 	switch (props.type) {
 		case 'text':
@@ -32,28 +33,28 @@ export const Element = <T extends ElementProps>(props: T) => {
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		onHover: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(32, 32, 40, 0.50)',
+			backgroundColor: colors.coolGray[700],
 		},
 		onPressed: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 		Disabled: {
 			scale: 1,
 			shadowOpacity: 0,
 			shadowRadius: 0,
 			elevation: 0,
-			backgroundColor: 'rgba(16, 16, 20, 0.50)',
+			backgroundColor: colors.coolGray[500],
 		},
 	});
 
@@ -70,7 +71,7 @@ export const Element = <T extends ElementProps>(props: T) => {
 					<RawElement element={props} />
 				</InteractiveBase>
 				{props.type === 'sectionDropdown' && dropdownValue && (
-					<View backgroundColor={'rgba(16,16,20,0.3)'}>
+					<View>
 						{props.data.section.map((value, index) => (
 							<View
 								key={value?.toString() + index.toString()}
@@ -89,7 +90,7 @@ export const Element = <T extends ElementProps>(props: T) => {
 		);
 	}
 	return (
-		<View style={{ backgroundColor: 'rgba(16, 16, 20, 0.50)' }}>
+		<View style={{ backgroundColor: colors.coolGray[500] }}>
 			<RawElement element={props} />
 		</View>
 	);

front/components/GtkUI/ElementTypes.tsx

@@ -1,4 +1,4 @@
-import { Select, Switch, Text, Icon, Row, Slider } from 'native-base';
+import { Select, Switch, Text, Icon, Row, Slider, useTheme } from 'native-base';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useWindowDimensions } from 'react-native';
 
@@ -101,12 +101,13 @@ export const getElementDropdownNode = (
 	disabled: boolean
 ) => {
 	const layout = useWindowDimensions();
+	const { colors } = useTheme();
 	return (
 		<Select
 			selectedValue={value}
 			onValueChange={onSelect}
 			defaultValue={defaultValue}
-			bgColor={'rgba(16,16,20,0.5)'}
+			bgColor={colors.coolGray[500]}
 			variant="filled"
 			isDisabled={disabled}
 			width={layout.width > 650 ? '200' : '100'}