NTP-59601 | Anomaly card changes

src/assets/icons/AnomalyIcon.tsx

@@ -5,25 +5,25 @@ const AnomalyTrackerIcon = () => (
   <Svg width="18" height="19" viewBox="0 0 18 19" fill="none">
     <Path
       d="M13.8232 14.8232L17.332 18.332"
-      stroke="#F0C52B"
+      stroke="#C8A311"
       stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
       d="M1.21973 6.49058C2.36282 3.66302 5.13905 1.66602 8.37497 1.66602C12.6381 1.66602 16.0855 5.13093 16.0855 9.37654C16.0855 13.6222 12.6469 17.0783 8.37497 17.0783C5.35812 17.0783 2.73864 15.3388 1.47313 12.8096"
-      stroke="#F0C52B"
+      stroke="#C8A311"
       stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
       d="M0.666016 9.46345H3.56952C4.13093 9.46345 4.64847 9.13012 4.9204 8.6038L5.70988 7.11257C5.99935 6.55994 6.75374 6.67398 6.89409 7.29679L8.01689 12.1915C8.15724 12.8143 8.93795 12.9284 9.20988 12.3494L10.5081 9.63889"
-      stroke="#F0C52B"
+      stroke="#C8A311"
       stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
       d="M10.9832 9.7536C11.5797 9.7536 12.0622 9.27114 12.0622 8.67465C12.0622 8.07816 11.5797 7.5957 10.9832 7.5957C10.3868 7.5957 9.9043 8.07816 9.9043 8.67465C9.9043 9.27114 10.3868 9.7536 10.9832 9.7536Z"
-      stroke="#F0C52B"
+      stroke="#C8A311"
       stroke-width="1.6"
       stroke-miterlimit="10"
     />

src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx

@@ -1,5 +1,4 @@
 import { COLORS } from '@rn-ui-lib/colors';
-import { GenericStyles, getShadowStyle } from '@rn-ui-lib/styles';
 import Text from '@rn-ui-lib/components/Text';
 
 import React from 'react';
@@ -17,7 +16,7 @@ const AnomalyCardHeader = (props: any) => {
   return (
     <View style={[styles.container, { backgroundColor: headerColor }]}>
       <Text style={styles.text} dark>
-        {item?.type}
+        {item?.subtype}
       </Text>
       <View
         style={[
@@ -41,13 +40,20 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
-    alignItems: 'center',
+    alignItems: 'flex-start',
+    gap: 10,
   },
   priorityLabel: {
     borderRadius: 4,
     paddingHorizontal: 8,
     paddingVertical: 1,
   },
-  text: { fontSize: 14, fontWeight: '700', color: COLORS.TEXT.DARK },
+  text: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: COLORS.TEXT.DARK,
+    flex: 1,
+    wordBreak: 'break-word',
+  },
 });
 export default AnomalyCardHeader;

src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx

@@ -14,7 +14,9 @@ const DaysTillEscalationComponent = (props: {
   const progress = useSharedValue(0);
   useEffect(() => {
     const normalizedProgress = progressPercent / 100;
-    progress.value = withTiming(normalizedProgress, { duration: 400 });
+    if (dayTillEscalation > 0) {
+      progress.value = withTiming(normalizedProgress, { duration: 400 });
+    } else progress.value = withTiming(0, { duration: 0 });
   }, []);
   const radius = 18;
   const circumference = 2 * Math.PI * radius;