Update global text and field styles

app/components/FeatureDetailHeader.js

@@ -15,8 +15,7 @@ const Header = styled.View`
 `
 
 const PresetName = styled.Text`
-  font-size: 16;
-  font-weight: 700;
+  font-weight: 500;
   margin-top: 4;
 `
 
@@ -38,12 +37,14 @@ const PresetIcon = styled.Image`
 const Button = styled.TouchableHighlight``
 
 const Coordinates = styled.Text`
-  color: ${colors.muted}
+  color: ${colors.baseMuted};
+  font-size: 14;
   padding-right: 4;
 `
 
 const Edit = styled.Text`
-  color: ${colors.primary}
+  color: ${colors.primary};
+  font-size: 14;
 `
 
 export default class FeatureDetailHeader extends React.Component {

app/components/Input.js

@@ -9,9 +9,9 @@ import Picker from 'react-native-picker-select'
 
 const FieldWrapper = styled.View`
   border-width: 1;
-  border-color: ${colors.muted};
+  border-color: ${colors.baseMuted};
   border-radius: 4;
-  margin-top: 12;
+  margin-top: 16;
   flex: 1;
   flex-direction: row;
 `
@@ -27,7 +27,8 @@ const LabelWrapper = styled.View`
 `
 
 const Label = styled.Text`
-  color: ${colors.muted}
+  color: ${colors.baseMuted};
+  letter-spacing: 0.4;
 `
 
 const InputWrapper = styled.View`
@@ -40,15 +41,15 @@ const InputWrapper = styled.View`
 const FieldDeleteWrapper = styled.TouchableHighlight`
   flex: 0.1;
   border-width: 0;
-  border-color: ${colors.muted};
+  border-color: ${colors.baseMuted};
   border-left-width: 1;
   align-items: center;
   justify-content: center;
   background-color: white;
 `
 
 class Field extends Component {
-  state = { color: colors.muted }
+  state = { color: colors.baseMuted }
 
   onFocus () {
     this.setState({
@@ -58,7 +59,7 @@ class Field extends Component {
 
   onBlur () {
     this.setState({
-      color: colors.muted
+      color: colors.baseMuted
     })
   }
 
@@ -95,16 +96,18 @@ export class CheckField extends Field {
             <Label style={{ color }}>{key}</Label>
           </LabelWrapper>
 
-          <InputWrapper style={{ alignSelf: 'flex-start', paddingTop: 12 }}>
+          <InputWrapper style={{ alignSelf: 'center' }}>
             <Switch
               onValueChange={(value) => this.onValueChange(value)}
               onFocus={() => this.onFocus()}
               onBlur={() => this.onBlur()}
               value={value}
+              trackColor={{ false: colors.baseMuted, true: colors.primary }}
+              thumbColor={colors.primary}
             />
           </InputWrapper>
           <FieldDeleteWrapper onPress={() => this.removeField(key)}>
-            <Icon name='trash-bin' size={16} color='black' />
+            <Icon name='trash-bin' size={16} color={colors.baseMuted} />
           </FieldDeleteWrapper>
         </FieldWrapper>
       </View>
@@ -183,7 +186,7 @@ export class PickerField extends Field {
             </Picker>
           </InputWrapper>
           <FieldDeleteWrapper onPress={() => this.removeField(key)}>
-            <Icon name='trash-bin' size={16} color='black' />
+            <Icon name='trash-bin' size={16} color={colors.baseMuted} />
           </FieldDeleteWrapper>
         </FieldWrapper>
       </View>
@@ -229,14 +232,13 @@ export class NumberField extends Field {
               onBlur={() => this.onBlur()}
               keyboardType='numeric'
               placeholder={placeholder}
-              placeholderTextColor={color.muted}
-              style={{ flex: 1 }}
+              placeholderTextColor={color.baseMuted}
               underlineColorAndroid='transparent'
               value={value}
             />
           </InputWrapper>
           <FieldDeleteWrapper onPress={() => this.removeField(key)}>
-            <Icon name='trash-bin' size={16} color='black' />
+            <Icon name='trash-bin' size={16} color={colors.baseMuted} />
           </FieldDeleteWrapper>
         </FieldWrapper>
       </View>
@@ -254,7 +256,7 @@ export class TextField extends Field {
       <View ref={x => (this._root = x)} style={{ flex: 1 }}>
         <FieldWrapper style={{ borderColor: color }}>
           <LabelWrapper>
-            <Label style={{ color }}>{key}</Label>
+            <Label style={{ color, letterSpacing: 0.4 }}>{key}</Label>
           </LabelWrapper>
 
           <InputWrapper>
@@ -264,15 +266,14 @@ export class TextField extends Field {
               onChangeText={(value) => this.onValueChange(value)}
               onFocus={() => this.onFocus()}
               onBlur={() => this.onBlur()}
-              style={{ flex: 1 }}
               placeholder={placeholder}
-              placeholderTextColor={color.muted}
+              placeholderTextColor={color.baseMuted}
               underlineColorAndroid='transparent'
               value={value}
             />
           </InputWrapper>
           <FieldDeleteWrapper onPress={() => this.removeField(key)}>
-            <Icon name='trash-bin' size={16} color='black' />
+            <Icon name='trash-bin' size={16} color={colors.baseMuted} />
           </FieldDeleteWrapper>
         </FieldWrapper>
       </View>
@@ -303,7 +304,7 @@ export class DateField extends Field {
               date={value}
               mode='date'
               placeholder='select date'
-              placeholderTextColor={color.muted}
+              placeholderTextColor={color.baseMuted}
               format='YYYY-MM-DD'
               confirmBtnText='Confirm'
               cancelBtnText='Cancel'
@@ -324,7 +325,7 @@ export class DateField extends Field {
             />
           </InputWrapper>
           <FieldDeleteWrapper onPress={() => this.removeField(key)}>
-            <Icon name='trash-bin' size={16} color='black' />
+            <Icon name='trash-bin' size={16} color={colors.baseMuted} />
           </FieldDeleteWrapper>
         </FieldWrapper>
       </View>
@@ -378,9 +379,9 @@ export class ReadOnlyField extends Component {
 
     return (
       <View pointerEvents='none'>
-        <FieldWrapper style={{ borderColor: colors.muted }}>
+        <FieldWrapper style={{ borderColor: colors.baseMuted }}>
           <LabelWrapper>
-            <Label style={{ color: colors.muted }}>{key}</Label>
+            <Label style={{ color: colors.baseMuted }}>{key}</Label>
           </LabelWrapper>
 
           <InputWrapper>

app/components/OfflineItem.js

@@ -28,12 +28,11 @@ const TextContainer = styled.View`
 `
 
 const TitleText = styled.Text`
-  font-size: 16;
 `
 
 const SubtitleText = styled.Text`
   font-size: 12;
-  color: #aaa;
+  color: ${colors.baseMuted};
 `
 
 const StatusContainer = styled.View`

app/components/TagEditor.js

@@ -1,20 +1,34 @@
-import { Text } from 'react-native'
 import React from 'react'
 import styled from 'styled-components/native'
 
 import Icon from './Collecticons'
 import { colors } from '../style/variables'
+import getPlatformStyles from '../utils/get-platform-styles'
+
+const styles = getPlatformStyles({
+  ios: {
+    editorPaddingBottom: 0
+  },
+  iphoneX: {
+    editorPaddingBottom: 48
+  },
+  android: {
+    editorPaddingBottom: 0
+  }
+})
 
 const EditorWrapper = styled.View`
   background-color: #fafafa;
   border-top-width: 0.5;
   border-top-color: ${colors.muted};
   border-bottom-width: 0.5;
   border-bottom-color: ${colors.muted};
+  padding-bottom: ${styles.editorPaddingBottom};
 `
 
 const ToggleButton = styled.TouchableOpacity`
   flex-direction: row;
+  align-items: center;
   padding-top: 16;
   padding-right: 16;
   padding-bottom: 16;
@@ -27,7 +41,14 @@ const TagListWrapper = styled.View`
   margin-right: 16;
 `
 
-const TagList = styled.FlatList``
+const Text = styled.Text`
+  color: ${colors.baseAlpha};
+  padding-left: 4;
+`
+
+const TagList = styled.FlatList`
+  color: ${colors.baseAlpha};
+`
 
 const Tag = styled.View`
   flex: 1;
@@ -40,7 +61,7 @@ const TagKeyInput = styled.TextInput`
   flex: 0.45;
   padding-left: 12;
   border-width: 1;
-  border-color: ${colors.muted};
+  border-color: ${colors.baseMuted};
   border-top-left-radius: 4;
   border-top-right-radius: 0;
   border-bottom-left-radius: 4;
@@ -53,7 +74,7 @@ const TagValueInput = styled.TextInput`
   flex: 0.45;
   padding-left: 12;
   border-width: 1;
-  border-color: ${colors.muted};
+  border-color: ${colors.baseMuted};
   border-left-width: 0;
   border-radius: 0;
   border-bottom-right-radius: 4;
@@ -65,7 +86,7 @@ const TagValueInput = styled.TextInput`
 const TagDeleteWrapper = styled.TouchableHighlight`
   flex: 0.1;
   border-width: 1;
-  border-color: ${colors.muted};
+  border-color: ${colors.baseMuted};
   border-left-width: 0;
   border-top-right-radius: 4;
   border-top-start-radius: 0;
@@ -79,6 +100,7 @@ const TagDeleteWrapper = styled.TouchableHighlight`
 const AddTagWrapper = styled.TouchableOpacity`
   margin-top: 4;
   flex-direction: row;
+  align-items: center;
 `
 
 export default class TagEditor extends React.Component {
@@ -129,12 +151,12 @@ export default class TagEditor extends React.Component {
 
     if (open) {
       return (
-        <Icon name='chevron-down' size={16} color='black' />
+        <Icon name='chevron-down' size={16} color={colors.baseAlpha} />
       )
     }
 
     return (
-      <Icon name='chevron-right' size={16} color='black' />
+      <Icon name='chevron-right' size={16} color={colors.baseAlpha} />
     )
   }
 
@@ -159,7 +181,7 @@ export default class TagEditor extends React.Component {
       <AddTagWrapper onPress={() => {
         this.addTag()
       }}>
-        <Icon name='plus' size={16} color='black' />
+        <Icon name='plus' size={16} color={colors.baseAlpha} />
         <Text>Add tag</Text>
       </AddTagWrapper>
     )
@@ -189,19 +211,19 @@ export default class TagEditor extends React.Component {
         <TagKeyInput
           autoCapitalize='none'
           onChangeText={(val) => this.onUpdateKey(key, val)}
-          placeholderTextColor={colors.muted}
+          placeholderTextColor={colors.baseMuted}
           placeholder='key'
           value={key}
         />
         <TagValueInput
           autoCapitalize='none'
           onChangeText={(val) => this.onUpdateValue(value, val, key)}
-          placeholderTextColor={colors.muted}
+          placeholderTextColor={colors.baseMuted}
           placeholder='value'
           value={value}
         />
         <TagDeleteWrapper onPress={() => this.removeTag(index)}>
-          <Icon name='trash-bin' size={16} color='black' />
+          <Icon name='trash-bin' size={16} color={colors.baseMuted} />
         </TagDeleteWrapper>
       </Tag>
     )

app/components/UserContributionsItem.js

@@ -11,7 +11,7 @@ import { colors } from '../style/variables'
 
 const ItemContainer = styled.TouchableOpacity`
   border-bottom-width: 1;
-  border-bottom-color: #ccc;
+  border-bottom-color: ${colors.baseMuted};
   flex: 1;
   flex-direction: row;
   align-items: center;
@@ -31,12 +31,11 @@ const TextContainer = styled.View`
 `
 
 const TitleText = styled.Text`
-  font-size: 16;
 `
 
 const SubtitleText = styled.Text`
   font-size: 12;
-  color: #aaa;
+  color: ${colors.baseMuted};
 `
 
 const StatusContainer = styled.View`

app/components/UserContributionsList.js

@@ -3,7 +3,8 @@ import styled from 'styled-components/native'
 
 import UserContributionsItem from './UserContributionsItem'
 
-const StyledFlatList = styled.FlatList``
+const StyledFlatList = styled.FlatList`
+`
 
 export default class UserContributionsList extends React.Component {
   render () {

app/screens/Account.js

@@ -11,8 +11,6 @@ import LoadingOverlay from '../components/LoadingOverlay'
 import { colors } from '../style/variables'
 
 const Text = styled.Text`
-  font-size: 16;
-  letter-spacing: 0.5;
 `
 
 const ImageView = styled.View`