From 8d182a1177466eda89acbac39b4bea6b9b10c130 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Fri, 24 Jul 2020 15:52:50 +0200 Subject: [PATCH] Polish UI --- src/components/App.tsx | 12 ++++++++---- src/components/Results.tsx | 12 +++++++----- src/components/Search.tsx | 27 +++++++++++++++++---------- 3 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 480397d..8ac1f03 100644 --- a/src/components/App.tsx +++ b/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 (
-

Spoti Search

+ + Spoti Search +
{selected && ( @@ -115,6 +116,9 @@ export default function App() { const theme = { global: { + colors: { + brand: 'rgb(24, 177, 147)', + }, font: { family: 'Roboto', size: '18px', diff --git a/src/components/Results.tsx b/src/components/Results.tsx index b238c02..9ed83cd 100644 --- a/src/components/Results.tsx +++ b/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' > {selectedName} - + - + {(size) => ( - + {otherArtists.map((artist) => ( )} - + Discography diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 9ed92cf..2c40c16 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -17,16 +17,23 @@ export const Search = ({ as='section' direction='row' justify='center' - margin={{ vertical: 'large' }} + margin={{ top: 'large' }} > - handleChange(e.target.value)} - onSelect={(target) => handleSelect(target.suggestion)} - placeholder='Type an artist name' - icon={} - dropHeight='large' - suggestions={suggestions} - /> + + handleChange(e.target.value)} + onSelect={(target) => handleSelect(target.suggestion)} + icon={} + dropHeight='large' + placeholder='Type an artist name' + /> + );