diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js index 45d531d1..5cc36b47 100644 --- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js +++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js @@ -14,6 +14,7 @@ import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import Sidebar from 'src/components/layout/Sidebar' import { Info2, P } from 'src/components/typography' +import { ReactComponent as CameraIcon } from 'src/styling/icons/ID/photo/zodiac.svg' 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' @@ -70,8 +71,18 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { Scan QR code with your new cryptomat
-
- +
+ +
+ +

Snap a picture and scan

+
diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js index 8e11e216..75d3c608 100644 --- a/new-lamassu-admin/src/pages/AddMachine/styles.js +++ b/new-lamassu-admin/src/pages/AddMachine/styles.js @@ -126,6 +126,23 @@ const styles = { }, errorMessage: { color: errorColor + }, + qrCodeImageWrapper: { + display: 'flex', + flexDirection: 'column', + backgroundColor: 'white', + border: `5px solid ${primaryColor}`, + padding: 5, + borderRadius: 15 + }, + qrCodeScanMessage: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + margin: [[0, 0, 20, 20]], + '& > p': { + marginLeft: 10 + } } }