Bit of design layout of details page

packages/qpa-components/Icons.tsx

@@ -5,6 +5,10 @@ import PlayIcon from "@material-ui/icons/PlayCircleOutline"
 import StopIcon from '@material-ui/icons/Stop';
 import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
 import ReplayIcon from '@material-ui/icons/Replay';
+import LocationPinIcon from '@material-ui/icons/Room';
+import HourIcon from '@material-ui/icons/AccessTime';
 
 
-export { TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon }
+
+
+export { TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon, LocationPinIcon, HourIcon }

packages/qpa/App/App.msg.json

@@ -7,7 +7,14 @@
     "th": "Th",
     "fr": "Fr",
     "sa": "Sa",
-    "su": "Su"
+    "su": "Su",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "sunday": "Sunday"
   },
   "es": {
     "APP_TITLE": "Events in the Alpujarra",
@@ -17,6 +24,13 @@
     "th": "Ju",
     "fr": "Vi",
     "sa": "Sa",
-    "su": "Do"
+    "su": "Do",
+    "monday": "Lunes",
+    "tuesday": "Martes",
+    "wednesday": "Miercoles",
+    "thursday": "Jueves",
+    "friday": "Viernes",
+    "saturday": "Sabado",
+    "sunday": "Domingo"
   }
 }

packages/qpa/App/Event/EventDetails.msg.json

@@ -2,11 +2,13 @@
   "en-GB": {
     "upload-cover-image": "Upload cover image",
     "upload-poster-image": "Upload poster image",
-    "event-awaiting-mandatory-revision": "This event is pending revision. Our team will soon revise this event and set it online!"
+    "event-awaiting-mandatory-revision": "This event is pending revision. Our team will soon revise this event and set it online!",
+    "at-time": "at"
   },
   "es-ES": {
     "upload-cover-image": "Subir imagen de fondo",
     "upload-poster-image": "Subir imagen de cartel",
-    "event-awaiting-mandatory-revision": "Este evento está pendiente de una revisión. ¡Nuestro equipo revisará este evento pronto y lo publicarémos!"
+    "event-awaiting-mandatory-revision": "Este evento está pendiente de una revisión. ¡Nuestro equipo revisará este evento pronto y lo publicarémos!",
+    "at-time": "a las"
   }
 }

packages/qpa/App/Event/EventDetails.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns"
-import { Button } from "qpa-components"
+import { Button, LocationPinIcon, HourIcon } from "qpa-components"
 import styled, { css, useTheme } from "qpa-emotion"
 import * as React from "react"
 import { hot } from "react-hot-loader"
@@ -35,6 +35,7 @@ const EventDetails = (props: Props) => {
 
   const info =
     event.infos.find(info => info.language === language) || event.infos[0]
+
   return (
     <Root>
       {event.revisionState ===
@@ -57,12 +58,34 @@ const EventDetails = (props: Props) => {
       ) : null}
 
       <Title>{info.title}</Title>
-      <StyledEventTags tags={event.tags} language={language} />
-      <PosterImage
+      {props.occurrence ? (
+        <OccurrenceTime>
+            <HourIcon />
+          {(() => {
+            const startDate = new Date(props.occurrence.start)
+            const day = intl.get(format(startDate, "iiii").toLowerCase())
+            const fullDay = format(startDate, "dd-MM-yyyy")
+            const time = format(startDate, "HH:mm")
+            return `${day}, ${fullDay} ${intl.get('at-time')} ${time}`
+          })()}
+        </OccurrenceTime>
+      ) : null}
+      <Location
         css={css`
-          background-image: url(${event.images.poster?.url});
           grid-column: content;
-          height: 400px;
+        `}
+      >
+        <LocationPinIcon />
+        <div>
+          {event.location.name} <br /> {event.location.address}
+        </div>
+      </Location>
+      <StyledEventTags tags={event.tags} language={language} />
+      <img
+        src={event.images.poster?.url}
+        css={css`
+          grid-column: content;
+          width: 100%;
         `}
       >
         {canEdit ? (
@@ -76,12 +99,7 @@ const EventDetails = (props: Props) => {
             `}
           />
         ) : null}
-      </PosterImage>
-      {props.occurrence ? (
-        <OccurrenceTime>
-          {format(new Date(props.occurrence.start), "yyyy-MM-dd HH:mm")}
-        </OccurrenceTime>
-      ) : null}
+      </img>
       <Info>
         {info.description.split("\n").map((descLine, i) => (
           <p key={i}>{descLine}</p>
@@ -135,12 +153,30 @@ const PosterImage = styled.div`
     }
   }
 `
+
+const Location = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  svg {
+    margin-right: 8px;
+  }
+`
+
 const StyledEventTags = styled(EventTags)`
   grid-column: content;
 `
 
 const OccurrenceTime = styled.div`
   grid-column: content;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  svg {
+    margin-right: 8px;
+  }
 `
 
 const CommentToPublishedState = styled.div`

packages/qpa/App/Event/useEventDetailsQuery.ts

@@ -45,6 +45,10 @@ export const EventDetailsDataFragment = gql`
       start
       end
     }
+    location {
+      address
+      name
+    }
     publishedState
     revisionState
     images {
@@ -94,6 +98,10 @@ export interface EventDetailsData {
   revisionState: EventRevisionState
   publishedState: EventPublishedState
   images: EventImagesData
+  location: {
+    name: string
+    address: string
+  }
   occurrences: {
     id: string
     start: string