chore: update orange icons to accessible color (#803)

* chore: update loader to remain consistent

* chore: update AddButton svg with proper colors

* chore: update sync icon to be svg

* chore: remove duplicate sync icon

* chore: remove unnecessary styling

src/frontend/screens/Observation/ObservationHeaderRight.tsx

@@ -4,7 +4,7 @@ import {View, StyleSheet} from 'react-native';
 import {IconButton} from '../../sharedComponents/IconButton';
 
 import {EditIcon} from '../../sharedComponents/icons';
-import {SyncIcon} from '../../sharedComponents/icons/SyncIconCircle';
+import {SyncIcon} from '../../sharedComponents/icons';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';
 import {useDeviceInfo} from '../../hooks/server/deviceInfo';
 import {UIActivityIndicator} from 'react-native-indicators';

src/frontend/sharedComponents/AddButton.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   GestureResponderEvent,
-  Image,
   StyleProp,
   StyleSheet,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {Loading} from './Loading';
+import AddButtonSVG from '../images/AddButton.svg';
+import {UIActivityIndicator} from 'react-native-indicators';
 
 interface AddButtonProps {
   style?: StyleProp<ViewStyle>;
@@ -17,7 +17,6 @@ interface AddButtonProps {
   onPress: ((event: GestureResponderEvent) => void) & (() => void);
   isLoading?: boolean;
 }
-
 const AddButtonNoMemo = ({
   style,
   testID,
@@ -27,16 +26,9 @@ const AddButtonNoMemo = ({
 }: AddButtonProps) => (
   <View
     testID={testID}
-    style={[styles.container, {bottom: isLoading ? 75 : 25}, style]}>
+    style={[styles.container, {bottom: isLoading ? 50 : 25}, style]}>
     <TouchableOpacity disabled={disabled || isLoading} onPress={onPress}>
-      {!isLoading ? (
-        <Image
-          source={require('../images/add-button.png')}
-          style={styles.button}
-        />
-      ) : (
-        <Loading size={15} />
-      )}
+      {isLoading ? <UIActivityIndicator size={50} /> : <AddButtonSVG />}
     </TouchableOpacity>
   </View>
 );
@@ -51,8 +43,4 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
   },
-  button: {
-    width: 125,
-    height: 125,
-  },
 });

src/frontend/sharedComponents/HomeHeader.tsx

@@ -2,11 +2,11 @@ import React, {FC} from 'react';
 import {View, StyleSheet} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {IconButton} from './IconButton';
-import {SyncIconCircle} from './icons';
 import {GPSPill} from './GPSPill';
 import {BottomTabHeaderProps} from '@react-navigation/bottom-tabs';
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {DrawerMenuIcon} from './icons/DrawerMenuIcon';
+import SyncIconCircle from '../images/Sync.svg';
 
 export const HomeHeader: FC<
   BottomTabHeaderProps & {openDrawer: () => void}
@@ -25,7 +25,7 @@ export const HomeHeader: FC<
         onPress={() => {
           navigation.navigate('Sync');
         }}>
-        <SyncIconCircle />
+        <SyncIconCircle testID="MAIN.sync-icon" />
       </IconButton>
       <GPSPill navigation={navigation} />
       <DrawerMenuIcon style={{marginRight: 20}} onPress={openDrawer} />

src/frontend/sharedComponents/icons/index.tsx

@@ -22,7 +22,6 @@ type ImageIconProps = {
 
 export {GpsIcon} from './GpsIcon';
 // export { CategoryIcon, CategoryCircleIcon } from "./CategoryIcon";
-export {SyncIconCircle} from './SyncIconCircle';
 
 export const AlertIcon = ({size = 30, color = RED, style}: FontIconProps) => (
   <MaterialCommunityIcon color={color} name="alert" size={size} style={style} />