update smart device card

components/MeterCard.js

@@ -12,10 +12,8 @@ const MeterCard = ({ item, onPressEachCard }) => {
 					styles.meterOn,
 					{ backgroundColor: item.breakerStatus === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
 				]}
-			>
-				<Text style={[theme.description, theme.textWhite]}>{item.breakerStatus === 1 ? 'ON' : 'OFF'}</Text>
-			</View>
-			<View style={[theme.centerContainer]}>
+			></View>
+			<View style={[theme.centerContainer, { paddingLeft: 10 }]}>
 				{item.img ? (
 					<Image source={{ uri: item.img }} style={styles.meterImgStyle} />
 				) : (
@@ -25,25 +23,15 @@ const MeterCard = ({ item, onPressEachCard }) => {
 				)}
 			</View>
 			<View style={[theme.containerWithPadding, { flex: 2 }]}>
-				<Row style={{ alignItems: 'center' }}>
-					<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text>
-				</Row>
-				<Text style={[theme.description]} numberOfLines={2}>
+				<Text style={[theme.smallTitle]}>{item.name}</Text>
+				<Text style={[theme.description, theme.mt1]} numberOfLines={2}>
 					{item.description}
 				</Text>
-				<Row style={{ marginTop: 10 }}>
-					<View style={[styles.meterIconCover]}>
-						<Icon name="ios-notifications-outline" style={styles.meterIconStyle} />
-					</View>
-					<View style={styles.meterIconCover}>
-						<Icon name="md-alarm" style={styles.meterIconStyle} />
-					</View>
-				</Row>
 			</View>
 			<View style={[theme.rowContainer, { position: 'absolute', top: 10, right: 5 }]}>
-				<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
-				<Icon name={item.isSharing ? 'users' : 'user'} type="FontAwesome" style={styles.iconStyle} />
 				<View style={[styles.online, { backgroundColor: item.isOnline ? '#10ca88' : color.primary }]} />
+				<Icon name={item.isSharing ? 'users' : 'user'} type="FontAwesome" style={styles.iconStyle} />
+				<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
 			</View>
 		</>
 	);
@@ -63,14 +51,11 @@ export default MeterCard;
 
 const styles = StyleSheet.create({
 	meterOn: {
-		top: 7,
-		left: 5,
-		width: 35,
-		paddingVertical: 1,
-		borderRadius: 9.6,
+		top: 0,
+		left: 0,
+		bottom: 0,
+		width: 10,
 		position: 'absolute',
-		alignItems: 'center',
-		justifyContent: 'center',
 	},
 	meterImgStyle: {
 		width: 50,
@@ -116,5 +101,6 @@ const styles = StyleSheet.create({
 		shadowRadius: 3.84,
 		elevation: 5,
 		backgroundColor: '#fff',
+		overflow: 'hidden',
 	},
 });