Add a design system (#34)

* Add theming system

* Add standard Button control and update RadioButtons

* Unify radiobutton with design system

* Update debug screen to have multiple views

* Add ToggleButton

* Update error controls to use design system

* Add typography to <Text> element

* Move DropdownButton into the design system

* Clean out old code

* Move Text into design system

* Add 'inverted' color palette

* Move LoadingPlaceholder into the design system

1 files changed, 25 insertions, 0 deletions

diff --git a/src/view/lib/hooks/useOnMainScroll.ts b/src/view/lib/hooks/useOnMainScroll.ts
new file mode 100644
index 000000000..c3c16ff83
--- /dev/null
+++ b/src/view/lib/hooks/useOnMainScroll.ts
@@ -0,0 +1,25 @@
+import {useState} from 'react'
+import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
+import {RootStoreModel} from '../../../state'
+
+export type OnScrollCb = (
+  event: NativeSyntheticEvent<NativeScrollEvent>,
+) => void
+
+export function useOnMainScroll(store: RootStoreModel) {
+  let [lastY, setLastY] = useState(0)
+  let isMinimal = store.shell.minimalShellMode
+  return function onMainScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const y = event.nativeEvent.contentOffset.y
+    const dy = y - (lastY || 0)
+    setLastY(y)
+
+    if (!isMinimal && y > 10 && dy > 10) {
+      store.shell.setMinimalShellMode(true)
+      isMinimal = true
+    } else if (isMinimal && (y <= 10 || dy < -10)) {
+      store.shell.setMinimalShellMode(false)
+      isMinimal = false
+    }
+  }
+}