update timer style

components/SlideUpModal.js

@@ -8,11 +8,12 @@ export default class SlideUpModal extends React.Component {
 	};
 
 	componentDidMount() {
+		const topValue = this.props.ending * height;
 		Animated.timing(
 			// Animate over time
 			this.state.slide, // The animated value to drive
 			{
-				toValue: height * 0.3, // Animate to opacity: 1 (opaque)
+				toValue: topValue, // Animate to opacity: 1 (opaque)
 				duration: 500, // Make it take a while
 			}
 		).start(); // Starts the animation

components/SwipeableRow.js

@@ -16,9 +16,11 @@ const Row = ({ data }) => {
 		<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
 			<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
 				<View style={{ flex: 1 }}>
-					<Text style={[theme.title]}>
+					<Text style={[theme.title, { color: !data.active && color.grey }]}>
 						{format(data.time, 'h:mm')}{' '}
-						<Text style={[theme.description, theme.textDark]}>{format(data.time, 'A')}</Text>
+						<Text style={[theme.description, theme.textDark, { color: !data.active && color.grey }]}>
+							{format(data.time, 'A')}
+						</Text>
 					</Text>
 					<View style={theme.rowContainer}>
 						{data.repeatDays.map((item, index) => (
@@ -43,7 +45,9 @@ const Row = ({ data }) => {
 					</View>
 				</View>
 				<View style={{ flex: 1 }}>
-					<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text>
+					<Text style={[theme.title, { fontWeight: 'normal', color: !data.active && color.grey }]}>
+						{data.name}
+					</Text>
 					<Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
 				</View>
 				<View style={{ flex: 1, alignItems: 'flex-end' }}>
@@ -185,7 +189,7 @@ const styles = StyleSheet.create({
 		backgroundColor: color.primary,
 		color: color.white,
 		justifyContent: 'center',
-		borderRadius: 9,
+		borderRadius: 100,
 	},
 	cfDelOverlay: {
 		padding: 20,