From 66f01bfc95d4bdb7e222a622823cda60544fd27d Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Mon, 17 Aug 2020 21:19:59 +0200
Subject: [PATCH] Refactor and improve layout

---
 src/components/Album.tsx   |  16 ++--
 src/components/Results.tsx | 166 +++++++++++++++++++------------------
 2 files changed, 96 insertions(+), 86 deletions(-)

diff --git a/src/components/Album.tsx b/src/components/Album.tsx
index 046a5d2..441947b 100644
--- a/src/components/Album.tsx
+++ b/src/components/Album.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, Image } from 'grommet';
+import { Box, Heading } from 'grommet';
 
 import placeholder from '../assets/placeholder-music.jpg';
 
@@ -10,10 +10,16 @@ export const Album = ({ image, name }: { image: string; name: string }) => {
 	}
 
 	return (
-		<Box round='xxsmall' elevation='small' overflow='hidden'>
-			<Box height='300px'>
-				<Image src={image} fit='cover' />
-			</Box>
+		<Box width='255px' margin={{right: '20px'}}>
+			<Box
+				height='255px'
+				width='255px'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
 			<Heading
 				level='4'
 				margin={{ bottom: 'small', top: 'small', left: 'small' }}
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index f7d8d0f..b516df3 100644
--- a/src/components/Results.tsx
+++ b/src/components/Results.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
+import { Box, Heading } from 'grommet';
 
 import { Album } from './Album';
 import { Artists, Albums } from '../interfaces';
@@ -34,87 +34,91 @@ export const Results = ({
 	});
 
 	return (
-		<Grid
-			as='section'
-			rows={['fit', 'fit']}
-			columns={['fit', 'fit']}
-			gap='large'
-			areas={[
-				['title', 'title'],
-				['artist-other', 'artist-other'],
-				['disco-title', 'disco-title'],
-				['discography', 'discography'],
-			]}
-			pad='xlarge'
-		>
-			<Heading
-				level='1'
-				gridArea='title'
-				size='medium'
-				margin={{ vertical: 'none' }}
-			>
-				{selectedName}
-			</Heading>
+		<>
 			<Box
-				gridArea='artist-other'
-				direction='row-responsive'
-				responsive
-				gap='large'
+				width='xxlarge'
+				margin={{
+					vertical: '0',
+					horizontal: 'auto',
+				}}
 			>
-				<Box width={{ min: '300px', max: '300px' }}>
-					<Box
-						round='full'
-						background={{
-							repeat: 'no-repeat',
-							size: 'cover',
-							image: `url(${selectedImage})`,
-						}}
-						height='300px'
-						width='300px'
-					/>
-				</Box>
-				<Box justify='center'>
-					<Heading
-						level='2'
-						margin={{ vertical: 'none' }}
-						size='small'
-					>
-						Other results
-					</Heading>
-					<Box
-						direction='row-reverse'
-						justify='end'
-						wrap
-						gap='medium'
-						width={{ min: '332px' }}
-					>
-						{otherArtists.map((artist) => (
-							<Other
-								key={artist.id}
-								image={artist.image}
-								name={artist.name}
-								handleClick={handleClick}
-							/>
-						))}
+				<Heading level='1' size='medium'>
+					{selectedName}
+				</Heading>
+			</Box>
+			<Box
+				as='section'
+				direction='row'
+				width='xxlarge'
+				margin={{
+					vertical: '0',
+					horizontal: 'auto',
+				}}
+			>
+				<Box
+					direction='column'
+					align='center'
+					width={{ min: '320px', max: '320px' }}
+					margin={{
+						top: '0',
+						bottom: '0',
+						left: '20px',
+						right: '80px',
+					}}
+				>
+					<Box>
+						<Box
+							round='full'
+							background={{
+								repeat: 'no-repeat',
+								size: 'cover',
+								image: `url(${selectedImage})`,
+							}}
+							height='270px'
+							width='270px'
+							margin={{
+								top: '0',
+								bottom: '15px',
+								left: '0',
+								right: '0',
+							}}
+						/>
+					</Box>
+
+					<Box>
+						<Heading
+							level='2'
+							size='small'
+						>
+							Other results
+						</Heading>
+
+						<Box direction='row-reverse' justify='around' wrap>
+							{otherArtists.map((artist) => (
+								<Other
+									key={artist.id}
+									image={artist.image}
+									name={artist.name}
+									handleClick={handleClick}
+								/>
+							))}
+						</Box>
 					</Box>
 				</Box>
-			</Box>
-			<Heading
-				level='2'
-				gridArea='disco-title'
-				size='medium'
-				margin={{ bottom: 'none' }}
-			>
-				Discography
-			</Heading>
-			<ResponsiveContext.Consumer>
-				{(size) => (
-					<Grid
-						gridArea='discography'
-						align='start'
-						columns={{ count: 'fill', size: '260px' }}
-						gap='large'
+
+				<Box
+					direction='column'
+					width={{ min: '320px' }}
+					margin={{ top: '-52px' }}
+				>
+					<Heading
+						level='2'
+						size='medium'
 					>
+						Discography
+					</Heading>
+
+					<Box direction='row' justify='start' wrap>
 						{selectedAlbums.map((album) => (
 							<Album
 								key={album.id}
@@ -122,9 +126,9 @@ export const Results = ({
 								name={album.name}
 							/>
 						))}
-					</Grid>
-				)}
-			</ResponsiveContext.Consumer>
-		</Grid>
+					</Box>
+				</Box>
+			</Box>
+		</>
 	);
 };