#13325 Change charging page text

Strides-APP/app/i18n/locales/en.js

@@ -230,7 +230,7 @@ export default {
     btnAuthenticate: "AUTHENTICATE",
     btnCancelReservation: "Cancel Reservation",
     btnComplete: "COMPLETE",
-    btnIntoCharging: "Into Charging",
+    btnIntoCharging: "VIEW CHARGING",
     btnOkay: "Okay",
     btnReserve: "Reserve",
     btnStartCharging: "START CHARGING",

Strides-APP/app/pages/chargingV2/StepCharging.js

@@ -128,14 +128,18 @@ const StepCharging = ({
           <View style={skipAnim ? styles.infoCarded : styles.infoCard}>
             <Text style={styles.infoTitle}>{$t('charging.labelRate')}</Text>
             <Text
+              numberOfLines={2}
+              ellipsizeMode="tail"
               style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</Text>
             <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
               style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</Text>
           </View>
           <View style={skipAnim ? styles.infoCarded : styles.infoCard}>
             <Text style={styles.infoTitle}>{$t('charging.labelTotalCharges')}</Text>
             <Text
-              numberOfLines={1}
+              numberOfLines={2}
               ellipsizeMode="tail"
               style={styles.infoText}>{connectorInfo.totalCharges || "S$ 0.0"}</Text>
             <Text
@@ -227,7 +231,8 @@ const styles = StyleSheet.create({
   },
   infoCard: {
     flex: 1,
-    padding: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
     borderRadius: 10,
     marginRight: 16,
     alignItems: 'center',
@@ -236,7 +241,8 @@ const styles = StyleSheet.create({
   },
   infoCarded: {
     flex: 1,
-    padding: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
     borderRadius: 10,
     marginRight: 16,
     alignItems: 'center',
@@ -245,19 +251,19 @@ const styles = StyleSheet.create({
   },
   infoTitle: {
     color: textPrimary,
-    fontSize: 12,
-    paddingTop: 1
+    fontSize: 12
   },
   infoText: {
     color: textPrimary,
-    fontSize: 16,
+    fontSize: 15,
     fontWeight: 'bold',
-    ...$padding(16)
+    textAlign: 'center',
+    ...$padding(12, 6)
   },
   infoDesc: {
     color: textPrimary,
     fontSize: 12,
-    marginTop: -16,
+    marginTop: -12,
     paddingBottom: 8
   },
   infoStatus: {

Strides-APP/app/pages/chargingV2/StepStart.js

@@ -53,9 +53,13 @@ export default StepStart = ({
             ellipsizeMode="tail"
             style={styles.infoText}>{connectorInfo.rate || "0.00"}/{connectorInfo.rateType || "kWh"}</Text> */}
           <Text
+            numberOfLines={2}
+            ellipsizeMode="tail"
             style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</Text>
           <Text
-              style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</Text>
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</Text>
         </View>
         <View style={styles.infoCard}>
           <Text style={styles.infoTitle}>{$t('charging.labelStatus')}</Text>
@@ -107,7 +111,8 @@ const styles = StyleSheet.create({
   },
   infoCard: {
     flex: 1,
-    padding: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
     borderRadius: 10,
     marginRight: 16,
     alignItems: 'center',
@@ -121,15 +126,15 @@ const styles = StyleSheet.create({
   },
   infoText: {
     color: textPrimary,
-    fontSize: 16,
+    fontSize: 15,
     textAlign: 'center',
     fontWeight: 'bold',
-    ...$padding(16, 0)
+    ...$padding(12, 6)
   },
   infoDesc: {
     color: textPrimary,
     fontSize: 12,
-    marginTop: -16,
+    marginTop: -12,
     paddingBottom: 8
   },
   infoStatus: {