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 }) => {
-
+
@@ -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.
- {hasNewMachine && (
-
- ✔ Machine has been successfully paired!
-
- )}
+ {hasNewMachine && (
+
+
+
+
+
+ Machine has been successfully paired!
+
+
+ )}
>
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'
}
}