diff --git a/src/renderer/pages/foryou/ForYouPage.tsx b/src/renderer/pages/foryou/ForYouPage.tsx index 6d4a1b67..2fb0cffe 100644 --- a/src/renderer/pages/foryou/ForYouPage.tsx +++ b/src/renderer/pages/foryou/ForYouPage.tsx @@ -12,12 +12,11 @@ import { NormalizedPersonalizedItem, SoundCloud } from '../../../types'; import Header from '../../app/components/Header/Header'; import CustomScroll from '../../_shared/CustomScroll'; import Spinner from '../../_shared/Spinner/Spinner'; +import TrackGridItem from '../../_shared/TracksGrid/TrackgridItem/TrackGridItem'; import WithHeaderComponent from '../../_shared/WithHeaderComponent'; import { PersonalizedPlaylistCard } from './components/PersonalizedPlaylistCard/PersonalizedPlaylistCard'; import * as styles from './ForYouPage.module.scss'; -import TrackGridItem from '../../_shared/TracksGrid/TrackgridItem/TrackGridItem'; -import { show } from 'redux-modal'; - +import * as moment from 'moment'; interface OwnProps extends RouteComponentProps<{}> { } @@ -113,7 +112,12 @@ class ForYou extends WithHeaderComponent { ); } - renderPlaylist = (title: string, description: string, systemPlaylistIds: Array = [], playlistIds: Array = []) => { + renderPlaylist = ( + title: string, + description: string, + systemPlaylistIds: Array = [], + playlistIds: Array = [] + ) => { const ids = systemPlaylistIds.length ? systemPlaylistIds : playlistIds; const shown = this.state.itemsOpen[title] || 6; @@ -139,7 +143,7 @@ class ForYou extends WithHeaderComponent { key={id} className='col-12 col-xs-6 col-md-4' > - + ); }) diff --git a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss index 12ed5dff..6fd96fe8 100644 --- a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss +++ b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss @@ -2,16 +2,15 @@ .card { margin-bottom: 2rem; text-align: center; - background: rgb(157, 218, 238); - box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.08); border-radius: 8px; display: block; text-decoration: none !important; color: inherit !important; - transition: .3s ease-in box-shadow; - &:hover { - box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.2); - } +} + +.updated { + font-size: .8rem; + color: grey; } .title { @@ -22,13 +21,19 @@ } .content { - padding: 2.5rem .8rem; + padding: 2.5rem .8rem; position: relative; z-index: 1; overflow: hidden; border-radius: 8px; color: white; min-height: 248px; + transition: .3s ease-in box-shadow; + box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.08); + &:hover { + box-shadow: 0 10px 60px rgba(0, 0, 0, 0.03), 0 6px 50px rgba(0, 0, 0, 0.2); + } + &:after { content: ""; position: absolute; diff --git a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts index 76e33c2d..216c837e 100644 --- a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts +++ b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.module.scss.d.ts @@ -1,4 +1,5 @@ export const card: string; +export const updated: string; export const title: string; export const content: string; export const bgImage: string; diff --git a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx index 48739b5a..c8eaf0f6 100644 --- a/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx +++ b/src/renderer/pages/foryou/components/PersonalizedPlaylistCard/PersonalizedPlaylistCard.tsx @@ -4,23 +4,27 @@ import * as ColorHash from 'color-hash'; import * as styles from './PersonalizedPlaylistCard.module.scss'; import { Link } from 'react-router-dom'; import TextShortener from '../../../../_shared/TextShortener'; +import moment = require('moment'); const colorHash = new ColorHash({ saturation: .7, lightness: .775 }); interface Props { playlist: SoundCloud.SystemPlaylist; title?: string; + system?: boolean; } -export const PersonalizedPlaylistCard = React.memo(({ playlist, title }) => { +export const PersonalizedPlaylistCard = React.memo(({ playlist, title, system }) => { return ( -
+
(({ playlist, title })
{playlist.short_description || playlist.title || title}
+ { + system && playlist.last_updated && ( + Last updated {moment(new Date(playlist.last_updated)).fromNow()} + ) + } ); });