feat(formulus): Making Formulus UI a Banger (#598)

* Update sync card labels

* Fix sync status and observation icons to ODE green

Author: IamLRBA

formulus/src/components/common/ObservationCard.tsx

@@ -66,7 +66,7 @@ const ObservationCard: React.FC<ObservationCardProps> = ({
             size={24}
             color={
               isSynced
-                ? (themeColors.primary as string)
+                ? (colors.brand.primary['500'] as string)
                 : colors.semantic.warning[500]
             }
           />

formulus/src/screens/ObservationDetailScreen.tsx

@@ -340,7 +340,7 @@ const ObservationDetailScreen: React.FC<ObservationDetailScreenProps> = ({
                   size={16}
                   color={
                     isSynced
-                      ? (themeColors.primary as string)
+                      ? (colors.brand.primary['500'] as string)
                       : (colors.semantic.warning[500] as unknown as string)
                   }
                 />

formulus/src/screens/SyncScreen.tsx

@@ -366,13 +366,22 @@ const SyncScreen = () => {
   };
 
   const observationStatus = getObservationStatusText();
+  /** Check icon on idle success uses ODE brand green; status text still follows app theme primary. */
+  const odeStatusIconGreen = colors.brand.primary['500'] as string;
   const observationStatusColor = isObservationSyncActive
     ? themeColors.primary
     : syncState.error
       ? colors.semantic.error[500]
       : pendingObservations > 0 || pendingUploads.count > 0
         ? colors.semantic.warning[500]
         : (themeColors.primary as string);
+  const observationStatusIconColor = isObservationSyncActive
+    ? themeColors.primary
+    : syncState.error
+      ? colors.semantic.error[500]
+      : pendingObservations > 0 || pendingUploads.count > 0
+        ? colors.semantic.warning[500]
+        : odeStatusIconGreen;
 
   useEffect(() => {
     const unsubscribeStatus = syncService.subscribeToStatusUpdates(() => {});
@@ -629,14 +638,14 @@ const SyncScreen = () => {
                           : 'check-circle'
                   }
                   size={20}
-                  color={observationStatusColor as string}
+                  color={observationStatusIconColor as string}
                 />
                 <Text
                   style={[
                     styles.statusCardTitle,
                     { color: themeColors.onSurface as string },
                   ]}>
-                  Observation status
+                  Status
                 </Text>
               </View>
               <Text
@@ -679,7 +688,7 @@ const SyncScreen = () => {
                     styles.statusCardTitle,
                     { color: themeColors.onSurface as string },
                   ]}>
-                  Last observation sync
+                  Last Sync
                 </Text>
               </View>
               <Text