added graph button

4 files changed, 24 insertions, 17 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 8b041b5..83cc40a 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -271,7 +271,7 @@ onLinkHover={handleLinkHover}
   }
 
   return (
-    <View>
+    <View style={style}>
       {!physics.threedim ? (
         <ForceGraph2D
           ref={fgRef}
diff --git a/app/components/index.ts b/app/components/index.ts
index 9ec6a91..8858b2f 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -12,4 +12,5 @@ export * from "./wallpaper/wallpaper"
 export * from "./auto-image/auto-image"
 export * from "./graph/graph"
 export * from "./tweaks/tweaks"
-export * from "./local/local"
+export * from "./local-button/local-button"
+export * from "./graph-ui/graph-ui"
diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx
index 82ea0ee..e6984fc 100644
--- a/app/components/local/local.tsx
+++ b/app/components/local/local.tsx
@@ -1,9 +1,10 @@
 import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
+import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
 import { observer } from "mobx-react-lite"
 import { color, typography } from "../../theme"
 import { Text } from "../"
 import { flatten } from "ramda"
+import Icon from "react-native-vector-icons/MaterialCommunityIcons"
 
 const CONTAINER: ViewStyle = {
   justifyContent: "center",
@@ -25,13 +26,13 @@ export interface LocalProps {
 /**
  * Describe your component here
  */
-export const Local = observer(function Local(props: LocalProps) {
+export const LocalButton = observer(function LocalButton(props: LocalProps): boolean {
   const { style } = props
   const styles = flatten([CONTAINER, style])
 
   return (
-    <View style={styles}>
-      <Text style={TEXT}>Hello</Text>
-    </View>
+      <Icon color="#a99f1f" name="graph"
+          style={{position:"absolute", zIndex: 100, width: 500}}
+      />
   )
 })
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 3bfeb6e..08a5e2a 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -133,10 +133,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
               setPhysics({ ...physics, collision: !physics.collision })
             }}
           />
-          <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
+          <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} />
           <Slider
+            style={styles.slider}
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
             minimumValue={0}
             maximumValue={1}
             onValueChange={(value) => {
@@ -585,16 +587,19 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    //flex: 1,
     backgroundColor: "#2a2e38",
-    position: "absolute",
-    zIndex: 100,
-    left: 50,
-    top: 50,
-    width: 250,
-    borderRadius: 5,
+    position: "relative",
+    zIndex: 5,
+    marginLeft: "3%",
+    marginTop: "3%",
+    maxWidth: 275,
+    borderRadius: 10,
     borderStyle: "solid",
-    maxHeight: "70%",
+    borderWidth: 10,
+    borderColor: "#2a2e38",
+      height: "25%",
+    maxHeight: "80%",
     paddingBottom: 20,
   },
   title: {
@@ -602,7 +607,7 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontWeight: "300",
     marginBottom: 20,
-    paddingLeft: 20,
+    paddingLeft: 10,
   },
   header: {
     backgroundColor: "#2a2e38",