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, 9 insertions, 2 deletions

diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx
index 6684cde5c..9abc2345f 100644
--- a/src/view/com/util/forms/RadioGroup.tsx
+++ b/src/view/com/util/forms/RadioGroup.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import {View} from 'react-native'
 import {RadioButton} from './RadioButton'
+import {ButtonType} from './Button'
 
 export interface RadioGroupItem {
   label: string
@@ -8,22 +9,28 @@ export interface RadioGroupItem {
 }
 
 export function RadioGroup({
+  type,
   items,
+  initialSelection = '',
   onSelect,
 }: {
+  type?: ButtonType
   items: RadioGroupItem[]
+  initialSelection?: string
   onSelect: (key: string) => void
 }) {
-  const [selection, setSelection] = useState<string>('')
+  const [selection, setSelection] = useState<string>(initialSelection)
   const onSelectInner = (key: string) => {
     setSelection(key)
     onSelect(key)
   }
   return (
     <View>
-      {items.map(item => (
+      {items.map((item, i) => (
         <RadioButton
           key={item.key}
+          style={i !== 0 ? {marginTop: 2} : undefined}
+          type={type}
           label={item.label}
           isSelected={item.key === selection}
           onPress={() => onSelectInner(item.key)}