added the actionClick support for toggle element type

front/components/GtkUI/Element.tsx

@@ -4,12 +4,27 @@ import { RawElement } from "./RawElement";
 import { Pressable } from "native-base";
 
 export const Element = (props: ElementProps) => {
-	if (props.type === "text" && props.data?.onPress) {
+	let actionFunction = null as null | Function;
+
+	switch (props.type) {
+		case "text":
+			actionFunction = props.data?.onPress;
+			break;
+		case "toggle":
+			actionFunction = props.data?.onToggle;
+			break;
+		default:
+			break;
+	}
+
+	if (actionFunction) {
 		return (
-			<Pressable onPress={props.data.onPress}>
-				<RawElement {...props} />
+			<Pressable onPress={actionFunction}>
+				{({ isHovered }) => {
+					return <RawElement element={props} isHovered={isHovered} />;
+				}}
 			</Pressable>
 		);
 	}
-	return <RawElement {...props} />;
+	return <RawElement element={props} />;
 };

front/components/GtkUI/ElementTypes.tsx

@@ -1,8 +1,4 @@
-import {
-    Select,
-    Switch,
-    Text,
-} from "native-base";
+import { Select, Switch, Text } from "native-base";
 
 export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
 
@@ -17,7 +13,7 @@ export type ElementTextProps = {
 };
 
 export type ElementToggleProps = {
-	onToggle: (value: boolean) => void;
+	onToggle: () => void;
 	value: boolean;
 	defaultValue?: boolean;
 };
@@ -29,7 +25,10 @@ export type ElementDropdownProps = {
 	defaultValue?: string;
 };
 
-export const getElementTextNode = ({ text }: ElementTextProps, disabled: boolean) => {
+export const getElementTextNode = (
+	{ text }: ElementTextProps,
+	disabled: boolean
+) => {
 	return (
 		<Text
 			style={{
@@ -47,7 +46,7 @@ export const getElementToggleNode = (
 ) => {
 	return (
 		<Switch
-			onToggle={onToggle}
+			onToggle={() => onToggle()}
 			isChecked={value ?? false}
 			defaultIsChecked={defaultValue}
 			disabled={disabled}
@@ -76,4 +75,4 @@ export const getElementDropdownNode = (
 			))}
 		</Select>
 	);
-};
+};

front/components/GtkUI/RawElement.tsx

@@ -21,10 +21,14 @@ import {
 	ElementToggleProps,
 } from "./ElementTypes";
 
-export const RawElement = (
-	{ title, icon, type, helperText, description, disabled, data }: ElementProps,
-	isHovered: boolean
-) => {
+type RawElementProps = {
+	element: ElementProps;
+	isHovered?: boolean;
+};
+
+export const RawElement = ({ element, isHovered }: RawElementProps) => {
+	const { title, icon, type, helperText, description, disabled, data } =
+		element;
 	const screenSize = useBreakpointValue({ base: "small", md: "big" });
 	const isSmallScreen = screenSize === "small";
 	return (
@@ -35,6 +39,7 @@ export const RawElement = (
 				padding: 15,
 				justifyContent: "space-between",
 				alignItems: "center",
+				backgroundColor: isHovered ? "#f5f5f5" : undefined,
 			}}
 		>
 			<Box