diff --git a/packages/qpa-components/Icons.tsx b/packages/qpa-components/Icons.tsx
index 1ea4098..a6cd201 100644
--- a/packages/qpa-components/Icons.tsx
+++ b/packages/qpa-components/Icons.tsx
@@ -8,9 +8,6 @@ import ReplayIcon from '@material-ui/icons/Replay';
import LocationPinIcon from '@material-ui/icons/Room';
import HourIcon from '@material-ui/icons/AccessTime';
import AddPhotoIcon from '@material-ui/icons/AddPhotoAlternate';
+import EditIcon from '@material-ui/icons/Edit';
-
-
-
-
-export { TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon, LocationPinIcon, HourIcon, AddPhotoIcon }
+export { EditIcon, TagIcon, CheckIcon, CrossNoIcon, PlayIcon, StopIcon, DeleteForeverIcon, ReplayIcon, LocationPinIcon, HourIcon, AddPhotoIcon }
diff --git a/packages/qpa/App/Event/EventDetails.tsx b/packages/qpa/App/Event/EventDetails.tsx
index 5ff2ee1..3d8fdac 100644
--- a/packages/qpa/App/Event/EventDetails.tsx
+++ b/packages/qpa/App/Event/EventDetails.tsx
@@ -1,6 +1,8 @@
import { format } from "date-fns"
-import { Button, LocationPinIcon, HourIcon } from "qpa-components"
-import styled, { css, useTheme } from "qpa-emotion"
+import { LocationPinIcon, HourIcon, IconButton, EditIcon } from "qpa-components"
+import styled from "@emotion/styled"
+import css from "@emotion/css"
+import { useTheme } from "qpa-emotion"
import * as React from "react"
import { hot } from "react-hot-loader"
import intl from "react-intl-universal"
@@ -49,16 +51,18 @@ const EventDetails = (props: Props) => {
{intl.get("event-awaiting-mandatory-revision")}
)}
- {canEdit ? (
- props.history.push(`/event/${event.id}/edit`)}
- css={{}}
- >
- Edit
-
- ) : null}
-
{info.title}
+
+ {info.title}
+ {canEdit ? (
+ props.history.push(`/event/${event.id}/edit`)}
+ css={{}}
+ >
+
+
+ ) : null}
+
{props.occurrence ? (
@@ -113,13 +117,16 @@ const EventDetails = (props: Props) => {
)
}
-const EditButton = styled(Button)`
- grid-column: right-margin;
- width: 80px;
-`
+const EditIconButton = styled(IconButton)``
const Title = styled.div`
grid-column: content;
font-size: 32px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ ${EditIconButton} {
+ margin-right: 8px;
+ }
`
const Info = styled.div`
@@ -127,6 +134,7 @@ const Info = styled.div`
`
const Root = styled.div`
+ position: relative;
margin-top: 24px;
display: grid;
grid-template-columns:
diff --git a/packages/qpa/Event/EventForm.msg.json b/packages/qpa/Event/EventForm.msg.json
index f6c9ef4..ec8b759 100644
--- a/packages/qpa/Event/EventForm.msg.json
+++ b/packages/qpa/Event/EventForm.msg.json
@@ -9,7 +9,7 @@
"LOCATION_PLACEHOLDER": "Location's name",
"ADDRESS": "Address",
"ADDRESS_PLACEHOLDER": "Address of the location",
- "EDIT": "Edit Event",
+ "save-changes": "Save changes",
"CREATE": "Create Event",
"EVENT_FORM_INFO_IN_LANGUAGE": "Event details in english",
"en-GB": "English",
@@ -44,7 +44,7 @@
"LOCATION_PLACEHOLDER": "Nombre del lugar",
"ADDRESS": "Dirección",
"ADDRESS_PLACEHOLDER": "Dirección del lugar",
- "EDIT": "Modificar evento",
+ "save-changes": "Guardar cambios",
"CREATE": "Crear evento",
"EVENT_FORM_INFO_IN_LANGUAGE": "Detalles del evento en español",
"en-GB": "Inglés",
diff --git a/packages/qpa/Event/EventForm.tsx b/packages/qpa/Event/EventForm.tsx
index 576dfa0..16ad3d0 100644
--- a/packages/qpa/Event/EventForm.tsx
+++ b/packages/qpa/Event/EventForm.tsx
@@ -300,8 +300,8 @@ const EventForm = (props: Props) => {
)}