[WIP] dividers

front/views/HomeView.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useQuery } from "react-query";
 import API from "../API";
 import LoadingComponent from "../components/Loading";
-import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } from 'native-base';
+import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading, Divider } from 'native-base';
 import { useNavigation } from "@react-navigation/native";
 import SongCardGrid from '../components/SongCardGrid';
 import CompetenciesTable from '../components/CompetenciesTable'
@@ -13,13 +13,16 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 	const nextLevel = level + 1;
 	const nextLevelThreshold = nextLevel * 1000;
 	const progessValue = 100 * xp / nextLevelThreshold;
-	return <VStack alignItems={'center'}>
-		<Text>{`${translate('level')} ${level}`}</Text>
-		<Box w="90%" maxW="400">
-			<Progress value={progessValue} mx="4" />
-		</Box>
-		<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
-	</VStack>
+
+	return (
+		<VStack alignItems={'center'}>
+			<Text>{`${translate('level')} ${level}`}</Text>
+			<Box w="90%" maxW="400">
+				<Progress value={progessValue} mx="4" />
+			</Box>
+			<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
+		</VStack>
+	);
 }
 
 const HomeView = () => {
@@ -28,6 +31,7 @@ const HomeView = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
+
 	if (!userQuery.data) {
 		return <Box style={{ flexGrow: 1, justifyContent: 'center' }}>
 			<LoadingComponent/>
@@ -35,12 +39,14 @@ const HomeView = () => {
 	}
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
+
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
 				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
 				<Box flex={1}>
 					<ProgressBar xp={userQuery.data.xp}/>
 				</Box>
 			</Box>
+
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
 					<SongCardGrid
@@ -52,23 +58,28 @@ const HomeView = () => {
 							songId: 1
 						}))}
 					/>
+
 					<Flex style={{ flexDirection }}>
 						<Box flex={1} paddingY={5}>
 							<Heading>{translate('mySkillsToImprove')}</Heading>
 							<Box padding={5}>
 								<CompetenciesTable
-									pedalsCompetency={Math.random() * 100}
+									pedalsCompetency=	{Math.random() * 100}
 									rightHandCompetency={Math.random() * 100}
-									leftHandCompetency={Math.random() * 100}
-									accuracyCompetency={Math.random() * 100}
-									arpegeCompetency={Math.random() * 100}
-									chordsCompetency={Math.random() * 100}
+									leftHandCompetency=	{Math.random() * 100}
+									accuracyCompetency=	{Math.random() * 100}
+									arpegeCompetency=	{Math.random() * 100}
+									chordsCompetency=	{Math.random() * 100}
 								/>
 							</Box>
 						</Box>
+
+						<Divider bg="red.500" size={1} mx={3} height={500} orientation="vertical"/>
+
 						<Box flex={1}>
 							<SongCardGrid
 								heading={translate('recentlyPlayed')}
+								maxItemPerRow={2}
 								songs={[ ...Array(4).keys() ].map(() => ({
 									albumCover: "",
 									songTitle: "Song",
@@ -77,13 +88,24 @@ const HomeView = () => {
 								}))}
 							/>
 						</Box>
+						
 					</Flex>
 				</Box>
+
+
 				<VStack padding={5} flex={1} space={10}>
+
+				<Divider 
+					bg="red.500" 
+					size={1} 
+					orientation="vertical"
+				/>
+
 					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
 						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
 					</Box>
 					<SongCardGrid
+						maxItemPerRow={2}
 						heading={translate('lastSearched')}
 						songs={[ ...Array(4).keys() ].map(() => ({
 							albumCover: "",
@@ -93,7 +115,9 @@ const HomeView = () => {
 						}))}
 					/>
 				</VStack>
+
 			</Box>
+
 		</Box>
 	</ScrollView>