Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from Aug 11, 2020
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0d5cd1e
fix: add red background to warning card. Add optional marginRight pro…
andreaforni Aug 7, 2020
4c8f450
refactor: add Card component
andreaforni Aug 7, 2020
8921b50
refactor: add Card component, remove unused styles
andreaforni Aug 7, 2020
10a322f
refactor: add Card component
andreaforni Aug 7, 2020
9184974
refacator: remove unused component
andreaforni Aug 7, 2020
7cda753
fix: add white right arrow when Card's type is warning
andreaforni Aug 7, 2020
f4a757c
Merge branch 'current' into use-card-atom
andreaforni Aug 7, 2020
81f76d2
fix: restore original CloseContactWarning text position
andreaforni Aug 7, 2020
3f4e455
Merge branch 'current' into use-card-atom
andreaforni Aug 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 10 additions & 5 deletions components/atoms/card.tsx
View file
Open in desktop
Expand Up @@ -10,6 +10,9 @@ import {
import {colors} from '../../constants/colors';
import {shadows} from '../../theme';

const ArrowRight = require('../../assets/images/arrow-right/teal.png');
const ArrowRightWhite = require('../../assets/images/arrow-right/white.png');

interface CardProps {
type?: 'warning';
padding?: {
Expand All @@ -20,6 +23,7 @@ interface CardProps {
icon?: {
w: number;
h: number;
mr?: number;
source: ImageRequireSource;
};
onPress?: () => void;
Expand All @@ -37,14 +41,14 @@ 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}>
<Image
accessibilityIgnoresInvertColors
style={{width: icon.w, height: icon.h}}
style={{width: icon.w, height: icon.h, marginRight: icon.mr}}
width={icon.w}
height={icon.h}
source={icon.source}
Expand All @@ -58,7 +62,7 @@ export const Card: FC<CardProps> = ({
accessibilityIgnoresInvertColors
style={styles.arrowIcon}
{...styles.arrowIcon}
source={require('../../assets/images/arrow-right/teal.png')}
source={isWarning ? ArrowRightWhite : ArrowRight}
/>
</View>
)}
Expand All @@ -84,7 +88,8 @@ const styles = StyleSheet.create({
},
cardWarning: {
borderWidth: 2,
borderColor: colors.red
borderColor: colors.red,
backgroundColor: colors.red
},
icon: {
alignItems: 'center',
Expand Down
79 changes: 15 additions & 64 deletions components/molecules/close-contact-warning.tsx
View file
Open in desktop
@@ -1,75 +1,34 @@
import React, {FC} from 'react';
import {
StyleSheet,
TouchableWithoutFeedback,
View,
Text,
Image
} from 'react-native';
import {StyleSheet, Text} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';

import {SingleRow} from '../atoms/layout';

import {colors} from '../../constants/colors';

import {shadows, text} from '../../theme';
import {text} from '../../theme';
import {Card} from '../atoms/card';

export const CloseContactWarning: FC = () => {
const {t} = useTranslation();
const navigation = useNavigation();

return (
<TouchableWithoutFeedback
<Card
padding={{v: 0, h: 0}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to set the vertical padding to zero, even though the one set in styles.card was 16, to match the original design:

original-2

With vertical padding equal to 16, it would be:

vertical padding 16

type="warning"
icon={{
w: 107,
h: 137,
mr: -25,
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>
<Image
accessibilityIgnoresInvertColors
style={styles.iconSize}
width={styles.iconSize.width}
height={styles.iconSize.height}
source={require('../../assets/images/arrow-right/white.png')}
/>
</SingleRow>
</View>
</TouchableWithoutFeedback>
<Text style={styles.title}>{t('closeContactWarn:title')}</Text>
<Text style={styles.notice}>{t('closeContactWarn:notice')}</Text>
</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
},
title: {
...text.largeBlack,
color: colors.white
Expand All @@ -78,13 +37,5 @@ const styles = StyleSheet.create({
...text.default,
color: colors.white,
lineHeight: 21
},
iconSize: {
width: 24,
height: 24
},
imageSize: {
width: 107,
height: 137
}
});
73 changes: 0 additions & 73 deletions components/molecules/stats-card.tsx
View file
Open in desktop

This file was deleted.

71 changes: 16 additions & 55 deletions components/molecules/tracing-available.tsx
View file
Open in desktop
@@ -1,19 +1,11 @@
import React, {FC} from 'react';
import {
StyleSheet,
TouchableWithoutFeedback,
View,
Text,
Image
} from 'react-native';
import {StyleSheet, Text} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';

import {SingleRow} from '../atoms/layout';

import {colors} from '../../constants/colors';

import {shadows, text} from '../../theme';
import {text} from '../../theme';
import {Card} from '../atoms/card';

const TracingImage = require('../../assets/images/information/alt.png');

Expand All @@ -22,56 +14,25 @@ export const TracingAvailable: FC = () => {
const navigation = useNavigation();

return (
<TouchableWithoutFeedback onPress={() => navigation.navigate('tracing')}>
<View style={styles.card}>
<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>
<Image
accessibilityIgnoresInvertColors
style={styles.iconSize}
{...styles.iconSize}
source={require('../../assets/images/arrow-right/teal.png')}
/>
</SingleRow>
</View>
</TouchableWithoutFeedback>
<Card
padding={{h: 0}}
icon={{
w: 82,
h: 100,
source: TracingImage
}}
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
}
});
18 changes: 5 additions & 13 deletions components/molecules/transmission-chart.tsx
View file
Open in desktop
@@ -1,24 +1,23 @@
import React, {FC} from 'react';
import {StyleSheet, View, ViewStyle, Text} from 'react-native';
import {StyleSheet, View, Text} from 'react-native';

import {colors} from '../../constants/colors';
import {shadows, text} from '../../theme';
import {text} from '../../theme';
import {Card} from '../atoms/card';

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}
Expand Down Expand Up @@ -49,18 +48,11 @@ export const TransmissionChart: FC<TransmissionChartProps> = ({
</View>
</View>
))}
</View>
</Card>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 3,
padding: 16,
...shadows.default
},
title: {
...text.defaultBold,
textAlign: 'center'
Expand Down