chore: update inputs (#830)

* chore: create checkbox using svgs

* chore: update metrics to use new checkbox

* chore: update input color and font

src/frontend/sharedComponents/Checkbox.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import CheckBoxSelected from '../images/checkbox/CheckboxSelected.svg';
+import CheckBoxUnSelected from '../images/checkbox/CheckboxUnselected.svg';
+import CheckBoxError from '../images/checkbox/CheckboxError.svg';
+import {TouchableOpacity} from 'react-native';
+
+type CheckboxProps = {
+  value: boolean;
+  onPress: () => void;
+  testID?: string;
+  disabled?: boolean;
+  error?: boolean;
+  hitSlop: React.ComponentProps<typeof TouchableOpacity>['hitSlop'];
+};
+
+export const Checkbox = ({
+  value,
+  onPress,
+  testID,
+  disabled,
+  error,
+  hitSlop,
+}: CheckboxProps) => {
+  return (
+    <TouchableOpacity
+      hitSlop={hitSlop}
+      testID={testID}
+      disabled={disabled}
+      onPress={onPress}>
+      {value ? (
+        <CheckBoxSelected />
+      ) : error ? (
+        <CheckBoxError />
+      ) : (
+        <CheckBoxUnSelected />
+      )}
+    </TouchableOpacity>
+  );
+};

src/frontend/sharedComponents/HookFormTextInput.tsx

@@ -10,7 +10,7 @@ import {
   UseControllerProps,
 } from 'react-hook-form';
 import {TextInput as RNTextInput, StyleSheet, View} from 'react-native';
-import {BLACK, LIGHT_GREY, RED} from '../lib/styles';
+import {BLACK, LIGHT_GREY, NEW_DARK_GREY, RED} from '../lib/styles';
 import {ErrorIcon} from './icons';
 import {ViewStyleProp} from '../sharedTypes';
 import {Text} from './Text';
@@ -62,7 +62,14 @@ export const HookFormTextInput = <InputFields extends FieldValues>({
           render={({field: {value, onChange, onBlur}}) => (
             <RNTextInput
               testID={testID}
-              style={[{flex: 1, color: BLACK}]}
+              style={[
+                {
+                  flex: 1,
+                  color: BLACK,
+                  fontFamily: 'Rubik_500Medium',
+                  fontSize: 16,
+                },
+              ]}
               value={value}
               onBlur={onBlur}
               onChangeText={onChange}
@@ -122,7 +129,7 @@ const styles = StyleSheet.create({
     paddingRight: 10,
     paddingVertical: 10,
     borderWidth: 2,
-    borderColor: LIGHT_GREY,
+    borderColor: NEW_DARK_GREY,
     borderRadius: 5,
     flexDirection: 'row',
     justifyContent: 'space-between',

src/frontend/sharedComponents/MetricsDiagnosticsPermissionToggle.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import {View, Text, StyleSheet} from 'react-native';
 import {useIntl, defineMessages} from 'react-intl';
-import {BLUE_GREY, WHITE, BLACK, COMAPEO_BLUE} from '../lib/styles';
+import {WHITE, BLACK} from '../lib/styles';
 import {usePersistedMetricDiagnosticsPermission} from '../hooks/persistedState/usePersistedMetricDiagnosticsPermission';
+import {Checkbox} from './Checkbox';
 
 const m = defineMessages({
   shareDiagnostics: {
@@ -23,12 +23,12 @@ export const MetricsDiagnosticsPermissionToggle: React.FC = () => {
       <Text style={styles.permissionText}>
         {formatMessage(m.shareDiagnostics)}
       </Text>
-      <TouchableOpacity
+      <Checkbox
+        value={isEnabled}
+        error={false}
         onPress={togglePermission}
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
-        style={[styles.checkBox, isEnabled && styles.checkBoxChecked]}>
-        {isEnabled && <MaterialIcons name="check" size={18} color={WHITE} />}
-      </TouchableOpacity>
+      />
     </View>
   );
 };
@@ -44,17 +44,4 @@ const styles = StyleSheet.create({
     color: BLACK,
     flex: 1,
   },
-  checkBox: {
-    width: 20,
-    height: 20,
-    borderWidth: 1,
-    borderColor: BLUE_GREY,
-    borderRadius: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkBoxChecked: {
-    backgroundColor: COMAPEO_BLUE,
-    borderColor: COMAPEO_BLUE,
-  },
 });