From e11d894bd61e6da7860773679a6a8da3e1c2879d Mon Sep 17 00:00:00 2001
From: Cesar <26280794+csrapr@users.noreply.github.com>
Date: Wed, 25 Nov 2020 17:05:31 +0000
Subject: [PATCH] feat: Changed add machine button to be according to spec

---
 new-lamassu-admin/src/components/layout/Header.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js
index 97ae6995..e3ce2d77 100644
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/new-lamassu-admin/src/components/layout/Header.js
@@ -3,9 +3,11 @@ import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
 
-import { Link } from 'src/components/buttons'
+import ActionButton from 'src/components/buttons/ActionButton'
 import { H4 } from 'src/components/typography'
 import AddMachine from 'src/pages/AddMachine'
+import { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'
+import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
 import styles from './Header.styles'
@@ -76,9 +78,14 @@ const Header = memo(({ tree }) => {
                 </NavLink>
               ))}
             </ul>
-            <Link color="action" onClick={() => setOpen(true)}>
-              Add Machine
-            </Link>
+            <ActionButton
+              className={classes.mr}
+              color="secondary"
+              Icon={AddIcon}
+              InverseIcon={AddIconReverse}
+              onClick={() => setOpen(true)}>
+              Add machine
+            </ActionButton>
           </nav>
         </div>
       </div>