From 2c211aadd8b7996f091167a4bb9e4884eb1dd1ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Wed, 20 Jan 2021 16:12:23 +0000
Subject: [PATCH] fix: success message

---
 .../src/pages/AddMachine/AddMachine.js        | 18 ++++++++----
 .../src/pages/AddMachine/styles.js            | 29 +++++++++++++++++--
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
index 0d0a2b4b..b72d771a 100644
--- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
+++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
@@ -15,6 +15,7 @@ import { TextInput } from 'src/components/inputs/formik'
 import Sidebar from 'src/components/layout/Sidebar'
 import { Info2, P } from 'src/components/typography'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
 import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
 import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
 import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
@@ -73,7 +74,7 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {
           <QRCode size={240} fgColor={primaryColor} value={qrCode} />
         </div>
         <div className={classes.qrTextWrapper}>
-          <div className={classes.qrCodeWrapper}>
+          <div className={classes.qrTextInfoWrapper}>
             <div className={classes.qrTextIcon}>
               <WarningIcon />
             </div>
@@ -84,13 +85,18 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {
                 through the button above and scan it with the scanning bay on
                 your machine.
               </P>
-              {hasNewMachine && (
-                <P className={classes.qrText}>
-                  ✔ Machine has been successfully paired!
-                </P>
-              )}
             </div>
           </div>
+          {hasNewMachine && (
+            <div className={classes.successMessageWrapper}>
+              <div className={classes.successMessageIcon}>
+                <CompleteStageIconSpring />
+              </div>
+              <Info2 className={classes.successMessage}>
+                Machine has been successfully paired!
+              </Info2>
+            </div>
+          )}
         </div>
       </div>
     </>
diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js
index a28eb934..f29e9f24 100644
--- a/new-lamassu-admin/src/pages/AddMachine/styles.js
+++ b/new-lamassu-admin/src/pages/AddMachine/styles.js
@@ -3,7 +3,9 @@ import {
   placeholderColor,
   backgroundColor,
   primaryColor,
-  mainWidth
+  mainWidth,
+  spring2,
+  spring3
 } from 'src/styling/variables'
 
 const { tl2, p } = typographyStyles
@@ -55,12 +57,15 @@ const styles = {
   qrCodeWrapper: {
     display: 'flex'
   },
+  qrTextInfoWrapper: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
   qrTextWrapper: {
     width: 381,
     marginLeft: 80,
     display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center'
+    flexDirection: 'column'
   },
   textWrapper: {
     display: 'flex',
@@ -99,6 +104,24 @@ const styles = {
   },
   stepperPast: {
     border: [[1, 'solid', primaryColor]]
+  },
+  successMessageWrapper: {
+    backgroundColor: spring3,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '0px 10px',
+    borderRadius: '8px'
+  },
+  successMessage: {
+    color: spring2,
+    margin: '8px 0px'
+  },
+  successMessageIcon: {
+    marginRight: 16,
+    marginBottom: 2,
+    display: 'flex',
+    flexDirection: 'col',
+    alignItems: 'center'
   }
 }