From 8b4a1ff23f74c01ce575be01b6a8abfd51924c5f Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Mon, 11 Nov 2019 15:34:14 +0000 Subject: [PATCH] Feat: New styleguide, table component and screen --- new-lamassu-admin/package-lock.json | 46 +++- new-lamassu-admin/package.json | 2 +- new-lamassu-admin/src/components/Header.js | 4 +- .../src/components/Header.styles.js | 24 +- new-lamassu-admin/src/components/Sidebar.js | 16 +- .../src/components/Sidebar.styles.js | 22 +- .../components/buttons/ActionButton.styles.js | 4 +- .../src/components/editableTable/Row.js | 45 +++- .../src/components/editableTable/Table.js | 15 +- .../src/components/fake-table/Table.js | 76 ++++--- .../inputs/autocomplete/Autocomplete.js | 6 +- .../autocomplete/AutocompleteMultiple.js | 6 +- .../components/inputs/autocomplete/commons.js | 10 +- .../src/components/typography/index.js | 13 +- .../src/components/typography/styles.js | 17 +- new-lamassu-admin/src/pages/Funding.js | 37 ++-- new-lamassu-admin/src/pages/Funding.styles.js | 25 ++- .../src/pages/Locales/Locales.js | 17 +- .../src/pages/Locales/MainForm.js | 205 ++++-------------- new-lamassu-admin/src/styling/variables.js | 6 +- 20 files changed, 309 insertions(+), 287 deletions(-) diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index cf9f71e2..bdc74ca3 100644 --- a/new-lamassu-admin/package-lock.json +++ b/new-lamassu-admin/package-lock.json @@ -4737,7 +4737,8 @@ "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", + "dev": true }, "asn1": { "version": "0.2.4", @@ -7705,6 +7706,7 @@ "version": "0.2.3", "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", + "dev": true, "requires": { "fbjs": "^0.8.0", "gud": "^1.0.0" @@ -8800,6 +8802,7 @@ "version": "0.1.12", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "dev": true, "requires": { "iconv-lite": "~0.4.13" } @@ -10278,6 +10281,7 @@ "version": "0.8.17", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "dev": true, "requires": { "core-js": "^1.0.0", "isomorphic-fetch": "^2.1.1", @@ -10291,12 +10295,14 @@ "core-js": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", + "dev": true }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dev": true, "requires": { "asap": "~2.0.3" } @@ -10618,17 +10624,16 @@ "dev": true }, "formik": { - "version": "1.5.8", - "resolved": "https://registry.npmjs.org/formik/-/formik-1.5.8.tgz", - "integrity": "sha512-fNvPe+ddbh+7xiByT25vuso2p2hseG/Yvuj211fV1DbCjljUEG9OpgRpcb7g7O3kxHX/q31cbZDzMxJXPWSNwA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.0.3.tgz", + "integrity": "sha512-kYBvcxlsYSncY8OiJHD49C0UmoWXbgmIc9V1g3N1WwBJ7SMLk34QpcJDgroYd42K1cH+mSJlXhB7PlgTXTzlWg==", "requires": { - "create-react-context": "^0.2.2", "deepmerge": "^2.1.1", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.14", "lodash-es": "^4.17.14", - "prop-types": "^15.6.1", "react-fast-compare": "^2.0.1", + "scheduler": "^0.14.0", "tiny-warning": "^1.0.2", "tslib": "^1.9.3" }, @@ -10637,6 +10642,15 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + }, + "scheduler": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.14.0.tgz", + "integrity": "sha512-9CgbS06Kki2f4R9FjLSITjZo5BZxPsryiRNyL3LpvrM9WxcVmhlqAOc9E+KQbeI2nqej4JIIbOsfdL51cNb4Iw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } } } }, @@ -11476,6 +11490,7 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dev": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" } @@ -11975,7 +11990,8 @@ "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", + "dev": true }, "is-svg": { "version": "3.0.0", @@ -12041,6 +12057,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "dev": true, "requires": { "node-fetch": "^1.0.1", "whatwg-fetch": ">=0.10.0" @@ -14856,6 +14873,7 @@ "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "dev": true, "requires": { "encoding": "^0.1.11", "is-stream": "^1.0.1" @@ -19994,7 +20012,8 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true }, "sane": { "version": "4.1.0", @@ -20318,7 +20337,8 @@ "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", + "dev": true }, "setprototypeof": { "version": "1.1.1", @@ -22019,7 +22039,8 @@ "ua-parser-js": { "version": "0.7.20", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", - "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==", + "dev": true }, "uglify-js": { "version": "3.4.9", @@ -22849,7 +22870,8 @@ "whatwg-fetch": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", - "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" + "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==", + "dev": true }, "whatwg-mimetype": { "version": "2.3.0", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index 6324bb0d..813a6ba2 100644 --- a/new-lamassu-admin/package.json +++ b/new-lamassu-admin/package.json @@ -11,7 +11,7 @@ "classnames": "2.2.6", "downshift": "3.3.4", "file-saver": "2.0.2", - "formik": "1.5.8", + "formik": "2.0.3", "jss-plugin-extend": "^10.0.0", "lodash": "4.17.15", "moment": "2.24.0", diff --git a/new-lamassu-admin/src/components/Header.js b/new-lamassu-admin/src/components/Header.js index 6245bc3c..c6855ecf 100644 --- a/new-lamassu-admin/src/components/Header.js +++ b/new-lamassu-admin/src/components/Header.js @@ -62,7 +62,9 @@ const Header = memo(({ tree }) => { className={classnames(classes.link, classes.whiteLink)} activeClassName={classes.activeLink} > - {it.label} + + {it.label} + ))} diff --git a/new-lamassu-admin/src/components/Header.styles.js b/new-lamassu-admin/src/components/Header.styles.js index ea3e2939..5bcac0e8 100644 --- a/new-lamassu-admin/src/components/Header.styles.js +++ b/new-lamassu-admin/src/components/Header.styles.js @@ -11,10 +11,10 @@ import { import typographyStyles from './typography/styles' -const { tl2 } = typographyStyles +const { tl2, p } = typographyStyles let headerHeight = spacer * 7 -let subheaderHeight = spacer * 6 +let subheaderHeight = spacer * 5 if (version === 8) { headerHeight = spacer * 8 @@ -51,11 +51,15 @@ export default { padding: `0 ${spacer * 2.5}px` }, link: { - extend: tl2, + extend: p, textDecoration: 'none', border: 'none', color: white, backgroundColor: 'transparent', + '&:hover': { + extend: tl2, + color: white + }, '&:hover::after': { width: '50%', marginLeft: '-25%' @@ -75,7 +79,21 @@ export default { transition: 'all 0.2s cubic-bezier(0.95, 0.1, 0.45, 0.94)' } }, + forceSize: { + display: 'inline-block', + textAlign: 'center', + '&:after': { + display: 'block', + content: 'attr(forcesize)', + fontWeight: 700, + height: 0, + overflow: 'hidden', + visibility: 'hidden' + } + }, activeLink: { + extend: tl2, + color: white, '&::after': { width: '50%', marginLeft: '-25%' diff --git a/new-lamassu-admin/src/components/Sidebar.js b/new-lamassu-admin/src/components/Sidebar.js index 39c6a0b8..6ca857d4 100644 --- a/new-lamassu-admin/src/components/Sidebar.js +++ b/new-lamassu-admin/src/components/Sidebar.js @@ -6,19 +6,25 @@ import styles from './Sidebar.styles' const useStyles = makeStyles(styles) -const Logs = ({ data, displayName, isSelected, onClick, children }) => { +const Logs = ({ data, displayName, isSelected, onClick, children, itemRender }) => { const classes = useStyles() + return (
{data && data.map((it, idx) => ( -

onClick(it)} > - {displayName(it)} -

+ {itemRender ? itemRender(it) : displayName(it)} +
))} {children} diff --git a/new-lamassu-admin/src/components/Sidebar.styles.js b/new-lamassu-admin/src/components/Sidebar.styles.js index f87e5bca..f32cfa46 100644 --- a/new-lamassu-admin/src/components/Sidebar.styles.js +++ b/new-lamassu-admin/src/components/Sidebar.styles.js @@ -1,6 +1,10 @@ import { respondTo } from '../styling/helpers' import { primaryColor, spacer, placeholderColor, zircon, xxl } from '../styling/variables' +import typographyStyles from './typography/styles' + +const { tl2 } = typographyStyles + const sidebarColor = zircon export default { @@ -12,7 +16,7 @@ export default { boxShadow: `-500px 0px 0px 0px ${sidebarColor}`, borderRadius: '0 20px 0 0', alignItems: 'flex-end', - padding: spacer * 2.5, + padding: spacer * 3, flexDirection: 'column', [respondTo(xxl)]: { width: 'auto', @@ -23,9 +27,10 @@ export default { }, link: { + extend: tl2, position: 'relative', color: placeholderColor, - marginRight: 24, + margin: '12px 24px 12px 0', cursor: 'pointer', '&:hover::after': { height: '140%' @@ -50,5 +55,18 @@ export default { '&::after': { height: '140%' } + }, + customRenderLink: { + '&:hover::after': { + height: '100%' + }, + '&:after': { + bottom: 0 + } + }, + customRenderActiveLink: { + '&::after': { + height: '100%' + } } } diff --git a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js index a557f96e..ec902176 100644 --- a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js +++ b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js @@ -9,7 +9,7 @@ import { import typographyStyles from '../typography/styles' -const { label } = typographyStyles +const { p } = typographyStyles const colors = (color1, color2, color3) => { return { @@ -25,7 +25,7 @@ const colors = (color1, color2, color3) => { export default { actionButton: { - extend: label, + extend: p, cursor: 'pointer', border: 'none', height: 24, diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js index 9f5df266..5f4bb687 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.js +++ b/new-lamassu-admin/src/components/editableTable/Row.js @@ -1,6 +1,6 @@ -import React, { useState } from 'react' -import { identity } from 'lodash/fp' -import { FastField } from 'formik' +import React, { useState, memo } from 'react' +import { identity, isEmpty } from 'lodash/fp' +import { Form, Formik, FastField, useFormikContext } from 'formik' import { Td, @@ -13,18 +13,24 @@ const getField = (name, component, props = {}) => ( ) -const ERow = ({ elements, cancel, save, value }) => { +const ERow = memo(({ elements }) => { + const { values, submitForm, resetForm, errors } = useFormikContext() const [editing, setEditing] = useState(false) + + const innerSave = () => { + submitForm() + } + const innerCancel = () => { setEditing(false) - cancel() + resetForm() } return ( - - {elements.map(({ name, input, size, view = identity, inputProps }, idx) => ( - - {editing ? getField(name, input, inputProps) : view(value[name])} + + {elements.map(({ name, input, size, textAlign, view = identity, inputProps }, idx) => ( + + {editing ? getField(name, input, inputProps) : view(values[name])} ))} @@ -33,7 +39,7 @@ const ERow = ({ elements, cancel, save, value }) => { Cancel - + Save @@ -45,6 +51,21 @@ const ERow = ({ elements, cancel, save, value }) => { ) -} +}) -export default ERow +const ERowWithFormik = memo(({ value, validationSchema, save, elements }) => { + return ( + +
+ + +
+ ) +}) + +export default ERowWithFormik diff --git a/new-lamassu-admin/src/components/editableTable/Table.js b/new-lamassu-admin/src/components/editableTable/Table.js index c5636b5d..3b172516 100644 --- a/new-lamassu-admin/src/components/editableTable/Table.js +++ b/new-lamassu-admin/src/components/editableTable/Table.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { memo } from 'react' import { startCase } from 'lodash/fp' import { @@ -10,23 +10,20 @@ import { import ERow from './Row' -const ETable = ({ elements = [], data = [], cancel, save, components = {} }) => { - const { row } = components - const Row = row || ERow - +const ETable = memo(({ elements = [], data = [], save, validationSchema }) => { return ( - {elements.map(({ name, size, header }, idx) => ( - + {elements.map(({ name, size, header, textAlign }, idx) => ( + ))} - {data.map((it, idx) => )} + {data.map((it, idx) => )}
{header || startCase(name)}{header || startCase(name)}
) -} +}) export default ETable diff --git a/new-lamassu-admin/src/components/fake-table/Table.js b/new-lamassu-admin/src/components/fake-table/Table.js index a12678ea..47f4291d 100644 --- a/new-lamassu-admin/src/components/fake-table/Table.js +++ b/new-lamassu-admin/src/components/fake-table/Table.js @@ -1,7 +1,7 @@ import React from 'react' import classnames from 'classnames' -import ExpansionPanel from '@material-ui/core/ExpansionPanel' -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' import { makeStyles } from '@material-ui/core/styles' @@ -10,20 +10,21 @@ import { Link } from '../../components/buttons' import { tableHeaderColor, tableHeaderHeight, + tableErrorColor, spacer, white } from '../../styling/variables' import typographyStyles from '../typography/styles' -const { label2, p } = typographyStyles +const { tl2, p } = typographyStyles const useStyles = makeStyles({ body: { borderSpacing: '0 4px' }, header: { - extend: label2, + extend: tl2, backgroundColor: tableHeaderColor, height: tableHeaderHeight, textAlign: 'left', @@ -39,39 +40,31 @@ const useStyles = makeStyles({ display: 'table-cell', padding: `0 ${spacer * 3}px` }, - summary: { - cursor: 'auto' + trError: { + backgroundColor: tableErrorColor + }, + mainContent: { + display: 'flex', + alignItems: 'center', + minHeight: 54 }, // mui-overrides - panelRoot: { + cardContentRoot: { + // display: 'flex', + margin: 0, + padding: 0, + '&:last-child': { + padding: 0 + } + }, + card: { extend: p, - display: 'table-row', '&:before': { height: 0 }, margin: '4px 0', + width: 'min-content', boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)' - }, - panelExpanded: { - '&:first-child': { - marginTop: '4px !important' - } - }, - summaryRoot: { - userSelect: 'auto', - '&:hover:not(.Mui-disabled)': { - cursor: 'auto' - }, - cursor: 'auto', - padding: 0 - }, - summaryContent: { - margin: 0, - height: 54, - alignItems: 'center' - }, - summaryFocused: { - backgroundColor: 'inherit !important' } }) @@ -99,7 +92,7 @@ const TBody = ({ children, className }) => { ) } -const Td = ({ children, header, className, size = 100 }) => { +const Td = ({ children, header, className, size = 100, textAlign }) => { const classes = useStyles() const classNames = { [classes.td]: true, @@ -107,23 +100,28 @@ const Td = ({ children, header, className, size = 100 }) => { } return ( -
+
{children}
) } -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 ( - - - {children} - - + <> + + +
{children}
+ {error &&
{errorMessage}
} + + + ) } 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}
+
+ ) + } + return ( <> Funding @@ -67,14 +77,15 @@ const Funding = () => { isSelected={isSelected} onClick={setSelected} displayName={it => it.display} + itemRender={itemRender} > {data && data.length && (
- 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 ( -
- - - - - - - - - - - - Country - Fiat Currency - Languages - Crypto Currencies - Show Rates - - - - - - {editing ? EditFields : ViewFields} - - -
- - it ? 'true' : 'false' - } - ]} - /> - + 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