aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/actions.js10
-rw-r--r--ui/app/app.js18
-rw-r--r--ui/app/components/pending-tx/confirm-send-ether.js16
-rw-r--r--ui/app/components/pending-tx/confirm-send-token.js16
-rw-r--r--ui/app/components/shift-list-item.js57
-rw-r--r--ui/app/components/tx-list.js7
-rw-r--r--ui/app/css/itcss/base/index.scss6
-rw-r--r--ui/app/css/itcss/components/confirm.scss14
-rw-r--r--ui/app/css/itcss/components/currency-display.scss3
-rw-r--r--ui/app/css/itcss/components/send.scss22
-rw-r--r--ui/app/css/itcss/generic/index.scss23
-rw-r--r--ui/app/reducers/app.js7
-rw-r--r--ui/app/selectors.js6
-rw-r--r--ui/app/send-v2.js13
-rw-r--r--ui/app/unlock.js17
15 files changed, 160 insertions, 75 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index f930a93c1..c6776eeee 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -257,6 +257,9 @@ var actions = {
updateFeatureFlags,
UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
+ setMouseUserState,
+ SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE',
+
// Network
setNetworkEndpoints,
updateNetworkEndpointType,
@@ -1661,6 +1664,13 @@ function updateFeatureFlags (updatedFeatureFlags) {
}
}
+function setMouseUserState (isMouseUser) {
+ return {
+ type: actions.SET_MOUSE_USER_STATE,
+ value: isMouseUser,
+ }
+}
+
// Call Background Then Update
//
// A function generator for a common pattern wherein:
diff --git a/ui/app/app.js b/ui/app/app.js
index 20dc65df3..cdb0c8c61 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -85,6 +85,7 @@ function mapStateToProps (state) {
lostAccounts: state.metamask.lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
currentCurrency: state.metamask.currentCurrency,
+ isMouseUser: state.appState.isMouseUser,
// state needed to get account dropdown temporarily rendering from app bar
identities,
@@ -101,6 +102,7 @@ function mapDispatchToProps (dispatch, ownProps) {
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+ setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
}
}
@@ -112,7 +114,13 @@ App.prototype.componentWillMount = function () {
App.prototype.render = function () {
var props = this.props
- const { isLoading, loadingMessage, network } = props
+ const {
+ isLoading,
+ loadingMessage,
+ network,
+ isMouseUser,
+ setMouseUserState,
+ } = props
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
const loadMessage = loadingMessage || isLoadingNetwork ?
`Connecting to ${this.getNetworkName()}` : null
@@ -120,11 +128,19 @@ App.prototype.render = function () {
return (
h('.flex-column.full-height', {
+ className: classnames({ 'mouse-user-styles': isMouseUser }),
style: {
overflowX: 'hidden',
position: 'relative',
alignItems: 'center',
},
+ tabIndex: '0',
+ onClick: () => setMouseUserState(true),
+ onKeyDown: (e) => {
+ if (e.keyCode === 9) {
+ setMouseUserState(false)
+ }
+ },
}, [
// global modal
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 652300c94..3f8d9c28f 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -213,17 +213,15 @@ ConfirmSendEther.prototype.render = function () {
this.inputs = []
return (
- h('div.confirm-screen-container.confirm-send-ether', {
- style: { minWidth: '355px' },
- }, [
+ h('div.confirm-screen-container.confirm-send-ether', [
// Main Send token Card
- h('div.confirm-screen-wrapper.flex-column.flex-grow', [
- h('h3.flex-center.confirm-screen-header', [
- h('button.btn-clear.confirm-screen-back-button', {
+ h('div.page-container', [
+ h('div.page-container__header', [
+ h('button.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
- }, 'EDIT'),
- h('div.confirm-screen-title', 'Confirm Transaction'),
- h('div.confirm-screen-header-tip'),
+ }, 'Edit'),
+ h('div.page-container__title', 'Confirm'),
+ h('div.page-container__subtitle', `Please review your transaction.`),
]),
h('div.flex-row.flex-center.confirm-screen-identicons', [
h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index ad489c3e9..e4b0c186a 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -308,17 +308,15 @@ ConfirmSendToken.prototype.render = function () {
this.inputs = []
return (
- h('div.confirm-screen-container.confirm-send-token', {
- style: { minWidth: '355px' },
- }, [
+ h('div.confirm-screen-container.confirm-send-token', [
// Main Send token Card
- h('div.confirm-screen-wrapper.flex-column.flex-grow', [
- h('h3.flex-center.confirm-screen-header', [
- h('button.btn-clear.confirm-screen-back-button', {
+ h('div.page-container', [
+ h('div.page-container__header', [
+ h('button.confirm-screen-back-button', {
onClick: () => editTransaction(txMeta),
- }, 'EDIT'),
- h('div.confirm-screen-title', 'Confirm Transaction'),
- h('div.confirm-screen-header-tip'),
+ }, 'Edit'),
+ h('div.page-container__title', 'Confirm'),
+ h('div.page-container__subtitle', `Please review your transaction.`),
]),
h('div.flex-row.flex-center.confirm-screen-identicons', [
h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 111a77df4..017bf9f0c 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -29,40 +29,35 @@ function ShiftListItem () {
}
ShiftListItem.prototype.render = function () {
- const { selectedAddress, receivingAddress } = this.props
- return (
- selectedAddress === receivingAddress
- ? h('div.tx-list-item.tx-list-clickable', {
+ return h('div.tx-list-item.tx-list-clickable', {
+ style: {
+ paddingTop: '20px',
+ paddingBottom: '20px',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ },
+ }, [
+ h('div', {
+ style: {
+ width: '0px',
+ position: 'relative',
+ bottom: '19px',
+ },
+ }, [
+ h('img', {
+ src: 'https://info.shapeshift.io/sites/default/files/logo.png',
style: {
- paddingTop: '20px',
- paddingBottom: '20px',
- justifyContent: 'space-around',
- alignItems: 'center',
+ height: '35px',
+ width: '132px',
+ position: 'absolute',
+ clip: 'rect(0px,23px,34px,0px)',
},
- }, [
- h('div', {
- style: {
- width: '0px',
- position: 'relative',
- bottom: '19px',
- },
- }, [
- h('img', {
- src: 'https://info.shapeshift.io/sites/default/files/logo.png',
- style: {
- height: '35px',
- width: '132px',
- position: 'absolute',
- clip: 'rect(0px,23px,34px,0px)',
- },
- }),
- ]),
+ }),
+ ]),
- this.renderInfo(),
- this.renderUtilComponents(),
- ])
- : null
- )
+ this.renderInfo(),
+ this.renderUtilComponents(),
+ ])
}
function formatDate (date) {
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 84cd0f093..1729e6a6f 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -50,6 +50,7 @@ TxList.prototype.render = function () {
TxList.prototype.renderTransaction = function () {
const { txsToRender, conversionRate } = this.props
+
return txsToRender.length
? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
: [h(
@@ -65,11 +66,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
// refer to transaction-list.js:line 58
if (transaction.key === 'shapeshift') {
- return h('div', {
- key: `shapeshift${index}`,
- }, [
- h(ShiftListItem, transaction),
- ])
+ return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` })
}
const props = {
diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss
index baa6ea037..1475e8bb5 100644
--- a/ui/app/css/itcss/base/index.scss
+++ b/ui/app/css/itcss/base/index.scss
@@ -1 +1,7 @@
// Base
+
+.mouse-user-styles {
+ button:focus {
+ outline: 0;
+ }
+}
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 255f66e66..878495290 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -103,15 +103,13 @@
}
.confirm-screen-back-button {
- background: transparent;
- left: 24px;
+ color: $curious-blue;
+ font-family: Roboto;
+ font-size: 1rem;
position: absolute;
- padding: 6px 12px;
- font-size: .7rem;
-
- @media screen and (max-width: $break-small) {
- margin-right: 12px;
- }
+ top: 38px;
+ right: 38px;
+ background: none;
}
.confirm-screen-account-wrapper {
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 9459629b6..e043c1966 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -4,7 +4,7 @@
border: 1px solid $alto;
border-radius: 4px;
background-color: $white;
- color: $dusty-gray;
+ color: $scorpion;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
@@ -52,5 +52,6 @@
&__currency-symbol {
margin-top: 1px;
+ color: $scorpion;
}
} \ No newline at end of file
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index fd73275e0..bb17e53cd 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -557,6 +557,25 @@
&__form-field {
flex: 1 1 auto;
+
+ .currency-display {
+ color: $tundora;
+
+ &__currency-symbol {
+ color: $tundora;
+ }
+
+ &__converted-value,
+ &__converted-currency {
+ color: $tundora;
+ }
+ }
+
+ .account-list-item {
+ &__account-secondary-balance {
+ color: $tundora;
+ }
+ }
}
&__form-label {
@@ -565,6 +584,7 @@
font-size: 16px;
line-height: 22px;
width: 88px;
+ font-weight: 400;
}
&__from-dropdown {
@@ -620,7 +640,7 @@
border: 1px solid $alto;
border-radius: 4px;
background-color: $white;
- color: $dusty-gray;
+ color: $tundora;
padding: 10px;
font-family: Roboto;
font-size: 16px;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 75f823320..9b3d7475b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -82,8 +82,20 @@ input.large-input {
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
- padding: 1.6rem 1rem;
+ padding: 1.15rem 0.95rem;
flex: 0 0 auto;
+ background: $alabaster;
+ position: relative;
+ }
+
+ &__header-close::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $tundora;
+ position: absolute;
+ top: 21.5px;
+ right: 28.5px;
+ cursor: pointer;
}
&__footer {
@@ -93,6 +105,11 @@ input.large-input {
border-top: 1px solid $geyser;
padding: 1.6rem;
flex: 0 0 auto;
+
+ .btn-clear,
+ .btn-cancel {
+ font-size: 1rem;
+ }
}
&__footer-button {
@@ -101,6 +118,7 @@ input.large-input {
font-size: 1rem;
text-transform: uppercase;
margin-right: 1rem;
+ border-radius: 2px;
&:last-of-type {
margin-right: 0;
@@ -108,7 +126,7 @@ input.large-input {
}
&__title {
- color: $tundora;
+ color: $black;
font-family: Roboto;
font-size: 2rem;
font-weight: 500;
@@ -119,6 +137,7 @@ input.large-input {
padding-top: .5rem;
line-height: initial;
font-size: .9rem;
+ color: $gray;
}
&__tabs {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 6885d029a..02f024f7c 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -59,6 +59,7 @@ function reduceApp (state, action) {
// Used to display error text
warning: null,
buyView: {},
+ isMouseUser: false,
}, state.appState)
switch (action.type) {
@@ -658,6 +659,12 @@ function reduceApp (state, action) {
data: action.value.data,
},
})
+
+ case actions.SET_MOUSE_USER_STATE:
+ return extend(appState, {
+ isMouseUser: action.value,
+ })
+
default:
return appState
}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index 38a96c48b..5d2635775 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -116,7 +116,7 @@ function transactionsSelector (state) {
// console.log({txsToRender, selectedTokenAddress})
return selectedTokenAddress
? txsToRender
- .filter(({ txParams: { to } }) => to === selectedTokenAddress)
+ .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
.sort((a, b) => b.time - a.time)
: txsToRender
.sort((a, b) => b.time - a.time)
@@ -179,11 +179,11 @@ function autoAddToBetaUI (state) {
(numberOfAccounts > autoAddAccountsThreshold) &&
(numberOfTokensAdded > autoAddTokensThreshold)
const userIsNotInBeta = !state.metamask.featureFlags.betaUI
-
+
return userIsNotInBeta && userPassesThreshold
}
function getCurrentViewContext (state) {
const { currentView = {} } = state.appState
- return currentView.context
+ return currentView.context
} \ No newline at end of file
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index d4e15dfa8..1d67150e3 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -179,7 +179,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
}
SendTransactionScreen.prototype.renderHeader = function () {
- const { selectedToken } = this.props
+ const { selectedToken, clearSend, goHome } = this.props
const tokenText = selectedToken ? 'tokens' : 'ETH'
return h('div.page-container__header', [
@@ -188,10 +188,13 @@ SendTransactionScreen.prototype.renderHeader = function () {
h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
- h(
- 'div.page-container__subtitle',
- 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'
- ),
+ h('div.page-container__header-close', {
+ onClick: () => {
+ clearSend()
+ goHome()
+ },
+ }),
+
])
}
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index e77d17d7b..4b39bd3e2 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
const actions = require('./actions')
const getCaretCoordinates = require('textarea-caret')
const EventEmitter = require('events').EventEmitter
+const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
const Mascot = require('./components/mascot')
@@ -85,6 +86,22 @@ UnlockScreen.prototype.render = function () {
},
}, 'Restore from seed phrase'),
]),
+
+ h('.flex-row.flex-center.flex-grow', [
+ h('p.pointer', {
+ onClick: () => {
+ this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+ .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+ },
+ style: {
+ fontSize: '0.8em',
+ color: '#aeaeae',
+ textDecoration: 'underline',
+ marginTop: '32px',
+ },
+ }, 'Use classic interface'),
+ ]),
+
])
)
}
generated by cgit (git 2.34.1) at 2024-10-19 23:31:00 +0800