Polish UI

This commit is contained in:
rui hildt 2020-07-24 15:52:50 +02:00
parent b6a77263c8
commit 8d182a1177
3 changed files with 32 additions and 19 deletions

View File

@ -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',

View File

@ -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>

View File

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