Skip to content

S
safetcut-app
Commit 1d7b3dba by Prachpawee
Options

update style

parent 0309c6a0
Showing with 41 additions and 39 deletions
src/components/layout/MeterCard.js
import React from 'react'; import React from 'react';
import { Card, View, Row, Icon, Text } from 'native-base'; import { Card, View, Row, Icon, Text } from 'native-base';
import { Image, StyleSheet } from 'react-native'; import { Image, StyleSheet, TouchableOpacity } from 'react-native';
import { color } from '../../constants/Styles'; import { color } from '../../constants/Styles';
const MeterCard = props => { const MeterCard = props => {
return ( return (
<Card style={[styles.cardContainer]}> <TouchableOpacity onPress={() => console.log('Go to Smart meter ' + props.index + '!!')}>
<View style={[styles.imgContainer]}> <Card style={[styles.cardContainer]}>
{props.isOn ? ( <View style={[styles.imgContainer]}>
<View style={[styles.onContainer, { backgroundColor: 'rgba(65, 204, 0, 0.59)' }]}> {props.isOn ? (
<Text style={[styles.onText]}>ON</Text> <View style={[styles.onContainer, { backgroundColor: 'rgba(65, 204, 0, 0.59)' }]}>
</View> <Text style={[styles.onText]}>ON</Text>
) : ( </View>
<View style={[styles.onContainer, { backgroundColor: 'rgba(223, 0, 0, 0.59)' }]}> ) : (
<Text style={[styles.onText]}>OFF</Text> <View style={[styles.onContainer, { backgroundColor: 'rgba(223, 0, 0, 0.59)' }]}>
</View> <Text style={[styles.onText]}>OFF</Text>
)} </View>
<Image )}
source={{ <Image
uri: props.img, source={{
}} uri: props.img,
style={[styles.imgStyle]} }}
/> style={[styles.imgStyle]}
</View> />
<View style={[styles.textContainer]}> </View>
{props.isOnline ? <View style={[styles.online]} /> : null} <View style={[styles.textContainer]}>
{props.isOnline ? <View style={[styles.online]} /> : null}
<Row style={[styles.alignCenter]}> <Row style={[styles.alignCenter]}>
<Text style={[styles.nameStyle]}>{props.deviceName}</Text> <Text style={[styles.nameStyle]}>{props.deviceName}</Text>
<Icon name="people" style={{ color: color.grey3 }} /> <Icon name="people" style={{ color: color.grey3 }} />
</Row> </Row>
<Text style={[styles.descStyle]} numberOfLines={2}> <Text style={[styles.descStyle]} numberOfLines={2}>
{props.description} {props.description}
</Text> </Text>
<Row style={{ marginTop: 10 }}> <Row style={{ marginTop: 10 }}>
<View style={[styles.iconCover]}> <View style={[styles.iconCover]}>
<Icon name="notifications" style={[styles.iconStyle]} /> <Icon name="notifications" style={[styles.iconStyle]} />
</View> </View>
<View style={[styles.iconCover]}> <View style={[styles.iconCover]}>
<Icon name="time" style={[styles.iconStyle]} /> <Icon name="time" style={[styles.iconStyle]} />
</View> </View>
</Row> </Row>
</View> </View>
</Card> </Card>
</TouchableOpacity>
); );
}; };
......
src/constants/Styles.js
...@@ -10,7 +10,7 @@ export const color = { ...@@ -10,7 +10,7 @@ export const color = {
export const theme = StyleSheet.create({ export const theme = StyleSheet.create({
startContainer: { startContainer: {
top: 120, top: '15%',
paddingHorizontal: 50, paddingHorizontal: 50,
}, },
startTitle: { startTitle: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment