style tweaks

src/components/EpisodeCard/index.js

@@ -5,7 +5,7 @@ import { H2, H3, Label } from '../Text'
 import strings from '../../data/strings'
 import { andList } from '../../helpers/string'
 import { colours } from '../../assets/theme'
-import { Img, Left, Right, Title, Row, Column, StyledButton as Button } from './styles'
+import { Img, Left, Right, Center, Title, Row, Column, StyledButton as Button } from './styles'
 import { useEventApi } from '../../hooks/data'
 
 const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
@@ -18,20 +18,19 @@ const EpisodeCard = ({ image, title, seriesId, beginsOn, id, ...rest }) => {
 
   return (
     <Row align="stretch" {...rest}>
-      <Left >
+      <Left>
         <Link to={`/series/${series.slug}#${id}`}><Img src={image} /></Link>
-        <Column justify="space-between" flex={1}>
+        <Button>Play now</Button>
-          <Title size={24} colour={colours.rose} weight="500">{title}</Title>
-          <div>
-
-            <H3 weight="500">From: <Link textProps={{
-              weight: '700'
-            }} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
-            {hosts ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
-          </div>
-          <Button>Play now</Button>
-        </Column>
       </Left>
+      <Center justify="space-betweeen">
+        <Title size={24} colour={colours.rose} weight="500">{title}</Title>
+        <div>
+          <H3 weight="500" colour={colours.rose}>From: <Link textProps={{
+            weight: '700'
+          }} to={`/series/${series.slug}`}>{`${series.title}: ${series.subtitle}`}</Link></H3>
+          {hosts ? <Label size={16} colour={colours.rose}>— {andList(hosts)}</Label> : null}
+        </div>
+      </Center>
       <Right>
         <Label size={24} colour={colours.rose} weight="600">{startTime}</Label>
       </Right>

src/components/EpisodeCard/styles.js

@@ -8,32 +8,36 @@ export const Row = styled(FlexRow)`
 
 `
 export const Column = styled(FlexColumn)`
-  height: 100%;
+  `
-  max-width: 50%;
-`
 
-export const Left = styled(FlexRow)`
+export const Left = styled(FlexColumn)`
+  margin-right: 1em;
+  `
 
+export const Center = styled(FlexColumn)`
+  max-width: 60%;
 `
 
 export const Title = styled(H2)`
-  /* max-width: 50% */
+  margin-bottom: 1em;
 `
 
 export const Right = styled.div`
-  
+  flex: 1;
+  text-align: right;
 `
 export const StyledButton = styled(Button)`
-  width: max-content;
+  /* width: max-content; */
+  margin-top: 0.5em;
   padding: 0.3em 2em;
 `
 
 export const Img = styled.div`
   background: url(${({ src }) => src});
-  width: 380px;
+  width: 25vw;
-  height: 215px;
+  /* height: 215px; */
+  padding-bottom: calc((9 / 16) * 100%);
   background-size: cover;
   position: relative;
   background-position: center;
-  margin-right: 1em;
 `

src/components/Video/index.js

@@ -64,7 +64,6 @@ const Video = ({ video, org, setInfoActive }) => {
   }
 
   const toggleVideo = () => {
-    console.log('clicked')
     if (isPlaying) {
       pauseVideo()
     } else {

src/components/VideoEmbed/index.js

@@ -4,7 +4,6 @@ import { string } from 'prop-types'
 import { Iframe } from './styles'
 
 const VideoEmbed = ({ url, ...rest }) => {
-  console.log({ url })
   const id = url.split('/').pop()
   const src = `https://tv.undersco.re/videos/embed/${id}?title=0&warningTitle=0&peertubeLink=0`
   return (

src/pages/Program/helpers.js

@@ -27,7 +27,6 @@ export const getScheduleFromData = data => data.filter(item => {
 export const formatDay = (dateTime, lang = 'en') => {
   let day = ''
   const date = new Date(dateTime)
-  console.log({ date })
   if (isToday(date)) day = strings[lang].today
   if (isTomorrow(date)) day = strings[lang].tomorrow
   else day = format(date, 'cccc MMM d')

src/pages/Program/index.js

@@ -15,7 +15,6 @@ const Program = () => {
   const { data } = useEventApi()
 
   const episodes = getScheduleFromData(data.episodes)
-  console.log({ episodes })
 
   return (
     <Page title={strings.en.program}>