Refactor and improve layout

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 width='255px' margin={{right: '20px'}}>
-			<Box height='300px'>
+			<Box
-				<Image src={image} fit='cover' />
+				height='255px'
-			</Box>
+				width='255px'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
 			<Heading
 				level='4'
 				margin={{ bottom: 'small', top: 'small', left: 'small' }}

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,34 +34,39 @@ export const Results = ({
 	});
 
 	return (
-		<Grid
+		<>
-			as='section'
+			<Box
-			rows={['fit', 'fit']}
+				width='xxlarge'
-			columns={['fit', 'fit']}
+				margin={{
-			gap='large'
+					vertical: '0',
-			areas={[
+					horizontal: 'auto',
-				['title', 'title'],
+				}}
-				['artist-other', 'artist-other'],
-				['disco-title', 'disco-title'],
-				['discography', 'discography'],
-			]}
-			pad='xlarge'
-		>
-			<Heading
-				level='1'
-				gridArea='title'
-				size='medium'
-				margin={{ vertical: 'none' }}
 			>
+				<Heading level='1' size='medium'>
 					{selectedName}
 				</Heading>
+			</Box>
 			<Box
-				gridArea='artist-other'
+				as='section'
-				direction='row-responsive'
+				direction='row'
-				responsive
+				width='xxlarge'
-				gap='large'
+				margin={{
+					vertical: '0',
+					horizontal: 'auto',
+				}}
 			>
-				<Box width={{ min: '300px', max: '300px' }}>
+				<Box
+					direction='column'
+					align='center'
+					width={{ min: '320px', max: '320px' }}
+					margin={{
+						top: '0',
+						bottom: '0',
+						left: '20px',
+						right: '80px',
+					}}
+				>
+					<Box>
 						<Box
 							round='full'
 							background={{
@@ -69,25 +74,26 @@ export const Results = ({
 								size: 'cover',
 								image: `url(${selectedImage})`,
 							}}
-						height='300px'
+							height='270px'
-						width='300px'
+							width='270px'
+							margin={{
+								top: '0',
+								bottom: '15px',
+								left: '0',
+								right: '0',
+							}}
 						/>
 					</Box>
-				<Box justify='center'>
+
+					<Box>
 						<Heading
 							level='2'
-						margin={{ vertical: 'none' }}
 							size='small'
 						>
 							Other results
 						</Heading>
-					<Box
+
-						direction='row-reverse'
+						<Box direction='row-reverse' justify='around' wrap>
-						justify='end'
-						wrap
-						gap='medium'
-						width={{ min: '332px' }}
-					>
 							{otherArtists.map((artist) => (
 								<Other
 									key={artist.id}
@@ -99,22 +105,20 @@ export const Results = ({
 						</Box>
 					</Box>
 				</Box>
+
+				<Box
+					direction='column'
+					width={{ min: '320px' }}
+					margin={{ top: '-52px' }}
+				>
 					<Heading
 						level='2'
-				gridArea='disco-title'
 						size='medium'
-				margin={{ bottom: 'none' }}
 					>
 						Discography
 					</Heading>
-			<ResponsiveContext.Consumer>
+
-				{(size) => (
+					<Box direction='row' justify='start' wrap>
-					<Grid
-						gridArea='discography'
-						align='start'
-						columns={{ count: 'fill', size: '260px' }}
-						gap='large'
-					>
 						{selectedAlbums.map((album) => (
 							<Album
 								key={album.id}
@@ -122,9 +126,9 @@ export const Results = ({
 								name={album.name}
 							/>
 						))}
-					</Grid>
+					</Box>
-				)}
+				</Box>
-			</ResponsiveContext.Consumer>
+			</Box>
-		</Grid>
+		</>
 	);
 };