From 53c0324bf91f69ad5b38fe48956020b5279934c4 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sun, 18 Jul 2021 23:38:38 +0200
Subject: prettier buttons etc

---
 app/components/graph/graph.tsx   |   57 ++-
 app/components/tweaks/tweaks.tsx | 1001 ++++++++++++++++++++++++--------------
 2 files changed, 686 insertions(+), 372 deletions(-)

(limited to 'app/components')

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index b11eb9b..8b041b5 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -285,7 +285,7 @@ onLinkHover={handleLinkHover}
                   if (highlightNodes.size === 0) {
                     return "rgb(100, 100, 100, 1)"
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)"
                   }
                 }
               : (node) => {
@@ -327,7 +327,7 @@ onLinkHover={handleLinkHover}
                   if (highlightLinks.size === 0) {
                     return "rgb(50, 50, 50, 0.8)"
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)"
                   }
                 }
               : (link) =>
@@ -407,13 +407,13 @@ onLinkHover={handleLinkHover}
           d3AlphaMin={physics.alphaTarget}
           d3VelocityDecay={physics.velocityDecay}
           onBackgroundClick={handleBackgroundClick}
+          backgroundColor={"#242730"}
         />
       ) : (
         <ForceGraph3D
           ref={fgRef}
           graphData={!physics.local ? gData : localGraphData}
           //graphData={gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
@@ -423,10 +423,39 @@ onLinkHover={handleLinkHover}
                     return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
                   }
                 }
-              : undefined
+              : (node) => {
+                  if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+                    return [
+                      "#ff665c",
+                      "#e69055",
+                      "#7bc275",
+                      "#4db5bd",
+                      "#FCCE7B",
+                      "#51afef",
+                      "#1f5582",
+                      "#C57BDB",
+                      "#a991f1",
+                      "#5cEfFF",
+                      "#6A8FBF",
+                    ][node.neighbors[0].index % 11]
+                  } else {
+                    return [
+                      "#ff665c",
+                      "#e69055",
+                      "#7bc275",
+                      "#4db5bd",
+                      "#FCCE7B",
+                      "#51afef",
+                      "#1f5582",
+                      "#C57BDB",
+                      "#a991f1",
+                      "#5cEfFF",
+                      "#6A8FBF",
+                    ][node.index % 11]
+                  }
+                }
           }
-          linkAutoColorBy={physics.colorful ? "target" : undefined}
-          //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
+          //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined}
           linkColor={
             !physics.colorful
               ? (link) => {
@@ -436,7 +465,20 @@ onLinkHover={handleLinkHover}
                     return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
                   }
                 }
-              : undefined
+              : (link) =>
+                  [
+                    "#ff665c",
+                    "#e69055",
+                    "#7bc275",
+                    "#4db5bd",
+                    "#FCCE7B",
+                    "#51afef",
+                    "#1f5582",
+                    "#C57BDB",
+                    "#a991f1",
+                    "#5cEfFF",
+                    "#6A8FBF",
+                  ][gData.nodes[link.sourceIndex].index % 11]
           }
           linkDirectionalParticles={physics.particles}
           nodeLabel={(node) => node.title}
@@ -472,6 +514,7 @@ onLinkHover={handleLinkHover}
           nodeThreeObjectExtend={true}
           onNodeClick={selectClick}
           onBackgroundClick={handleBackgroundClick}
+          backgroundColor={"#242730"}
         />
       )}
     </View>
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 9e23afb..3bfeb6e 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -1,397 +1,668 @@
 import * as React from "react"
-import { ScrollView, StyleProp, Switch, TextStyle, TouchableOpacity, View, ViewStyle, StyleSheet, Button } from "react-native"
+import {
+  ScrollView,
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+  StyleSheet,
+  Button,
+} from "react-native"
 import { observer } from "mobx-react-lite"
 import { color, typography } from "../../theme"
 import { Text } from "../"
 import { flatten } from "ramda"
 import Slider from "@react-native-community/slider"
 import { useState } from "react"
-import Accordion from 'react-native-collapsible/Accordion'
-import * as Animatable from 'react-native-animatable'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Accordion from "react-native-collapsible/Accordion"
+import * as Animatable from "react-native-animatable"
+import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import {Switch} from "react-native-elements"
 
 const CONTAINER: ViewStyle = {
-    justifyContent: "center",
+  justifyContent: "center",
 }
 
 const TEXT: TextStyle = {
-    fontFamily: typography.primary,
-    fontSize: 14,
-    color: color.primary,
+  fontFamily: typography.primary,
+  fontSize: 14,
+  color: color.primary,
 }
 
 export interface TweaksProps {
-    /**
-     * An optional style override useful for padding & margin.
-     */
-    style?: StyleProp<ViewStyle>
-    physics
-    setPhysics
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<ViewStyle>
+  physics
+  setPhysics
 }
 
 /**
  * Describe your component here
  */
 export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
-    const { style, physics, setPhysics } = props
-    //    const styles = flatten([CONTAINER, style])
+  const { style, physics, setPhysics } = props
+  //    const styles = flatten([CONTAINER, style])
 
-    const content = [
-        {
-            title: "Physics",
-            content:
-                <View>
-                    <Text preset="fieldLabel" text="Gravity" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.gravityOn}
-                        onValueChange={() => { setPhysics({ ...physics, gravityOn: !physics.gravityOn }) }}
-                    />
-                    <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={1}
-                        onValueChange={(value) => { setPhysics({ ...physics, gravity: value }) }}
-                        value={physics.gravity}
-                        step={0.01} />
-                    <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={-400}
-                        maximumValue={100}
-                        onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
-                        value={physics.charge}
-                        step={1} />
-                    <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={2}
-                        onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
-                        value={physics.linkStrength}
-                        step={0.01}
-                    />
-                    <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={1}
-                        maximumValue={10}
-                        onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
-                        value={physics.linkIts}
-                        step={1} />
-                    <Text preset="fieldLabel" text="Collision" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.collision}
-                        onValueChange={() => { setPhysics({ ...physics, collision: !physics.collision }) }}
-                    />
-                    <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={1}
-                        onValueChange={(value) => { setPhysics({ ...physics, alphaDecay: value }) }}
-                        value={physics.alphaDecay}
-                        step={.01} />
-                    <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={1}
-                        onValueChange={(value) => { setPhysics({ ...physics, alphaTarget: value }) }}
-                        value={physics.alphaTarget}
-                        step={0.1}
-                    />
-                    <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={1}
-                        onValueChange={(value) => { setPhysics({ ...physics, velocityDecay: value }) }}
-                        value={physics.velocityDecay}
-                        step={0.01} />
-                    <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.galaxy}
-                        onValueChange={() => { setPhysics({ ...physics, galaxy: !physics.galaxy }) }}
-                    />
-                </View>,
-        },
-        {
-            title: 'Visual',
-            content:
-                <View>
-                    <Text preset="fieldLabel" text="Colorful" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.colorful}
-                        onValueChange={() => { setPhysics({ ...physics, colorful: !physics.colorful }) }}
-                    />
-                    <Text preset="fieldLabel" text="Hover highlight" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.hover}
-                        onValueChange={() => { setPhysics({ ...physics, hover: !physics.hover }) }}
-                    />
-                    <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={1}
-                        onValueChange={(value) => { setPhysics({ ...physics, linkOpacity: value }) }}
-                        value={physics.linkOpacity}
-                        step={.01} />
-                    <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={.1}
-                        maximumValue={10}
-                        onValueChange={(value) => { setPhysics({ ...physics, linkWidth: value }) }}
-                        value={physics.linkWidth}
-                        step={0.1} />
-                    <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={1}
-                        maximumValue={10}
-                        onValueChange={(value) => { setPhysics({ ...physics, nodeRel: value }) }}
-                        value={physics.nodeRel}
-                        step={.01} />
-                    <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={10}
-                        onValueChange={(value) => { setPhysics({ ...physics, particles: value }) }}
-                        value={physics.particles}
-                        step={1} />
-                    <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={1}
-                        maximumValue={10}
-                        onValueChange={(value) => { setPhysics({ ...physics, particleWidth: value }) }}
-                        value={physics.particleWidth}
-                        step={.1} />
-                    <Text preset="fieldLabel" text="Labels" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.labels}
-                        onValueChange={() => { setPhysics({ ...physics, labels: !physics.labels }) }}
-                    />
-                    <Text preset="fieldLabel" text={"Scale when labels become visible: " + physics.labelScale} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0.1}
-                        maximumValue={5}
-                        onValueChange={(value) => { setPhysics({ ...physics, labelScale: value }) }}
-                        value={physics.labelScale}
-                        step={.1} />
-                </View>,
-        },
-        {
-            title: 'Modes',
-            content:
-                <View>
-                    <Text preset="fieldLabel" text="Expandable Graph" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.collapse}
-                        onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
-                    />
-                    <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} />
-                    <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
-                        maximumValue={600}
-                        onValueChange={(value) => { setPhysics({ ...physics, rootId: value }) }}
-                        value={physics.rootId}
-                        step={1} />
-                    <Text preset="fieldLabel" text="3D" />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.threedim}
-                        onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
-                    />
-                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                        value={physics.local}
-                        onValueChange={() => { setPhysics({ ...physics, local: !physics.local }) }}
-                    />
-                </View>
-        },
-    ];
+  const content = [
+    {
+      title: "Physics",
+      content: (
+        <View>
+          <Text preset="fieldLabel" text="Gravity" />
+          <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.gravityOn}
+            onValueChange={() => {
+              setPhysics({ ...physics, gravityOn: !physics.gravityOn })
+            }}
+          />
+          <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, gravity: value })
+            }}
+            value={physics.gravity}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={-400}
+            maximumValue={100}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, charge: value })
+            }}
+            value={physics.charge}
+            step={1}
+          />
+          <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={2}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, linkStrength: value })
+            }}
+            value={physics.linkStrength}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={1}
+            maximumValue={10}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, linkIts: value })
+            }}
+            value={physics.linkIts}
+            step={1}
+          />
+          <Text preset="fieldLabel" text="Collision" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.collision}
+            onValueChange={() => {
+              setPhysics({ ...physics, collision: !physics.collision })
+            }}
+          />
+          <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, alphaDecay: value })
+            }}
+            value={physics.alphaDecay}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, alphaTarget: value })
+            }}
+            value={physics.alphaTarget}
+            step={0.1}
+          />
+          <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, velocityDecay: value })
+            }}
+            value={physics.velocityDecay}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.galaxy}
+            onValueChange={() => {
+              setPhysics({ ...physics, galaxy: !physics.galaxy })
+            }}
+          />
+        </View>
+      ),
+    },
+    {
+      title: "Visual",
+      content: (
+        <View>
+          <Text preset="fieldLabel" text="Colorful" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.colorful}
+            onValueChange={() => {
+              setPhysics({ ...physics, colorful: !physics.colorful })
+            }}
+          />
+          <Text preset="fieldLabel" text="Hover highlight" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.hover}
+            onValueChange={() => {
+              setPhysics({ ...physics, hover: !physics.hover })
+            }}
+          />
+          <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, linkOpacity: value })
+            }}
+            value={physics.linkOpacity}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0.1}
+            maximumValue={10}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, linkWidth: value })
+            }}
+            value={physics.linkWidth}
+            step={0.1}
+          />
+          <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={1}
+            maximumValue={10}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, nodeRel: value })
+            }}
+            value={physics.nodeRel}
+            step={0.01}
+          />
+          <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={10}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, particles: value })
+            }}
+            value={physics.particles}
+            step={1}
+          />
+          <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={1}
+            maximumValue={10}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, particleWidth: value })
+            }}
+            value={physics.particleWidth}
+            step={0.1}
+          />
+          <Text preset="fieldLabel" text="Labels" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.labels}
+            onValueChange={() => {
+              setPhysics({ ...physics, labels: !physics.labels })
+            }}
+          />
+          <Text
+            preset="fieldLabel"
+            text={"Scale when labels become visible: " + physics.labelScale}
+          />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0.1}
+            maximumValue={5}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, labelScale: value })
+            }}
+            value={physics.labelScale}
+            step={0.1}
+          />
+        </View>
+      ),
+    },
+    {
+      title: "Modes",
+      content: (
+        <View>
+          <Text preset="fieldLabel" text="Expandable Graph" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.collapse}
+            onValueChange={() => {
+              setPhysics({ ...physics, collapse: !physics.collapse })
+            }}
+          />
+          <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} />
+          <Slider
+            minimumTrackTintColor="#a991f1"
+            maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
+            style={styles.slider}
+            minimumValue={0}
+            maximumValue={600}
+            onValueChange={(value) => {
+              setPhysics({ ...physics, rootId: value })
+            }}
+            value={physics.rootId}
+            step={1}
+          />
+          <Text preset="fieldLabel" text="3D" />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.threedim}
+            onValueChange={() => {
+              setPhysics({ ...physics, threedim: !physics.threedim })
+            }}
+          />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={styles.switch}
+            value={physics.local}
+            onValueChange={() => {
+              setPhysics({ ...physics, local: !physics.local })
+            }}
+          />
+        </View>
+      ),
+    },
+  ]
 
-    const [activeSections, setActiveSections] = useState([]);
+  const [activeSections, setActiveSections] = useState([])
 
-    const setSections = (sections) => {
-        setActiveSections(
-            sections.includes(undefined) ? [] : sections
-        );
-    };
+  const setSections = (sections) => {
+    setActiveSections(sections.includes(undefined) ? [] : sections)
+  }
 
-    const renderHeader = (section, _, isActive) => {
-        return (
-            <Animatable.View
-                duration={400}
-                style={[styles.header, isActive ? styles.active : styles.inactive]}
-                transition="backgroundColor"
-            >
-                <Text style={styles.headerText}>{section.title}</Text>
-            </Animatable.View>
-        );
-    };
+  const renderHeader = (section, _, isActive) => {
+    return (
+      <Animatable.View
+        duration={400}
+        style={[styles.header, isActive ? styles.active : styles.inactive]}
+        transition="backgroundColor"
+      >
+        <Text style={styles.headerText}>{section.title}</Text>
+      </Animatable.View>
+    )
+  }
 
-    const renderContent = (section, _, isActive) => {
-        return (
-            <Animatable.View
-                duration={400}
-                style={[styles.content, isActive ? styles.active : styles.inactive]}
-                transition="backgroundColor"
+  const renderContent = (section, _, isActive) => {
+    return (
+      <Animatable.View
+        duration={400}
+        style={[styles.content, isActive ? styles.active : styles.inactive]}
+        transition="backgroundColor"
+      >
+        {section.content}
+      </Animatable.View>
+    )
+  }
+  const [tweaks, setTweaks] = useState(true)
+  if (true) {
+    if (tweaks) {
+      return (
+        <View style={styles.container}>
+          <View style={{ height: 30, width: "100%", backgroundColor: "#2a2e38" }}>
+            <TouchableOpacity
+              style={{
+                width: 30,
+                color: "#a991f1",
+                textAlign: "center",
+                marginLeft: "auto",
+                padding: 5,
+              }}
+              onPress={() => {
+                setTweaks(false)
+              }}
             >
-                {section.content}
-            </Animatable.View>
-        );
-    }
-    const [tweaks, setTweaks] = useState(true);
-    if (true) {
-        if (tweaks) {
-            return (
-                <View style={styles.container}>
-                    <View style={{ height: 30, width: "100%", backgroundColor: "rgb(20,20,20)" }}>
-                        <TouchableOpacity style={{ width: 30, color: "#ffffff", textAlign: "center", marginLeft: "auto", padding: 5 }}
-                            onPress={() => { setTweaks(false) }}>
-                            <Icon name="close-circle" color="#ffffff" size={20} />
-                        </TouchableOpacity>
-                    </View>
-                    <ScrollView>
-                        <Accordion
-                            activeSections={activeSections}
-                            sections={content}
-                            touchAbleComponent={TouchableOpacity}
-                            expandMultiple={true}
-                            renderHeader={renderHeader}
-                            renderContent={renderContent}
-                            duration={200}
-                            onChange={setSections}
-                            renderAsFlatList={false}
-
-                        />
-                    </ScrollView>
-                </View>
-            );
-        } else {
-            return (
-                <TouchableOpacity
-                    onPress={() => { setTweaks(true) }}
-                    style={{ position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100 }}>
-                    <Icon name="cog" color="#ffffff" size={30} />
-                </TouchableOpacity>
-            )
-        }
+              <Icon name="close-circle" color="#ffffff" size={20} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView>
+            <Accordion
+              activeSections={activeSections}
+              sections={content}
+              touchAbleComponent={TouchableOpacity}
+              expandMultiple={true}
+              renderHeader={renderHeader}
+              renderContent={renderContent}
+              duration={200}
+              onChange={setSections}
+              renderAsFlatList={false}
+            />
+          </ScrollView>
+        </View>
+      )
     } else {
-        return (
-            <View style={{ position: "absolute", top: "5%", left: "5%", zIndex: 100, width: 300, backgroundColor: "#000000", padding: 20 }}>
-                <Text preset="bold" text="Physics" />
-                <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
-                <Slider style={{ height: 40, width: "90%" }}
-                    minimumValue={-400}
-                    maximumValue={100}
-                    onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
-                    value={physics.charge}
-                    step={1} />
-                <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
-                <Slider style={{ height: 40, width: "90%" }}
-                    minimumValue={0}
-                    maximumValue={2}
-                    onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
-                    value={physics.linkStrength}
-                    step={0.1}
-                />
-                <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
-                <Slider style={{ height: 40, width: "90%" }}
-                    minimumValue={1}
-                    maximumValue={10}
-                    onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
-                    value={physics.linkIts}
-                    step={1} />
-                <Text preset="fieldLabel" text="Collision" />
-                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                    value={physics.collision}
-                    onValueChange={() => { setPhysics({ ...physics, collision: !physics.collision }) }}
-                />
-                <Text preset="bold" text="Visual" />
-                <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
-                <Slider style={{ height: 40, width: "90%" }}
-                    minimumValue={0}
-                    maximumValue={5}
-                    onValueChange={(value) => { setPhysics({ ...physics, particles: value }) }}
-                    value={physics.particles}
-                    step={1} />
-                <Text preset="bold" text="Modes" />
-                <Text preset="fieldLabel" text="Expandable Graph" />
-                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                    value={physics.collapse}
-                    onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
-                />
-                <Text preset="fieldLabel" text="3D" />
-                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
-                    value={physics.threedim}
-                    onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
-                />
-            </View>
-        );
+      return (
+        <TouchableOpacity
+          onPress={() => {
+            setTweaks(true)
+          }}
+          style={{
+            position: "absolute",
+            top: 50,
+            left: 50,
+            width: 30,
+            color: "#ffffff",
+            zIndex: 100,
+          }}
+        >
+          <Icon name="cog" color="#ffffff" size={30} />
+        </TouchableOpacity>
+      )
     }
+  } else {
+    return (
+      <View
+        style={{
+          position: "absolute",
+          top: "5%",
+          left: "5%",
+          zIndex: 100,
+          width: 300,
+          backgroundColor: "#000000",
+          padding: 20,
+        }}
+      >
+        <Text preset="bold" text="Physics" />
+        <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+        <Slider
+          minimumTrackTintColor="#a991f1"
+          maximumTrackTintColor="#242730"
+          thumbTintColor="#a991f1"
+          style={styles.slider}
+          minimumValue={-400}
+          maximumValue={100}
+          onValueChange={(value) => {
+            setPhysics({ ...physics, charge: value })
+          }}
+          value={physics.charge}
+          step={1}
+        />
+        <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+        <Slider
+          minimumTrackTintColor="#a991f1"
+          maximumTrackTintColor="#242730"
+          thumbTintColor="#a991f1"
+          style={styles.slider}
+          minimumValue={0}
+          maximumValue={2}
+          onValueChange={(value) => {
+            setPhysics({ ...physics, linkStrength: value })
+          }}
+          value={physics.linkStrength}
+          step={0.1}
+        />
+        <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+        <Slider
+          minimumTrackTintColor="#a991f1"
+          maximumTrackTintColor="#242730"
+          thumbTintColor="#a991f1"
+          style={styles.slider}
+          minimumValue={1}
+          maximumValue={10}
+          onValueChange={(value) => {
+            setPhysics({ ...physics, linkIts: value })
+          }}
+          value={physics.linkIts}
+          step={1}
+        />
+        <Text preset="fieldLabel" text="Collision" />
+                  <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+          style={styles.switch}
+          value={physics.collision}
+          onValueChange={() => {
+            setPhysics({ ...physics, collision: !physics.collision })
+          }}
+        />
+        <Text preset="bold" text="Visual" />
+        <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+        <Slider
+          minimumTrackTintColor="#a991f1"
+          maximumTrackTintColor="#242730"
+          thumbTintColor="#a991f1"
+          style={styles.slider}
+          minimumValue={0}
+          maximumValue={5}
+          onValueChange={(value) => {
+            setPhysics({ ...physics, particles: value })
+          }}
+          value={physics.particles}
+          step={1}
+        />
+        <Text preset="bold" text="Modes" />
+        <Text preset="fieldLabel" text="Expandable Graph" />
+                  <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+          style={styles.switch}
+          value={physics.collapse}
+          onValueChange={() => {
+            setPhysics({ ...physics, collapse: !physics.collapse })
+          }}
+        />
+        <Text preset="fieldLabel" text="3D" />
+                  <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+          style={styles.switch}
+          value={physics.threedim}
+          onValueChange={() => {
+            setPhysics({ ...physics, threedim: !physics.threedim })
+          }}
+        />
+      </View>
+    )
+  }
 })
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: 'rgb(20,20,20)',
-        position: "absolute",
-        zIndex: 100,
-        left: 50,
-        top: 50,
-        width: 250,
-        borderRadius: 5,
-        borderStyle: "solid",
-        maxHeight: "70%",
-        paddingBottom: 20,
-    },
-    title: {
-        textAlign: 'left',
-        fontSize: 22,
-        fontWeight: '300',
-        marginBottom: 20,
-        paddingLeft: 20,
-    },
-    header: {
-        backgroundColor: '#111111',
-        padding: 10,
-        paddingBottom: 20,
-        textAlign: "left",
-    },
-    headerText: {
-        textAlign: 'left',
-        paddingLeft: 30,
-        fontSize: 16,
-        fontWeight: '500',
-    },
-    content: {
-        padding: 20,
-        paddingLeft: 60,
-        backgroundColor: '#000000',
-    },
-    active: {
-        backgroundColor: 'rgba(0,0,0,1)',
-    },
-    inactive: {
-        backgroundColor: 'rgba(20,20,20,1)',
-    },
-    selectors: {
-        marginBottom: 10,
-        flexDirection: 'row',
-        justifyContent: 'center',
-    },
-    selector: {
-        backgroundColor: '#111111',
-        padding: 10,
-    },
-    activeSelector: {
-        fontWeight: 'bold',
-    },
-    selectTitle: {
-        fontSize: 14,
-        fontWeight: '500',
-        padding: 10,
-    },
-    multipleToggle: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginVertical: 30,
-        alignItems: 'center',
-    },
-    multipleToggle__title: {
-        fontSize: 16,
-        marginRight: 8,
-    },
-});
+  container: {
+    flex: 1,
+    backgroundColor: "#2a2e38",
+    position: "absolute",
+    zIndex: 100,
+    left: 50,
+    top: 50,
+    width: 250,
+    borderRadius: 5,
+    borderStyle: "solid",
+    maxHeight: "70%",
+    paddingBottom: 20,
+  },
+  title: {
+    textAlign: "left",
+    fontSize: 22,
+    fontWeight: "300",
+    marginBottom: 20,
+    paddingLeft: 20,
+  },
+  header: {
+    backgroundColor: "#2a2e38",
+    padding: 10,
+    paddingBottom: 20,
+    textAlign: "left",
+  },
+  headerText: {
+    textAlign: "left",
+    paddingLeft: 30,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  content: {
+    padding: 20,
+    paddingLeft: 60,
+    backgroundColor: "#000000",
+  },
+  active: {
+    backgroundColor: "#2a2e38",
+  },
+  inactive: {
+    backgroundColor: "#2a2e38",
+  },
+  selectors: {
+    marginBottom: 10,
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  selector: {
+    backgroundColor: "#2a2e38",
+    padding: 10,
+  },
+  activeSelector: {
+    fontWeight: "bold",
+  },
+  selectTitle: {
+    fontSize: 14,
+    fontWeight: "500",
+    padding: 10,
+  },
+  multipleToggle: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginVertical: 30,
+    alignItems: "center",
+  },
+  multipleToggle__title: {
+    fontSize: 16,
+    marginRight: 8,
+  },
+  slider: {
+    minimumTrackTintColor: "#a991f1",
+    thumbTintColor: "#a991f1",
+    height: 40,
+    width: "90%",
+  },
+  switch: {
+    width: "5",
+    height: 20,
+    marginVertical: 10,
+  },
+})
-- 
cgit v1.2.3