From 838de394ab14e3b8dfd172827022abb7d1f59700 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <Priscila.Oliveira@ataccama.com>
Date: Sat, 13 Jan 2018 22:46:11 +0100
Subject: [PATCH] added Edit icon and messages. Next Step Edit Functions. WIP

---
 src/components/Icon/img/edit.svg            | 39 +++++++++++++++
 src/components/Icon/index.js                |  3 +-
 src/containers/Preferences/Content.js       | 54 +++++++++++++--------
 src/containers/Preferences/ContentStyles.js | 11 ++++-
 src/containers/Preferences/Header.js        |  7 ++-
 src/containers/Preferences/messages.js      |  8 +++
 6 files changed, 98 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Icon/img/edit.svg

diff --git a/src/components/Icon/img/edit.svg b/src/components/Icon/img/edit.svg
new file mode 100644
index 0000000..b57662b
--- /dev/null
+++ b/src/components/Icon/img/edit.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<g>
+		<path d="M496.063,62.299l-46.396-46.4c-21.199-21.199-55.689-21.198-76.888,0C352.82,35.86,47.964,340.739,27.591,361.113    c-2.17,2.17-3.624,5.054-4.142,7.875L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    L143,488.549c2.895-0.54,5.741-2.008,7.875-4.143l345.188-345.214C517.311,117.944,517.314,83.55,496.063,62.299z M33.721,478.276    l14.033-75.784l61.746,61.75L33.721,478.276z M140.269,452.585L59.41,371.721L354.62,76.488l80.859,80.865L140.269,452.585z     M474.85,117.979l-18.159,18.161l-80.859-80.865l18.159-18.161c9.501-9.502,24.96-9.503,34.463,0l46.396,46.4    C484.375,93.039,484.375,108.453,474.85,117.979z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index 6a0d561..ceda4f7 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -9,7 +9,8 @@ const iconNames = [
 	'heart-empty',
 	'add',
 	'loading',
-	'image'
+	'image',
+	'edit'
 ]
 
 export const icons = iconNames.reduce((acc, curr) => ({
diff --git a/src/containers/Preferences/Content.js b/src/containers/Preferences/Content.js
index dd3e866..954e1cc 100644
--- a/src/containers/Preferences/Content.js
+++ b/src/containers/Preferences/Content.js
@@ -13,7 +13,7 @@ import Img from 'components/Img'
 import EmptyState from 'components/EmptyState'
 import { grey400 } from 'material-ui/styles/colors'
 import messages from './messages'
-import { LItem, PrimaryText } from './ContentStyles'
+import { LItem, PrimaryText, BGItem } from './ContentStyles'
 
 const iconButtonElement = (
 	<IconButton
@@ -25,14 +25,6 @@ const iconButtonElement = (
 	</IconButton>
 )
 
-const rightIconMenu = func => (
-	<IconMenu iconButtonElement={iconButtonElement}>
-		<MenuItem onClick={func}>
-			<FormattedMessage {...messages['randomQuotes.containers.preferences.delete']} />
-		</MenuItem>
-	</IconMenu>
-)
-
 const getExtractQuoteContent = (onRemove, content) => (
 	content.length > 0 ? (
 		<GridList cols={1} cellHeight='auto'>
@@ -51,7 +43,16 @@ const getExtractQuoteContent = (onRemove, content) => (
 										/>
 									</PrimaryText>
 								}
-								rightIconButton={rightIconMenu(() => onRemove(quote.id))}
+								rightIconButton={
+									<IconMenu iconButtonElement={iconButtonElement}>
+										<MenuItem onClick={() => onRemove(quote.id)}>
+											<FormattedMessage {...messages['randomQuotes.containers.preferences.edit']} />
+										</MenuItem>
+										<MenuItem onClick={() => onRemove(quote.id)}>
+											<FormattedMessage {...messages['randomQuotes.containers.preferences.delete']} />
+										</MenuItem>
+									</IconMenu>
+								}
 							/>
 							<Divider />
 						</div>
@@ -72,7 +73,7 @@ const getExtractBackgroundContent = (onRemove, content) => (
 	content.length > 0 ? (
 		<GridList cols={2} cellHeight={130}>
 			{content.map(background => (
-				<GridTile
+				<BGItem
 					key={background.id}
 					title={background.name}
 					subtitle={
@@ -82,19 +83,30 @@ const getExtractBackgroundContent = (onRemove, content) => (
 						/>
 					}
 					actionIcon={
-						<IconButton onClick={() => onRemove(background.id)} className='btn'>
-							<span className='btn'>
-								<Icon
-									name='garbage'
-									cursor='pointer'
-									sm
-								/>
-							</span>
-						</IconButton>
+						<div>
+							<IconButton onClick={() => onRemove(background.id)} className='btn'>
+								<span className='btn'>
+									<Icon
+										name='edit'
+										cursor='pointer'
+										sm
+									/>
+								</span>
+							</IconButton>
+							<IconButton onClick={() => onRemove(background.id)} className='btn'>
+								<span className='btn'>
+									<Icon
+										name='garbage'
+										cursor='pointer'
+										sm
+									/>
+								</span>
+							</IconButton>
+						</div>
 					}
 				>
 					<Img url={background.url} />
-				</GridTile>
+				</BGItem>
 			))}
 		</GridList>
 	) : (
diff --git a/src/containers/Preferences/ContentStyles.js b/src/containers/Preferences/ContentStyles.js
index 09a4016..a92161a 100644
--- a/src/containers/Preferences/ContentStyles.js
+++ b/src/containers/Preferences/ContentStyles.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import glamorous from 'glamorous'
 import { ListItem } from 'material-ui/List'
+import { GridTile } from 'material-ui/GridList'
 import { white, grey400 } from 'material-ui/styles/colors'
 
 const LItem = glamorous(props => (
@@ -20,8 +21,16 @@ const PrimaryText = glamorous.div({
 	}
 })
 
+const BGItem = glamorous(props => (
+	<GridTile
+		titleStyle={{ width: 100 }}
+		subtitleStyle={{ width: 100 }}
+		{...props}
+	/>
+))()
 
 export {
 	LItem,
-	PrimaryText
+	PrimaryText,
+	BGItem
 }
diff --git a/src/containers/Preferences/Header.js b/src/containers/Preferences/Header.js
index 6c0ff53..ff4e6b7 100644
--- a/src/containers/Preferences/Header.js
+++ b/src/containers/Preferences/Header.js
@@ -23,7 +23,7 @@ const Header = ({
 }) => (
 	category === 'general' ? (
 		<Account cols={6} cellHeight='auto'>
-			<GridItem cols={5} align='middle' justify='left'>
+			<GridItem cols={3} align='middle' justify='left'>
 				<User>
 					<Avatar src={user.photoURL} />
 					<Info>
@@ -32,6 +32,11 @@ const Header = ({
 					</Info>
 				</User>
 			</GridItem>
+			<GridItem cols={2} align='middle' justify='center'>
+				<Action onClick={onLogout} className='btn'>
+					{intl.formatMessage(messages['randomQuotes.containers.preferences.editAccount'])}
+				</Action>
+			</GridItem>
 			<GridItem cols={1} align='middle' justify='center'>
 				<Action onClick={onLogout} className='btn'>
 					{intl.formatMessage(messages['randomQuotes.containers.preferences.logout'])}
diff --git a/src/containers/Preferences/messages.js b/src/containers/Preferences/messages.js
index 1a006e4..596d5d8 100644
--- a/src/containers/Preferences/messages.js
+++ b/src/containers/Preferences/messages.js
@@ -17,6 +17,14 @@ export default defineMessages({
 		id: 'randomQuotes.containers.preferences.delete',
 		defaultMessage: 'Delete'
 	},
+	'randomQuotes.containers.preferences.edit': {
+		id: 'randomQuotes.containers.preferences.edit',
+		defaultMessage: 'Edit'
+	},
+	'randomQuotes.containers.preferences.editAccount': {
+		id: 'randomQuotes.containers.preferences.editAccount',
+		defaultMessage: 'Edit account'
+	},
 	'randomQuotes.containers.preferences.logout': {
 		id: 'randomQuotes.containers.preferences.logout',
 		defaultMessage: 'Logout'