aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/button/button.component.js43
-rw-r--r--ui/app/components/button/button.stories.js41
-rw-r--r--ui/app/components/button/index.js2
-rw-r--r--ui/app/css/itcss/components/account-dropdown.scss3
-rw-r--r--ui/app/css/itcss/components/account-menu.scss3
-rw-r--r--ui/app/css/itcss/components/add-token.scss1
-rw-r--r--ui/app/css/itcss/components/buttons.scss1
-rw-r--r--ui/app/css/itcss/components/confirm.scss4
-rw-r--r--ui/app/css/itcss/components/currency-display.scss1
-rw-r--r--ui/app/css/itcss/components/menu.scss1
-rw-r--r--ui/app/css/itcss/components/modal.scss2
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss2
-rw-r--r--ui/app/css/itcss/components/request-signature.scss2
-rw-r--r--ui/app/css/itcss/components/send.scss3
-rw-r--r--ui/app/css/itcss/generic/index.scss2
-rw-r--r--ui/app/send-v2.js11
16 files changed, 98 insertions, 24 deletions
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
new file mode 100644
index 000000000..7769e4875
--- /dev/null
+++ b/ui/app/components/button/button.component.js
@@ -0,0 +1,43 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
+
+const SECONDARY = 'secondary'
+const CLASSNAME_PRIMARY = 'btn-primary'
+const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
+const CLASSNAME_SECONDARY = 'btn-secondary'
+const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+
+const getClassName = (type, large = false) => {
+ let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
+
+ if (large) {
+ output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
+ }
+
+ return output
+}
+
+class Button extends Component {
+ render () {
+ const { type, large, className, ...buttonProps } = this.props
+
+ return (
+ h('button', {
+ className: classnames(getClassName(type, large), className),
+ ...buttonProps,
+ }, this.props.children)
+ )
+ }
+}
+
+Button.propTypes = {
+ type: PropTypes.string,
+ large: PropTypes.bool,
+ className: PropTypes.string,
+ children: PropTypes.string,
+}
+
+module.exports = Button
+
diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js
new file mode 100644
index 000000000..d1e14e869
--- /dev/null
+++ b/ui/app/components/button/button.stories.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button from './'
+import { text } from '@storybook/addon-knobs/react'
+
+storiesOf('Button', module)
+ .add('primary', () =>
+ <Button
+ onClick={action('clicked')}
+ type="primary"
+ >
+ {text('text', 'Click me')}
+ </Button>
+ )
+ .add('secondary', () => (
+ <Button
+ onClick={action('clicked')}
+ type="secondary"
+ >
+ {text('text', 'Click me')}
+ </Button>
+ ))
+ .add('large primary', () => (
+ <Button
+ onClick={action('clicked')}
+ type="primary"
+ large
+ >
+ {text('text', 'Click me')}
+ </Button>
+ ))
+ .add('large secondary', () => (
+ <Button
+ onClick={action('clicked')}
+ type="secondary"
+ large
+ >
+ {text('text', 'Click me')}
+ </Button>
+ ))
diff --git a/ui/app/components/button/index.js b/ui/app/components/button/index.js
new file mode 100644
index 000000000..3dc7d1eea
--- /dev/null
+++ b/ui/app/components/button/index.js
@@ -0,0 +1,2 @@
+const Button = require('./button.component')
+module.exports = Button
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 725da9d39..b29afdc8c 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -33,7 +33,7 @@
margin-top: 4px;
position: relative;
}
-
+
&__account-name {
font-size: 16px;
margin-left: 8px;
@@ -50,7 +50,6 @@
font-family: Roboto;
line-height: 16px;
font-size: 12px;
- font-weight: 300;
}
&__account-primary-balance {
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index c4037d862..824b2ddb6 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -40,7 +40,6 @@
font-size: 12px;
line-height: 23px;
padding: 0 24px;
- font-weight: 300;
}
&__item-icon {
@@ -113,7 +112,6 @@
&__name {
color: $white;
font-size: 18px;
- font-weight: 300;
}
&__balance {
@@ -124,7 +122,6 @@
&__action {
font-size: 16px;
line-height: 18px;
- font-weight: 300;
cursor: pointer;
}
}
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index 01579c27c..a3ea0d85b 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -377,7 +377,6 @@
&__amount {
color: $scorpion;
font-size: 43px;
- font-weight: 300;
line-height: 43px;
margin-right: 8px;
}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 04e1ed96e..86daf60d8 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -18,6 +18,7 @@
padding: 0 20px;
min-width: 140px;
text-transform: uppercase;
+ outline: none;
}
.btn-primary,
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 47762e8de..44cfcf870 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -175,7 +175,6 @@
margin-top: 12px;
text-align: center;
font-size: 40px;
- font-weight: 300;
line-height: 53px;
flex: 0 0 auto;
}
@@ -235,7 +234,6 @@ section .confirm-screen-account-number,
padding-left: 35px;
font-size: 16px;
line-height: 22px;
- font-weight: 300;
&:not(:last-of-type) {
border-bottom: 1px solid $alto;
@@ -336,7 +334,6 @@ section .confirm-screen-account-number,
border-width: 0;
box-shadow: none;
flex: 1 0 auto;
- font-weight: 300;
margin: 0 5px;
}
@@ -353,6 +350,5 @@ section .confirm-screen-account-number,
box-shadow: none;
cursor: pointer;
flex: 1 0 auto;
- font-weight: 300;
margin: 0 5px;
}
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index e043c1966..36d843c79 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -7,7 +7,6 @@
color: $scorpion;
font-family: Roboto;
font-size: 16px;
- font-weight: 300;
padding: 8px 10px;
position: relative;
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index eb92a1b70..6409ad545 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -11,7 +11,6 @@
flex-flow: row nowrap;
align-items: center;
position: relative;
- font-weight: 300;
z-index: 201;
@media screen and (max-width: 575px) {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 9ae3ea7fa..f972c0f7a 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -368,7 +368,6 @@
resize: none;
padding: 9px 13px 8px;
text-transform: uppercase;
- font-weight: 300;
}
@@ -796,7 +795,6 @@
.simple-dropdown {
color: #5B5D67;
font-size: 16px;
- font-weight: 300;
line-height: 21px;
border: 1px solid #D8D8D8;
background-color: #FFFFFF;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 777a82318..2903e07b4 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -117,7 +117,6 @@ $wallet-view-bg: $alabaster;
font-size: 14px;
line-height: 12px;
padding: 4px 12px;
- font-weight: 300;
cursor: pointer;
flex: 0 0 auto;
@@ -264,7 +263,6 @@ $wallet-view-bg: $alabaster;
// wallet view
.account-name {
font-size: 24px;
- font-weight: 300;
color: $black;
margin-top: 8px;
margin-bottom: .9rem;
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 083481b8f..8bba6c98e 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -48,7 +48,6 @@
color: #5B5D67;
font-family: Roboto;
font-size: 22px;
- font-weight: 300;
line-height: 29px;
z-index: 3;
}
@@ -125,7 +124,6 @@
color: $tundora;
font-family: Roboto;
font-size: 18px;
- font-weight: 300;
line-height: 24px;
text-align: center;
margin-top: 20px;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 362feeec8..c168242cf 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -507,7 +507,6 @@
&__copy {
color: $gray;
font-size: 14px;
- font-weight: 300;
line-height: 19px;
text-align: center;
margin-top: 10px;
@@ -641,7 +640,6 @@
font-family: Roboto;
font-size: 16px;
line-height: 21px;
- font-weight: 300;
}
}
@@ -832,7 +830,6 @@
color: $tundora;
font-family: Roboto;
font-size: 20px;
- font-weight: 300;
line-height: 26px;
margin-top: 17px;
}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 7a64810c4..b484d5a91 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -12,7 +12,7 @@ html,
body {
font-family: Roboto, Arial;
color: #4d4d4d;
- font-weight: 300;
+ font-weight: 400;
background: #f7f7f7;
width: 100%;
height: 100%;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index bd00b186e..6736b5571 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -31,6 +31,7 @@ const {
} = require('./components/send/send-utils')
const { isValidAddress } = require('./util')
const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
+const Button = require('./components/button')
SendTransactionScreen.contextTypes = {
t: PropTypes.func,
@@ -497,13 +498,19 @@ SendTransactionScreen.prototype.renderFooter = function () {
const noErrors = !amountError && toError === null
return h('div.page-container__footer', [
- h('button.btn-secondary--lg.page-container__footer-button', {
+ h(Button, {
+ type: 'secondary',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => {
clearSend()
history.push(DEFAULT_ROUTE)
},
}, this.context.t('cancel')),
- h('button.btn-primary--lg.page-container__footer-button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'page-container__footer-button',
disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event),
}, this.context.t('next')),
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-23 14:09:39 +0800