Polish UI

src/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Grommet } from 'grommet';
+import { Grommet, Heading } from 'grommet';
 import { debounce } from 'lodash';
 import { gql, useLazyQuery } from '@apollo/client';
 
@@ -8,7 +8,6 @@ import { Search } from './Search';
 import { Results } from './Results';
 import { Artists, Artist } from '../interfaces';
 
-
 const QUERY_ARTISTS = gql`
 	query Artist($byName: String!) {
 		queryArtists(byName: $byName) {
@@ -98,12 +97,14 @@ export default function App() {
 	return (
 		<Grommet theme={theme}>
 			<Header>
-				<h1>Spoti Search</h1>
+				<Heading level='1' margin={{ vertical: 'small' }} color='light-1'>
+					Spoti Search
+				</Heading>
 			</Header>
 			<Search
 				inputValue={inputValue}
-				handleChange={handleChange}
 				suggestions={suggestions}
+				handleChange={handleChange}
 				handleSelect={handleSelect}
 			/>
 			{selected && (
@@ -115,6 +116,9 @@ export default function App() {
 
 const theme = {
 	global: {
+		colors: {
+			brand: 'rgb(24, 177, 147)',
+		},
 		font: {
 			family: 'Roboto',
 			size: '18px',

src/components/Results.tsx

@@ -38,22 +38,24 @@ export const Results = ({
 			as='section'
 			rows={['fit', 'fit']}
 			columns={['fit', '2/3']}
-			gap='small'
+			gap='large'
 			areas={[
 				['artist-title', 'other-title'],
 				['artist', 'other'],
 				['disco-title', 'disco-title'],
 				['discography', 'discography'],
 			]}
+			pad='xlarge'
 		>
 			<Heading
 				level='1'
+				size='small'
 				gridArea='artist-title'
 				margin={{ vertical: 'none' }}
 			>
 				{selectedName}
 			</Heading>
-			<Grid gridArea='artist' margin={{ bottom: 'medium' }}>
+			<Box gridArea='artist'>
 				<Box
 					round='full'
 					background={{
@@ -64,7 +66,7 @@ export const Results = ({
 					height='300px'
 					width='300px'
 				/>
-			</Grid>
+			</Box>
 			<Heading
 				level='2'
 				gridArea='other-title'
@@ -76,7 +78,7 @@ export const Results = ({
 			</Heading>
 			<ResponsiveContext.Consumer>
 				{(size) => (
-					<Box gridArea='other' direction='row' wrap>
+					<Box gridArea='other' direction='row-reverse' justify='end' wrap gap='medium'>
 						{otherArtists.map((artist) => (
 							<Other
 								key={artist.id}
@@ -88,7 +90,7 @@ export const Results = ({
 					</Box>
 				)}
 			</ResponsiveContext.Consumer>
-			<Heading level='2' gridArea='disco-title' size='large'>
+			<Heading level='2' gridArea='disco-title' size='large' margin={{bottom: "none"}}>
 				Discography
 			</Heading>
 			<ResponsiveContext.Consumer>

src/components/Search.tsx

@@ -17,16 +17,23 @@ export const Search = ({
 		as='section'
 		direction='row'
 		justify='center'
-		margin={{ vertical: 'large' }}
+		margin={{ top: 'large' }}
 	>
-		<TextInput
+		<Box
-			value={inputValue}
+			as='div'
-			onChange={e => handleChange(e.target.value)}
+			margin={{ vertical: 'none' }}
-			onSelect={(target) => handleSelect(target.suggestion)}
+			width='500px'
-			placeholder='Type an artist name'
+
-			icon={<FormSearch color='plain' />}
+		>
-			dropHeight='large'
+			<TextInput
-			suggestions={suggestions}
+				value={inputValue}
-		/>
+				suggestions={suggestions}
+				onChange={(e) => handleChange(e.target.value)}
+				onSelect={(target) => handleSelect(target.suggestion)}
+				icon={<FormSearch color='plain' />}
+				dropHeight='large'
+				placeholder='Type an artist name'
+			/>
+		</Box>
 	</Box>
 );