Refactor: use the <Card> atom in every component that displays a card

src/components/atoms/card.tsx

@@ -27,14 +27,18 @@ export const Card: FC<CardProps> = ({
     paddingVertical: v,
     ...(r !== undefined && {paddingRight: r})
   };
+  const isWarning = type === 'warning';
   const cardContent = (
-    <View
-      style={[styles.card, type === 'warning' && styles.cardWarning, padding]}>
+    <View style={[styles.card, isWarning && styles.cardWarning, padding]}>
       {icon && <View style={styles.icon}>{icon}</View>}
       <View style={styles.childrenView}>{children}</View>
       {onPress && (
         <View style={styles.row}>
-          <AppIcons.ArrowRight width={18} height={18} color={colors.teal} />
+          <AppIcons.ArrowRight
+            width={18}
+            height={18}
+            color={isWarning ? colors.white : colors.teal}
+          />
         </View>
       )}
     </View>
@@ -59,7 +63,8 @@ const styles = StyleSheet.create({
   },
   cardWarning: {
     borderWidth: 2,
-    borderColor: colors.red
+    borderColor: colors.red,
+    backgroundColor: colors.red
   },
   icon: {
     alignItems: 'center',

src/components/molecules/close-contact-warning.tsx

@@ -1,66 +1,40 @@
 import React, {FC} from 'react';
-import {
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-  Text,
-  Image
-} from 'react-native';
+import {StyleSheet, Text, Image, View} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {useNavigation} from '@react-navigation/native';
 
-import {AppIcons} from 'assets/icons';
-import {colors, shadows, text} from 'theme';
-import {SingleRow} from 'components/atoms/layout';
+import {colors, text} from 'theme';
+import {Card} from 'components/atoms/card';
 
 export const CloseContactWarning: FC = () => {
   const {t} = useTranslation();
   const navigation = useNavigation();
 
   return (
-    <TouchableWithoutFeedback
+    <Card
+      padding={{v: 0, h: 0}}
+      type="warning"
+      icon={
+        <Image
+          accessibilityIgnoresInvertColors
+          style={styles.imageSize}
+          width={styles.imageSize.width}
+          height={styles.imageSize.height}
+          source={require('assets/images/exposure-alert/exposure-alert.png')}
+        />
+      }
       onPress={() => navigation.navigate('closeContact')}>
-      <View style={styles.card}>
-        <View style={styles.icon}>
-          <Image
-            accessibilityIgnoresInvertColors
-            style={styles.imageSize}
-            width={styles.imageSize.width}
-            height={styles.imageSize.height}
-            source={require('assets/images/exposure-alert/exposure-alert.png')}
-          />
-        </View>
-        <View style={styles.content}>
-          <Text style={styles.title}>{t('closeContactWarn:title')}</Text>
-          <Text style={styles.notice}>{t('closeContactWarn:notice')}</Text>
-        </View>
-        <SingleRow>
-          <AppIcons.ArrowRight width={24} height={24} color={colors.white} />
-        </SingleRow>
+      <View style={styles.content}>
+        <Text style={styles.title}>{t('closeContactWarn:title')}</Text>
+        <Text style={styles.notice}>{t('closeContactWarn:notice')}</Text>
       </View>
-    </TouchableWithoutFeedback>
+    </Card>
   );
 };
 
 const styles = StyleSheet.create({
-  card: {
-    flex: 1,
-    ...shadows.default,
-    borderColor: colors.red,
-    backgroundColor: colors.red,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 16
-  },
-  icon: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0
-  },
   content: {
-    flex: 1,
-    marginLeft: 96
+    marginLeft: -25
   },
   title: {
     ...text.largeBlack,

src/components/molecules/tracing-available.tsx

@@ -1,17 +1,10 @@
 import React, {FC} from 'react';
-import {
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-  Text,
-  Image
-} from 'react-native';
+import {StyleSheet, Text, Image} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {useNavigation} from '@react-navigation/native';
 
-import {SingleRow} from 'components/atoms/layout';
-import {colors, shadows, text} from 'theme';
-import {AppIcons} from 'assets/icons';
+import {Card} from 'components/atoms/card';
+import {colors, text} from 'theme';
 
 const TracingImage = require('assets/images/information/alt.png');
 
@@ -20,51 +13,29 @@ export const TracingAvailable: FC = () => {
   const navigation = useNavigation();
 
   return (
-    <TouchableWithoutFeedback onPress={() => navigation.navigate('tracing')}>
-      <View style={styles.card}>
+    <Card
+      padding={{h: 0}}
+      icon={
         <Image
           accessibilityIgnoresInvertColors
           width={106}
           height={100}
           resizeMode="contain"
           source={TracingImage}
         />
-        <View style={styles.content}>
-          <Text style={styles.title}>{t('tracingAvailable:title')}</Text>
-          <Text style={[text.smallBold, {color: colors.teal}]}>
-            {t('tracingAvailable:text')}
-          </Text>
-        </View>
-        <SingleRow>
-          <AppIcons.ArrowRight width={24} height={24} color={colors.teal} />
-        </SingleRow>
-      </View>
-    </TouchableWithoutFeedback>
+      }
+      onPress={() => navigation.navigate('tracing')}>
+      <Text style={styles.title}>{t('tracingAvailable:title')}</Text>
+      <Text style={[text.smallBold, {color: colors.teal}]}>
+        {t('tracingAvailable:text')}
+      </Text>
+    </Card>
   );
 };
 
 const styles = StyleSheet.create({
-  card: {
-    flex: 1,
-    ...shadows.default,
-    backgroundColor: colors.white,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16
-  },
-  icon: {
-    width: 88
-  },
-  content: {
-    flex: 1,
-    marginLeft: 8
-  },
   title: {
     ...text.largeBlack,
     marginBottom: 6
-  },
-  iconSize: {
-    width: 24,
-    height: 24
   }
 });

src/components/molecules/transmission-chart.tsx

@@ -1,23 +1,22 @@
 import React, {FC} from 'react';
-import {StyleSheet, View, ViewStyle, Text} from 'react-native';
+import {StyleSheet, View, Text} from 'react-native';
 
+import {Card} from 'components/atoms/card';
 import {colors, shadows, text} from 'theme';
 
 interface TransmissionChartProps {
-  style?: ViewStyle;
   title?: string;
   data: [string, number][];
 }
 
 export const TransmissionChart: FC<TransmissionChartProps> = ({
-  style,
   title,
   data
 }) => {
   const maxValue = Math.max(...data.map(([_, y]) => y));
 
   return (
-    <View style={[styles.container, style]}>
+    <Card>
       {title && (
         <Text maxFontSizeMultiplier={2} style={styles.title}>
           {title}
@@ -48,17 +47,11 @@ export const TransmissionChart: FC<TransmissionChartProps> = ({
           </View>
         </View>
       ))}
-    </View>
+    </Card>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-    padding: 16,
-    ...shadows.default
-  },
   title: {
     ...text.defaultBold,
     textAlign: 'center'

src/components/organisms/covid-stats.tsx

@@ -5,8 +5,9 @@ import {useTranslation} from 'react-i18next';
 import {CovidStatistics} from 'services/api';
 import {Spacing} from 'components/atoms/spacing';
 import {Heading} from 'components/atoms/heading';
+import {Card} from 'components/atoms/card';
 import {CountyBreakdownCard} from 'components/molecules/county-breakdown-card';
-import {colors, shadows, text} from 'theme';
+import {text} from 'theme';
 import {BubbleIcons} from 'assets/icons';
 
 interface CovidStatsProps {
@@ -27,7 +28,7 @@ export const CovidStats: FC<CovidStatsProps> = ({
       <Heading text={t('stats:title')} />
       <CountyBreakdownCard onPress={onCountyBreakdown} />
       <Spacing s={16} />
-      <View style={styles.card}>
+      <Card>
         <View style={styles.row}>
           <View style={[iconStyle.icon, styles.confirmedBackground]}>
             <BubbleIcons.Cases width={56} height={56} />
@@ -83,7 +84,7 @@ export const CovidStats: FC<CovidStatsProps> = ({
             </Text>
           </View>
         </View>
-      </View>
+      </Card>
     </View>
   );
 };
@@ -99,11 +100,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1
   },
-  card: {
-    backgroundColor: colors.white,
-    padding: 16,
-    ...shadows.default
-  },
   row: {
     flexDirection: 'row',
     justifyContent: 'flex-start',

src/components/views/county-breakdown.tsx

@@ -3,7 +3,8 @@ import {StyleSheet, View, Text} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {useIsFocused, useFocusEffect} from '@react-navigation/native';
 
-import {colors, shadows, text} from 'theme';
+import {Card} from 'components/atoms/card';
+import {colors, text} from 'theme';
 import {Heading} from 'components/atoms/heading';
 import {useApplication} from 'providers/context';
 import {Scrollable} from 'components/templates/scrollable';
@@ -42,7 +43,7 @@ export const CountyBreakdown = () => {
     <Scrollable refresh={{refreshing, onRefresh}}>
       <Heading accessibilityFocus text={t('casesByCounty:title')} />
       {app.data && app.data.counties !== null && (
-        <View style={styles.card}>
+        <Card padding={{v: 12}}>
           {app.data.counties.map(({county, cases}, index) => {
             const percentage = Math.round((cases * 100) / total);
             const widthPercentage = Math.round((cases * 100) / max);
@@ -80,28 +81,13 @@ export const CountyBreakdown = () => {
               </View>
             );
           })}
-        </View>
+        </Card>
       )}
     </Scrollable>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-    backgroundColor: '#FAFAFA'
-  },
-  contentContainerStyle: {
-    paddingHorizontal: 24,
-    paddingTop: 16,
-    paddingBottom: 48
-  },
-  card: {
-    backgroundColor: colors.white,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    ...shadows.default
-  },
   line: {
     flex: 2,
     height: 40,