Fix: Middle chart legend improved;

Row height halfed, elements aligned, fontsize partially decreased

components/chart/chart-legend.js

@@ -4,15 +4,19 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Typography } from '../../styles'
+import { Sizes, Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
 import { shared as labels } from '../../i18n/en/labels'
 
 const ChartLegend = ({ height }) => {
   return (
     <View style={[styles.container, { height }]}>
-      <AppText style={styles.textBold}>#</AppText>
-      <AppText style={styles.text}>{labels.date}</AppText>
+      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
+        <AppText style={styles.textBold}>#</AppText>
+      </View>
+      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
+        <AppText style={styles.text}>{labels.date}</AppText>
+      </View>
     </View>
   )
 }
@@ -27,8 +31,13 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     width: CHART_YAXIS_WIDTH,
   },
+  singleLabelContainer: {
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
   text: {
     ...Typography.label,
+    fontSize: Sizes.footnote,
   },
   textBold: {
     ...Typography.labelBold,