)
}
-const Tr = ({ children }) => {
+const Tr = ({ error, errorMessage, children }) => {
const classes = useStyles()
- const epClasses = { root: classes.panelRoot, expanded: classes.panelExpanded }
- const summaryClasses = { root: classes.summaryRoot, content: classes.summaryContent, focused: classes.summaryFocused }
+ const cardClasses = { root: classes.cardContentRoot }
+ const classNames = {
+ [classes.trError]: error
+ }
return (
-
+
)
}
diff --git a/new-lamassu-admin/src/components/inputs/autocomplete/Autocomplete.js b/new-lamassu-admin/src/components/inputs/autocomplete/Autocomplete.js
index 1da63405..dec2a6f8 100644
--- a/new-lamassu-admin/src/components/inputs/autocomplete/Autocomplete.js
+++ b/new-lamassu-admin/src/components/inputs/autocomplete/Autocomplete.js
@@ -35,13 +35,15 @@ const Autocomplete = memo(({ suggestions, classes, placeholder, label, itemToStr
}) => (
{renderInput({
+ id: name,
fullWidth: true,
classes,
- onBlur,
- error: touched[name] && errors[name],
+ error: (touched[`${name}-input`] || touched[name]) && errors[name],
+ success: (touched[`${name}-input`] || touched[name] || value) && !errors[name],
InputProps: getInputProps({
value: inputValue2 || '',
placeholder,
+ onBlur,
onClick: () => toggleMenu(),
onChange: it => {
if (it.target.value === '') {
diff --git a/new-lamassu-admin/src/components/inputs/autocomplete/AutocompleteMultiple.js b/new-lamassu-admin/src/components/inputs/autocomplete/AutocompleteMultiple.js
index 08a6c7aa..e53a85c6 100644
--- a/new-lamassu-admin/src/components/inputs/autocomplete/AutocompleteMultiple.js
+++ b/new-lamassu-admin/src/components/inputs/autocomplete/AutocompleteMultiple.js
@@ -60,10 +60,11 @@ const AutocompleteMultiple = memo(
}) => (
{renderInput({
+ id: name,
fullWidth: true,
classes,
- onBlur,
- error: touched[name] && errors[name],
+ error: (touched[`${name}-input`] || touched[name]) && errors[name],
+ success: (touched[`${name}-input`] || touched[name] || value) && !errors[name],
InputProps: getInputProps({
startAdornment: (value || []).map(item => (
)),
+ onBlur,
onChange: it => setInputValue(it.target.value),
onClick: () => toggleMenu(),
onKeyDown: handleKeyDown,
diff --git a/new-lamassu-admin/src/components/inputs/autocomplete/commons.js b/new-lamassu-admin/src/components/inputs/autocomplete/commons.js
index c309a789..a52e3759 100644
--- a/new-lamassu-admin/src/components/inputs/autocomplete/commons.js
+++ b/new-lamassu-admin/src/components/inputs/autocomplete/commons.js
@@ -6,7 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem'
import { fontColor, inputFontSize, inputFontWeight } from '../../../styling/variables'
function renderInput (inputProps) {
- const { InputProps, classes, ref, ...other } = inputProps
+ const { onBlur, success, InputProps, classes, ref, ...other } = inputProps
return (
({
inputInput: {
flex: 1
},
+ success: {
+ '&:after': {
+ transform: 'scaleX(1)'
+ }
+ },
divider: {
height: theme.spacing(2)
}
diff --git a/new-lamassu-admin/src/components/typography/index.js b/new-lamassu-admin/src/components/typography/index.js
index 18ac1e56..127ad39a 100644
--- a/new-lamassu-admin/src/components/typography/index.js
+++ b/new-lamassu-admin/src/components/typography/index.js
@@ -25,22 +25,25 @@ function H4 ({ children, className, ...props }) {
return {children}
}
-const P = pBuilder()
+const P = pBuilder('p')
const Info1 = pBuilder('info1')
const Info2 = pBuilder('info2')
const Info3 = pBuilder('info3')
-const Info4 = pBuilder('info4')
const Mono = pBuilder('mono')
const TL1 = pBuilder('tl1')
const TL2 = pBuilder('tl2')
+const Label1 = pBuilder('label1')
+const Label2 = pBuilder('label2')
+const Label3 = pBuilder('label3')
function pBuilder (elementClass) {
- return ({ inline, className, children, ...props }) => {
+ return ({ inline, noMargin, className, children, ...props }) => {
const classes = useStyles()
const classNames = {
[classes[elementClass]]: elementClass,
className: true,
- [classes.inline]: inline
+ [classes.inline]: inline,
+ [classes.noMarginP]: noMargin
}
return (
@@ -50,4 +53,4 @@ function pBuilder (elementClass) {
}
}
-export { H1, H2, H3, H4, TL1, TL2, P, Info1, Info2, Info3, Info4, Mono }
+export { H1, H2, H3, H4, TL1, TL2, P, Info1, Info2, Info3, Mono, Label1, Label2, Label3 }
diff --git a/new-lamassu-admin/src/components/typography/styles.js b/new-lamassu-admin/src/components/typography/styles.js
index 30e262d0..2c4ed79a 100644
--- a/new-lamassu-admin/src/components/typography/styles.js
+++ b/new-lamassu-admin/src/components/typography/styles.js
@@ -70,6 +70,12 @@ export default {
fontFamily: fontSecondary,
fontWeight: 700
},
+ info3: {
+ extend: base,
+ fontSize: fontSize3,
+ fontFamily: fontSecondary,
+ fontWeight: 500
+ },
mono: {
extend: base,
fontSize: fontSize4,
@@ -95,7 +101,7 @@ export default {
fontWeight: 500,
lineHeight: '110%'
},
- label: {
+ label1: {
fontSize: fontSize5,
fontFamily: fontSecondary,
fontWeight: 500
@@ -105,6 +111,12 @@ export default {
fontFamily: fontSecondary,
fontWeight: 700
},
+ label3: {
+ fontSize: fontSize4,
+ fontFamily: fontSecondary,
+ fontWeight: 500,
+ color: fontColor
+ },
select: {
fontSize: fontSize3,
fontFamily: fontSecondary,
@@ -112,5 +124,8 @@ export default {
},
inline: {
display: 'inline'
+ },
+ noMarginP: {
+ margin: 0
}
}
diff --git a/new-lamassu-admin/src/pages/Funding.js b/new-lamassu-admin/src/pages/Funding.js
index bb98cab3..13e76ffc 100644
--- a/new-lamassu-admin/src/pages/Funding.js
+++ b/new-lamassu-admin/src/pages/Funding.js
@@ -5,7 +5,7 @@ import BigNumber from 'bignumber.js'
import useAxios from '@use-hooks/axios'
import { makeStyles } from '@material-ui/core/styles'
-import { H3, Info1, Info3, Info4, Mono } from '../components/typography'
+import { H3, Info1, Info2, Info3, Mono, Label1, Label3, TL2 } from '../components/typography'
import Title from '../components/Title'
import Sidebar from '../components/Sidebar'
import { primaryColor } from '../styling/variables'
@@ -58,6 +58,16 @@ const Funding = () => {
}
})
+ const itemRender = (it) => {
+ return (
+
+
{it.display}
+
{it.fiatConfirmedBalance} {it.fiatCode}
+
{it.confirmedBalance} {it.cryptoCode}
+
- Total Crypto Balance
+ Total Crypto Balance
{getConfirmedTotal(data)} {data[0].fiatCode}
- (+{getPendingTotal(data)} pending)
+ (+{getPendingTotal(data)} pending)
)}
@@ -83,21 +94,21 @@ const Funding = () => {
Balance ({selected.display})
-
+
{`${selected.confirmedBalance} ${selected.cryptoCode}`}
-
-
- {` (+ ${selected.pending} pending)`}
-
+
+
+ {`(+ ${selected.pending} pending)`}
+
-
+
{`= ${formatNumber(selected.fiatConfirmedBalance)} ${selected.fiatCode}`}
-
-
+
+
{`(+${formatNumber(selected.fiatPending)} pending)`}
-
+
Address
@@ -109,7 +120,7 @@ const Funding = () => {
- Scan to send {selected.display}
+ Scan to send {selected.display}
diff --git a/new-lamassu-admin/src/pages/Funding.styles.js b/new-lamassu-admin/src/pages/Funding.styles.js
index f3f2de8c..107d23de 100644
--- a/new-lamassu-admin/src/pages/Funding.styles.js
+++ b/new-lamassu-admin/src/pages/Funding.styles.js
@@ -1,4 +1,8 @@
-import { spacer, subheaderColor, placeholderColor } from '../styling/variables'
+import { spacer, subheaderColor, placeholderColor, fontColor } from '../styling/variables'
+
+import typographyStyles from '../components/typography/styles'
+
+const { label1 } = typographyStyles
export default {
wrapper: {
@@ -38,12 +42,27 @@ export default {
width: 375,
margin: `${spacer * 1.5}px ${spacer * 3}px`
},
+ itemWrapper: {
+ textAlign: 'end'
+ },
+ item: {
+ extend: label1,
+ margin: 2
+ },
+ firstItem: {
+ margin: 2
+ },
total: {
marginTop: 'auto',
textAlign: 'right',
- marginRight: 20
+ marginRight: 24
+ },
+ totalPending: {
+ color: fontColor,
+ marginTop: 2
},
totalTitle: {
- color: placeholderColor
+ color: placeholderColor,
+ marginBottom: 2
}
}
diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js
index cab092a3..a1b78803 100644
--- a/new-lamassu-admin/src/pages/Locales/Locales.js
+++ b/new-lamassu-admin/src/pages/Locales/Locales.js
@@ -1,5 +1,4 @@
import React, { memo, useState } from 'react'
-import { withFormik } from 'formik'
import * as Yup from 'yup'
import useAxios from '@use-hooks/axios'
@@ -24,7 +23,6 @@ const initialValues = {
const Locales = memo(() => {
const [locale, setLocale] = useState(initialValues)
- const [editing, setEditing] = useState(false)
const [data, setData] = useState(null)
useAxios({
@@ -48,21 +46,16 @@ const Locales = memo(() => {
}
})
- const MainFormFormik = withFormik({
- mapPropsToValues: () => locale,
- validationSchema: LocaleSchema,
- handleSubmit: it => {
- setEditing(false)
- setLocale(it)
- reFetch()
- }
- })(MainForm)
+ const save = (it) => {
+ setLocale(it)
+ reFetch()
+ }
return (
<>
Locales
Default settings
-
+
Overrides
)
diff --git a/new-lamassu-admin/src/pages/Locales/MainForm.js b/new-lamassu-admin/src/pages/Locales/MainForm.js
index 1a05d177..34770a6d 100644
--- a/new-lamassu-admin/src/pages/Locales/MainForm.js
+++ b/new-lamassu-admin/src/pages/Locales/MainForm.js
@@ -1,181 +1,70 @@
-import React, { useState, memo } from 'react'
-import { Form, FastField } from 'formik'
-import { __, compose, join, map, get, isEmpty } from 'lodash/fp'
+import React, { memo } from 'react'
+import { __, compose, join, map, get } from 'lodash/fp'
-import { Link } from '../../components/buttons'
import { Autocomplete, AutocompleteMultiple } from '../../components/inputs'
import { Checkbox } from '../../components/inputs/formik'
-import {
- EditCell,
- Table,
- TableHead,
- TableRow,
- TableHeader,
- TableBody,
- TableCell as Td
-} from '../../components/table'
-
// import styles from './MainForm.module.scss'
import { Table as EditableTable } from '../../components/editableTable'
-const styles = {}
-
const sizes = {
country: 200,
fiatCurrency: 150,
languages: 240,
- cryptoCurrencies: 280,
+ cryptoCurrencies: 270,
showRates: 125,
action: 175
}
const MainForm = memo(
- ({ values, resetForm, submitForm, errors, editing, setEditing, data }) => {
- const [submitted, setSubmitted] = useState(false)
-
- const getData = get(__, data)
+ ({ value, save, auxData, validationSchema }) => {
+ const getData = get(__, auxData)
const displayCodeArray = compose(join(', '), map(get('code')))
- const save = () => {
- setSubmitted(true)
- submitForm()
- }
-
- const cancel = () => {
- resetForm()
- setSubmitted(false)
- setEditing(false)
- }
-
- const ViewFields = (
- <>
-
{values.country && values.country.display} |
-
{values.fiatCurrency && values.fiatCurrency.code} |
-
- {values.languages && values.languages.map(it => it.code).join(', ')}
- |
-
- {values.cryptoCurrencies &&
- values.cryptoCurrencies.map(it => it.code).join(', ')}
- |
-
{values.showRates ? 'true' : 'false'} |
-
- setEditing(true)}>
- Edit
-
- |
-
- )
-
- const EditFields = (
- <>
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
- )
-
return (
-
+
it ? 'true' : 'false',
+ input: Checkbox
+ }
+ ]}
+ />
)
}
)
diff --git a/new-lamassu-admin/src/styling/variables.js b/new-lamassu-admin/src/styling/variables.js
index 2d438e0b..414f3e5d 100644
--- a/new-lamassu-admin/src/styling/variables.js
+++ b/new-lamassu-admin/src/styling/variables.js
@@ -1,4 +1,4 @@
-const version = 8
+const version = 9
// Primary
const zodiac = '#1b2559'
@@ -8,8 +8,8 @@ const spring = '#48f694'
const comet = '#5f668a'
const comet2 = '#72799d'
const spring2 = '#44e188'
-const spring4 = '#3fd07e'
const spring3 = '#ecfbef'
+const spring4 = '#3fd07e'
const zircon = '#ebefff'
const zircon2 = '#dbdfed'
@@ -75,7 +75,7 @@ if (version === 8) {
fontSize5 = 14
}
-const smallestFontSize = fontSize5 - 1
+const smallestFontSize = fontSize5
const inputFontSize = fontSize4
const inputFontSizeLg = fontSize1
const inputFontWeight = 500