{message}
{confirmationMessage}
{it.label || it.value}
{it.type}
+ {it.label || it.value} +
{'Filters:'}
- {`${prefixText} ${options - .find(it => it.code === currentCode) - .display.toLowerCase()}`} -
{props.warningMessage}
{option.description}
Loading...
Run diagnostics to generate a report
This page should refresh automatically
Please try again. If the problem persists, contact support.
+ {items[0].value} +
+ {items[1].value} +
diff --git a/new-lamassu-admin/src/components/typography/styles.js b/new-lamassu-admin/src/components/typography/styles.js index 35470d9d..1d3f9fc8 100644 --- a/new-lamassu-admin/src/components/typography/styles.js +++ b/new-lamassu-admin/src/components/typography/styles.js @@ -7,8 +7,7 @@ import { fontSize5, fontPrimary, fontSecondary, - fontMonospaced, - codeInputFontSize + fontMonospaced } from 'src/styling/variables' const base = { @@ -17,6 +16,10 @@ const base = { } export default { + base: { + lineHeight: '120%', + color: fontColor + }, h1: { extend: base, fontSize: fontSize1, @@ -126,12 +129,6 @@ export default { fontWeight: 500, color: fontColor }, - confirmationCode: { - extend: base, - fontSize: codeInputFontSize, - fontFamily: fontSecondary, - fontWeight: 900 - }, inline: { display: 'inline' }, diff --git a/new-lamassu-admin/src/components/typography/typography.module.css b/new-lamassu-admin/src/components/typography/typography.module.css new file mode 100644 index 00000000..b08fa5de --- /dev/null +++ b/new-lamassu-admin/src/components/typography/typography.module.css @@ -0,0 +1,140 @@ +.base { + line-height: 120%; + color: var(--zodiac); +} + +.h1 { + composes: base; + font-size: 24px; + font-family: var(--mont); + font-weight: 900; +} + +.h2 { + composes: base; + font-size: 20px; + font-family: var(--mont); + font-weight: 900; +} + +.h3 { + composes: base; + font-size: 14px; + font-family: var(--mont); + font-weight: 900; +} + +.h4 { + composes: base; + font-size: 14px; + font-family: var(--mont); + font-weight: 700; +} + +.h5 { + composes: base; + font-size: 16px; + font-family: var(--mont); + font-weight: 700; +} + +.p { + composes: base; + font-size: 14px; + font-family: var(--museo); + font-weight: 500; +} + +.tl1 { + composes: base; + font-size: 20px; + font-family: var(--museo); + font-weight: 700; +} + +.tl2 { + composes: base; + font-size: 14px; + font-family: var(--museo); + font-weight: 700; +} + +.info1 { + composes: base; + font-size: 24px; + font-family: var(--museo); + font-weight: 700; +} + +.info2 { + composes: base; + font-size: 16px; + font-family: var(--museo); + font-weight: 700; +} + +.info3 { + composes: base; + font-size: 16px; + font-family: var(--museo); + font-weight: 500; +} + +.mono { + composes: base; + font-size: 14px; + font-family: var(--bpmono); + font-weight: 500; +} + +.monoBold { + font-weight: 700; +} + +.monoSmall { + font-size: 13px; +} + +.inputFont { + font-size: 20px; + font-family: var(--museo); + font-weight: 500; + line-height: 110%; + color: var(--zodiac); +} + +.regularLabel { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + line-height: 110%; +} + +.label1 { + font-size: 13px; + font-family: var(--museo); + font-weight: 500; + color: var(--zodiac); +} + +.label2 { + font-size: 13px; + font-family: var(--museo); + font-weight: 700; + color: var(--zodiac); +} + +.label3 { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + color: var(--zodiac); +} + +.inline { + display: inline; +} + +.noMargin { + margin: 0; +} diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx index 03249806..55930c41 100644 --- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx +++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx @@ -1,12 +1,11 @@ -import { useMutation, useQuery, gql } from "@apollo/client"; +import { useMutation, useQuery, gql } from '@apollo/client' import Dialog from '@mui/material/Dialog' import DialogContent from '@mui/material/DialogContent' import SvgIcon from '@mui/material/SvgIcon' import IconButton from '@mui/material/IconButton' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Form, Formik, FastField } from 'formik' -import {QRCodeSVG as QRCode} from 'qrcode.react' +import { QRCodeSVG as QRCode } from 'qrcode.react' import * as R from 'ramda' import React, { memo, useState, useEffect, useRef } from 'react' import Title from 'src/components/Title' @@ -25,8 +24,6 @@ import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { primaryColor } from 'src/styling/variables' -import styles from './styles' - const SAVE_CONFIG = gql` mutation createPairingTotem($name: String!) { createPairingTotem(name: $name) @@ -41,11 +38,9 @@ const GET_MACHINES = gql` } ` -const useStyles = makeStyles(styles) - const getSize = R.compose(R.length, R.pathOr([], ['machines'])) -const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { +const QrCodeComponent = ({ qrCode, name, count, onPaired }) => { const timeout = useRef(null) const CLOSE_SCREEN_TIMEOUT = 2000 const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 }) @@ -69,43 +64,42 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { return ( <> - - Scan QR code with your new cryptomat - -
Snap a picture and scan
+ Snap a picture and scan +
- To pair the machine you need scan the QR code with your machine. - To do this either snap a picture of this QR code or download it - through the button above and scan it with the scanning bay on - your machine. -
+ To pair the machine you need scan the QR code with your machine. + To do this either snap a picture of this QR code or download it + through the button above and scan it with the scanning bay on your + machine. +
{errors.message}
{label}
+
{R.length(data)}{' '} {singularOrPlural(R.length(data), 'transaction', 'transactions')}
{numberToFiatAmount(transactions.volume)} {currency} in volume
{errorMessage}
- {getErrorMsg(errors, touched)} -
{getErrorMsg(errors, touched)}
{getErrorMsg( errors, touched, @@ -214,15 +209,12 @@ const LoginState = ({ state, dispatch, strategy }) => { payload: {} }) }} - buttonClassName={classes.loginButton} - className={classes.fidoLoginButtonWrapper}> + buttonClassName="w-full" + className="mb-3"> I have a hardware key )} - + Login
{getErrorMsg( errors, touched, @@ -193,7 +189,7 @@ const Register = () => { + buttonClassName="w-full"> Done
{getErrorMsg()}
{getErrorMsg(errors, touched, error)}
Enable paper wallet (only)
Reject reused addresses
Transaction fudge factor
You are about to activate cash-out functionality on your {name}{' '} machine which will allow your customers to sell crypto to you. @@ -68,7 +24,7 @@ const WizardSplash = ({ name, onContinue }) => { denominations for the machine.
-