From 6379e0f67c786bd0c321b02e5af26f364b0d718c Mon Sep 17 00:00:00 2001 From: mmv Date: Fri, 19 Apr 2019 17:36:42 +0400 Subject: [PATCH] addCustomToken wip --- src/components/layout/Block/index.scss | 11 +++++----- src/components/layout/Paragraph/index.js | 3 ++- src/components/layout/Paragraph/index.scss | 10 +++++----- .../Tokens/screens/AddCustomToken/index.jsx | 20 +++++++++++++++---- .../Tokens/screens/AddCustomToken/style.js | 9 +++++++++ .../Tokens/screens/TokenList/style.js | 11 ++++++++-- 6 files changed, 46 insertions(+), 18 deletions(-) create mode 100644 src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss index 1c388ae5..54709a6a 100644 --- a/src/components/layout/Block/index.scss +++ b/src/components/layout/Block/index.scss @@ -1,5 +1,4 @@ .block { - } .xs { @@ -7,19 +6,19 @@ } .sm { - margin-bottom: $sm; + margin-bottom: $sm; } .md { - margin-bottom: $md; + margin-bottom: $md; } .lg { - margin-bottom: $lg; + margin-bottom: $lg; } .xl { - margin-bottom: $xl; + margin-bottom: $xl; } .paddingXs { @@ -57,4 +56,4 @@ display: flex; align-items: center; justify-content: flex-end; -} \ No newline at end of file +} diff --git a/src/components/layout/Paragraph/index.js b/src/components/layout/Paragraph/index.js index 494beaab..5cbd9c7b 100644 --- a/src/components/layout/Paragraph/index.js +++ b/src/components/layout/Paragraph/index.js @@ -8,6 +8,7 @@ const cx = classNames.bind(styles) type Props = { align?: 'right' | 'center' | 'left', noMargin?: boolean, + noPadding?: boolean, weight?: 'light' | 'regular' | 'bolder' | 'bold', size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl', color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled', @@ -25,7 +26,7 @@ class Paragraph extends React.PureComponent { return (

{children} diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss index 53b183aa..0a54b864 100644 --- a/src/components/layout/Paragraph/index.scss +++ b/src/components/layout/Paragraph/index.scss @@ -40,19 +40,19 @@ } .capitalize { - text-transform: capitalize + text-transform: capitalize; } .lowercase { - text-transform: lowercase + text-transform: lowercase; } .uppercase { - text-transform: uppercase + text-transform: uppercase; } -.noMargin{ - margin: 0; +.noMargin { + margin: 0; } .center { diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx index ae34b8a3..43031912 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx @@ -1,14 +1,26 @@ // @flow import React, { Component } from 'react' +import { withStyles } from '@material-ui/core/styles' +import Block from '~/components/layout/Block' +import Paragraph from '~/components/layout/Paragraph' +import { styles } from './style' class AddCustomToken extends Component { render() { + const { classes } = this.props + return ( -

- Add a token :) -
+ + + + Add custom token + + + ) } } -export default AddCustomToken +const AddCustomTokenComponent = withStyles(styles)(AddCustomToken) + +export default AddCustomTokenComponent diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js new file mode 100644 index 00000000..d6518b91 --- /dev/null +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js @@ -0,0 +1,9 @@ +// @flow +import { lg, bolderFont } from '~/theme/variables' + +export const styles = () => ({ + title: { + padding: `${lg}`, + fontWeight: bolderFont, + }, +}) diff --git a/src/routes/safe/components/Balances/Tokens/screens/TokenList/style.js b/src/routes/safe/components/Balances/Tokens/screens/TokenList/style.js index 0089a081..bab14bec 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/TokenList/style.js +++ b/src/routes/safe/components/Balances/Tokens/screens/TokenList/style.js @@ -15,10 +15,14 @@ export const styles = () => ({ padding: `0 ${md}`, }, add: { + fontSize: '11px', fontWeight: 'normal', paddingRight: md, paddingLeft: md, }, + actions: { + height: '50px', + }, list: { overflow: 'hidden', overflowY: 'scroll', @@ -32,7 +36,7 @@ export const styles = () => ({ searchInput: { backgroundColor: 'transparent', lineHeight: 'initial', - fontSize: mediumFontSize, + fontSize: '13px', padding: 0, '& > input::placeholder': { letterSpacing: '-0.5px', @@ -51,9 +55,12 @@ export const styles = () => ({ searchRoot: { letterSpacing: '-0.5px', fontFamily: 'Roboto Mono, monospace', - fontSize: mediumFontSize, + fontSize: '13px', border: 'none', boxShadow: 'none', + '& > button': { + display: 'none', + }, }, searchIcon: { '&:hover': {