From b932d96d807082cc0bde4e81c5e9f3f6196a6f94 Mon Sep 17 00:00:00 2001
From: sunda <>
Date: Sat, 23 Oct 2021 21:43:57 +0200
Subject: [PATCH] style tweaks

---
 src/components/EpisodeCard/index.js  | 25 ++++++++++++-------------
 src/components/EpisodeCard/styles.js | 26 +++++++++++++++-----------
 src/components/Video/index.js        |  1 -
 src/components/VideoEmbed/index.js   |  1 -
 src/pages/Program/helpers.js         |  1 -
 src/pages/Program/index.js           |  1 -
 6 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/components/EpisodeCard/index.js b/src/components/EpisodeCard/index.js
index 51328cd..4ec8b3b 100644
--- a/src/components/EpisodeCard/index.js
+++ b/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}>
-          <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>
+        <Button>Play now</Button>
       </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>
diff --git a/src/components/EpisodeCard/styles.js b/src/components/EpisodeCard/styles.js
index fa1d461..efb3a99 100644
--- a/src/components/EpisodeCard/styles.js
+++ b/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;
-  height: 215px;
+  width: 25vw;
+  /* height: 215px; */
+  padding-bottom: calc((9 / 16) * 100%);
   background-size: cover;
   position: relative;
   background-position: center;
-  margin-right: 1em;
 `
\ No newline at end of file
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index b63e742..6d657b9 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -64,7 +64,6 @@ const Video = ({ video, org, setInfoActive }) => {
   }
 
   const toggleVideo = () => {
-    console.log('clicked')
     if (isPlaying) {
       pauseVideo()
     } else {
diff --git a/src/components/VideoEmbed/index.js b/src/components/VideoEmbed/index.js
index 35b2e2a..279908d 100644
--- a/src/components/VideoEmbed/index.js
+++ b/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 (
diff --git a/src/pages/Program/helpers.js b/src/pages/Program/helpers.js
index 53eef37..6f1f9aa 100644
--- a/src/pages/Program/helpers.js
+++ b/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')
diff --git a/src/pages/Program/index.js b/src/pages/Program/index.js
index c9bcbed..b054ff0 100644
--- a/src/pages/Program/index.js
+++ b/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}>