Change edit icon to pencil

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 }

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")}
         </CommentToPublishedState>
       )}
-      {canEdit ? (
-        <EditButton
-          onClick={() => props.history.push(`/event/${event.id}/edit`)}
-          css={{}}
-        >
-          Edit
-        </EditButton>
-      ) : null}
 
-      <Title>{info.title}</Title>
+      <Title>
+        {info.title}
+        {canEdit ? (
+          <EditIconButton
+            onClick={() => props.history.push(`/event/${event.id}/edit`)}
+            css={{}}
+          >
+            <EditIcon />
+          </EditIconButton>
+        ) : null}
+      </Title>
       {props.occurrence ? (
         <OccurrenceTime>
           <HourIcon />
@@ -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:

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",

packages/qpa/Event/EventForm.tsx

@@ -300,8 +300,8 @@ const EventForm = (props: Props) => {
               )}
             </Field>
             <Footer>
-              <Button type="submit" loading={props.loading} disabled={!isValid}>
-                {isEdit ? intl.get("EDIT") : intl.get("CREATE")}
+              <Button type="submit" loading={props.loading} disabled={!isValid} color="green">
+                {isEdit ? intl.get("save-changes") : intl.get("CREATE")}
               </Button>
               {props.onDeleteEvent ? (
                 <DeleteButton