From e4ef86af4d18acd99f0c66342d53e032c3e1a66b Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Wed, 10 Jan 2024 12:15:22 +0330 Subject: [PATCH] feat: implement podcasts page design adjustments --- src/components/Podcasts/Podcasts.Lists.tsx | 75 +++++++++------------- src/containers/PodcastsContainer.tsx | 2 +- 2 files changed, 31 insertions(+), 46 deletions(-) diff --git a/src/components/Podcasts/Podcasts.Lists.tsx b/src/components/Podcasts/Podcasts.Lists.tsx index 84ad62c..6219012 100644 --- a/src/components/Podcasts/Podcasts.Lists.tsx +++ b/src/components/Podcasts/Podcasts.Lists.tsx @@ -1,4 +1,4 @@ -import { Button, ChevronDownIcon, Typography } from '@acid-info/lsd-react' +import { Button, ChevronRightIcon, Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' import Image from 'next/image' import Link from 'next/link' @@ -29,32 +29,37 @@ export default function PodcastsLists({ shows }: Props) { {show.logo.alt} - + {show.title} - - {show.numberOfEpisodes} EP - - + + } + > Podcast page - @@ -65,12 +70,7 @@ export default function PodcastsLists({ shows }: Props) { } const PodcastListsContainer = styled(Grid)` - gap: 16px; - - ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { - flex-direction: column; - gap: 24px 16px; - } + gap: var(--lsd-spacing-16); ` const ShowCardContainer = styled(GridItem)`` @@ -82,6 +82,7 @@ const ShowCard = styled(Link)<{ isEven: boolean }>` padding: 24px; border: 1px solid rgb(var(--lsd-text-primary)); box-sizing: border-box; + height: 100%; min-height: 516px; text-decoration: none; background-color: ${(props) => @@ -90,17 +91,14 @@ const ShowCard = styled(Link)<{ isEven: boolean }>` : 'rgb(var(--lsd-surface-primary))'}; ${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'down')} { - min-height: 420px; - } - - ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { - min-height: 374px; + min-height: unset; } ` const ShowInfoContainer = styled.div` display: flex; gap: 16px; + align-items: center; ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { gap: 8px; @@ -137,8 +135,7 @@ const ShowData = styled.div<{ isEven: boolean }>` } ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { - margin-top: 57px; - margin-bottom: 57px; + margin-bottom: var(--lsd-spacing-40); } ` @@ -150,40 +147,28 @@ const ColoredText = styled(Typography)<{ isEven: boolean }>` ` const Description = styled(Typography)` - font-size: var(--lsd-h4-fontSize); - line-height: var(--lsd-h4-lineHeight); - ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { - font-size: var(--lsd-h6-fontSize); - line-height: var(--lsd-h6-lineHeight); + ${lsdUtils.typography('subtitle1')} } ` const ShowButton = styled(Button)<{ isEven: boolean }>` - display: flex; - align-items: center; - padding: 0 10px 0 12px; - width: 122px; - height: 28px; - gap: 12px; + width: auto; + align-self: flex-start; + border: 1px solid ${(props) => props.isEven ? 'rgb(var(--lsd-border-secondary))' : 'rgb(var(--lsd-border-primary))'}; - > span { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - } - - svg { - transform: rotate(-90deg); - } - ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} { - padding: 7px; + align-self: stretch; + justify-content: space-between; + padding: 10px 0px 10px 18px !important; + + .lsd-button__text * { + ${lsdUtils.typography('label1', true)} + } } ` diff --git a/src/containers/PodcastsContainer.tsx b/src/containers/PodcastsContainer.tsx index 6c26a4a..26560b9 100644 --- a/src/containers/PodcastsContainer.tsx +++ b/src/containers/PodcastsContainer.tsx @@ -81,7 +81,7 @@ const PodcastsGrid = styled(Grid)` padding-top: 64px; ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} { - padding-top: 24px; + padding-top: var(--lsd-spacing-8); } `