use existing styles

Expensify · May 30, 2024 · 22c472e · 22c472e
1 parent c4b5df5
commit 22c472e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 22 deletions.
diff --git a/src/components/ReportActionItem/TripDetailsView.tsx b/src/components/ReportActionItem/TripDetailsView.tsx
@@ -90,7 +90,7 @@ function ReservationView({reservation}: ReservationViewProps) {
                         />
                         <Text style={[styles.textStrong, styles.lh20, shouldUseNarrowLayout && styles.flex1]}>{formatAirportInfo(reservation.end)}</Text>
                     </View>
-                    {bottomDescription && <Text style={[styles.textSupportingSmallSize, styles.lh14]}>{bottomDescription}</Text>}
+                    {bottomDescription && <Text style={[styles.textSmall, styles.colorMuted, styles.lh14]}>{bottomDescription}</Text>}
                 </View>
             );
         }
@@ -103,7 +103,7 @@ function ReservationView({reservation}: ReservationViewProps) {
                 >
                     {reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : reservation.start.longName}
                 </Text>
-                {bottomDescription && <Text style={[styles.textSupportingSmallSize, styles.lh14]}>{bottomDescription}</Text>}
+                {bottomDescription && <Text style={[styles.textSmall, styles.colorMuted, styles.lh14]}>{bottomDescription}</Text>}
             </View>
         );
     };
@@ -125,7 +125,7 @@ function ReservationView({reservation}: ReservationViewProps) {
             onSecondaryInteraction={() => {}}
             iconHeight={20}
             iconWidth={20}
-            iconStyles={[styles.tripReservationIconContainer(true), styles.mr3]}
+            iconStyles={[styles.tripReservationIconContainer, styles.mr3]}
             secondaryIconFill={theme.icon}
         />
     );

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -386,6 +386,11 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightNormal,
         },
 
+        textSmall: {
+            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
+            fontSize: variables.fontSizeSmall,
+        },
+
         textMicro: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
@@ -1331,18 +1336,6 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightNormal,
         },
 
-        textSupportingSmallSize: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-            fontSize: variables.fontSizeSmall,
-            color: theme.textSupporting,
-        },
-
-        textSupportingNormalSize: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
-            fontSize: variables.fontSizeNormal,
-            color: theme.textSupporting,
-        },
-
         textLabelSupporting: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
             fontSize: variables.fontSizeLabel,
@@ -1390,7 +1383,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         lh14: {
-            lineHeight: 14,
+            lineHeight: variables.lineHeightSmall,
         },
 
         lh16: {
@@ -4941,14 +4934,14 @@ const styles = (theme: ThemeColors) =>
             flex: 1,
         },
 
-        tripReservationIconContainer: (isBiggerIcon: boolean) => ({
-            width: isBiggerIcon ? 40 : 32,
-            height: isBiggerIcon ? 40 : 32,
-            backgroundColor: theme.overlay,
-            borderRadius: isBiggerIcon ? 40 : 32,
+        tripReservationIconContainer: {
+            width: variables.avatarSizeNormal,
+            height: variables.avatarSizeNormal,
+            backgroundColor: theme.border,
+            borderRadius: variables.componentBorderRadiusXLarge,
             alignItems: 'center',
             justifyContent: 'center',
-        }),
+        },
 
         textLineThrough: {
             textDecorationLine: 'line-through',