diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 1931df8..3cf0456 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -96,6 +96,13 @@ class SearchSongs extends React.Component { } class SearchDisc extends React.Component { + getReleaseYear = (release) => { + const releaseDate = new Date(release); + return ( + {releaseDate.getFullYear()} + ) + } + render() { const disc = this.props.disc; return ( @@ -103,7 +110,7 @@ class SearchDisc extends React.Component { {disc.cover_art ? {`Cover : }
- {disc.title} + {disc.title} {disc.date && this.getReleaseYear(disc.date)} {disc.artist[0].name}
diff --git a/src/styles/main.scss b/src/styles/main.scss index 0402cb5..556d51d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,7 +3,8 @@ --white: hsl(0, 0%, 99%); --gray-1: hsl(0, 0%, 95%); --gray-2: hsl(0, 0%, 85%); - --gray-3: hsl(0, 0%, 30%); + --gray-3: hsl(0, 0%, 80%); + --gray-4: hsl(0, 0%, 30%); --black: hsl(0, 0%, 20%); --accent: hsl(354, 81%, 56%); @@ -152,7 +153,7 @@ ul.entity_list { padding-left: 1rem; .small { - color: var(--gray-3); + color: var(--gray-4); font-size: .8rem; } } @@ -175,6 +176,17 @@ ul.entity_list { margin: 1rem; border: 1px solid var(--gray-2) } + + .release-date { + display: inline-block; + font-size: .7rem; + background-color: var(--gray-4);; + color: var(--white); + padding: .1rem .5rem; + border-radius: .25rem; + text-align: center; + line-height: 1; + } } }