aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/dropdowns/components/account-dropdowns.js10
-rw-r--r--ui/app/components/modals/account-details-modal.js28
-rw-r--r--ui/app/components/modals/buy-options-modal.js28
-rw-r--r--ui/app/components/modals/edit-account-name-modal.js85
-rw-r--r--ui/app/components/modals/new-account-modal.js28
-rw-r--r--ui/app/css/itcss/components/buttons.scss10
-rw-r--r--ui/app/css/itcss/components/modal.scss70
-rw-r--r--ui/app/css/itcss/trumps/index.scss2
8 files changed, 150 insertions, 111 deletions
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 043789b6c..2854ec95d 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -115,7 +115,7 @@ class AccountDropdowns extends Component {
fontSize: '16px',
},
onClick: () => {
- actions.showNewAccountModal()
+ actions.showEditAccountModal(identity)
},
}, [
'Edit',
@@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => {
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
+ showEditAccountModal: (identity) => {
+ dispatch(actions.showModal({
+ name: 'EDIT_ACCOUNT_NAME',
+ identity,
+ }))
+ },
showNewAccountModal: () => {
- dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' }))
+ dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
},
addNewAccount: () => dispatch(actions.addNewAccount()),
showImportPage: () => dispatch(actions.showImportPage()),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 45f54908f..38d08314b 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
// It utilizes modal styles
AccountDetailsModal.prototype.render = function () {
return h('div', {}, [
- h('div.modal-content.transfers-subview', {
+ h('div.buy-modal-content.transfers-subview', {
}, [
- h('div.modal-content-title-wrapper.flex-column.flex-center', {
+ h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
- h('div.modal-content-title', {
+ h('div.buy-modal-content-title', {
style: {},
}, 'Account Details Modal'),
h('div', {}, 'How would you like to buy Ether?'),
]),
- h('div.modal-content-options.flex-column.flex-center', {}, [
+ h('div.buy-modal-content-options.flex-column.flex-center', {}, [
- h('div.modal-content-option', {
+ h('div.buy-modal-content-option', {
onClick: () => {},
}, [
- h('div.modal-content-option-title', {}, 'Coinbase'),
- h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+ h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Shapeshift'),
- h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Direct Deposit'),
- h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@@ -67,7 +67,7 @@ AccountDetailsModal.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
- }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+ }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 170ac96b8..76e0da4f1 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
// It utilizes modal styles
BuyOptions.prototype.render = function () {
return h('div', {}, [
- h('div.modal-content.transfers-subview', {
+ h('div.buy-modal-content.transfers-subview', {
}, [
- h('div.modal-content-title-wrapper.flex-column.flex-center', {
+ h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
- h('div.modal-content-title', {
+ h('div.buy-modal-content-title', {
style: {},
}, 'Transfers'),
h('div', {}, 'How would you like to buy Ether?'),
]),
- h('div.modal-content-options.flex-column.flex-center', {}, [
+ h('div.buy-modal-content-options.flex-column.flex-center', {}, [
- h('div.modal-content-option', {
+ h('div.buy-modal-content-option', {
onClick: () => {
const { toCoinbase, address } = this.props
toCoinbase(address)
},
}, [
- h('div.modal-content-option-title', {}, 'Coinbase'),
- h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+ h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Shapeshift'),
- h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Direct Deposit'),
- h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
- }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+ }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 5d2d2e120..0128fe412 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -3,78 +3,73 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
+const { getSelectedAccount } = require('../../selectors')
function mapStateToProps (state) {
return {
- network: state.metamask.network,
- address: state.metamask.selectedAddress,
+ selectedAccount: getSelectedAccount(state),
+ identity: state.appState.modal.modalState.identity,
}
}
function mapDispatchToProps (dispatch) {
return {
- toCoinbase: (address) => {
- dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
- },
hideModal: () => {
dispatch(actions.hideModal())
- }
+ },
+ saveAccountLabel: (account, label) => {
+ dispatch(actions.saveAccountLabel(account, label))
+ },
}
}
-inherits(BuyOptions, Component)
-function BuyOptions () {
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal () {
Component.call(this)
+ this.state = {
+ inputText: '',
+ }
}
-module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
-// BuyOptions is currently meant to be rendered inside <Modal />
+// EditAccountNameModal is currently meant to be rendered inside <Modal />
// It is the only component in this codebase that does so
// It utilizes modal styles
-BuyOptions.prototype.render = function () {
+EditAccountNameModal.prototype.render = function () {
+ const { hideModal, saveAccountLabel, identity } = this.props
+
return h('div', {}, [
- h('div.modal-content.transfers-subview', {
+ h('div.flex-column.edit-account-name-modal-content', {
}, [
- h('div.modal-content-title-wrapper.flex-column.flex-center', {
- style: {},
- }, [
- h('div.modal-content-title', {
- style: {},
- }, 'Edit Account Name Modal'),
- h('div', {}, 'How would you like to buy Ether?'),
- ]),
- h('div.modal-content-options.flex-column.flex-center', {}, [
-
- h('div.modal-content-option', {
- onClick: () => {
- const { toCoinbase, address } = this.props
- toCoinbase(address)
- },
- }, [
- h('div.modal-content-option-title', {}, 'Coinbase'),
- h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
- ]),
+ h('div.edit-account-name-modal-cancel', {}, [
+ h('i.fa.fa-times'),
+ ]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Shapeshift'),
- h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
- ]),
+ h('div.edit-account-name-modal-title', {
+ }, ['Edit Account Name']),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Direct Deposit'),
- h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
- ]),
+ h('input.edit-account-name-modal-input', {
+ placeholder: identity.name,
+ onChange: (event) => {
+ this.setState({ inputText: event.target.value })
+ },
+ value: this.state.inputText,
+ }, []),
+ h('button.btn-clear.edit-account-name-modal-save-button', {
+ onClick: () => {
+ if (this.state.inputText.length !== 0) {
+ saveAccountLabel(identity.address, this.state.inputText)
+ hideModal()
+ }
+ },
+ disabled: this.state.inputText.length === 0,
+ }, [
+ 'SAVE',
]),
- h('button', {
- style: {
- background: 'white',
- },
- onClick: () => { this.props.hideModal() },
- }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
])
])
}
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index e4b3ca328..c55d69964 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
// It utilizes modal styles
BuyOptions.prototype.render = function () {
return h('div', {}, [
- h('div.modal-content.transfers-subview', {
+ h('div.buy-modal-content.transfers-subview', {
}, [
- h('div.modal-content-title-wrapper.flex-column.flex-center', {
+ h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
- h('div.modal-content-title', {
+ h('div.buy-modal-content-title', {
style: {},
}, 'New Account Modal'),
h('div', {}, 'How would you like to buy Ether?'),
]),
- h('div.modal-content-options.flex-column.flex-center', {}, [
+ h('div.buy-modal-content-options.flex-column.flex-center', {}, [
- h('div.modal-content-option', {
+ h('div.buy-modal-content-option', {
onClick: () => {
const { toCoinbase, address } = this.props
toCoinbase(address)
},
}, [
- h('div.modal-content-option-title', {}, 'Coinbase'),
- h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+ h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Shapeshift'),
- h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
- h('div.modal-content-option', {}, [
- h('div.modal-content-option-title', {}, 'Direct Deposit'),
- h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+ h('div.buy-modal-content-option', {}, [
+ h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+ h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
- }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+ }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 9916db488..c304e07ab 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -27,11 +27,11 @@ button.btn-clear {
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
// }
-// button[disabled], input[type="submit"][disabled] {
-// cursor: not-allowed;
-// background: rgba(197, 197, 197, 1);
-// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
-// }
+button[disabled], input[type="submit"][disabled] {
+ cursor: not-allowed;
+ background: rgba(197, 197, 197, 1);
+ box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
+}
// button.spaced {
// margin: 2px;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 8bf7cd44f..c8bd1fb85 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -1,4 +1,5 @@
-.modal-content {
+// Buy Modal
+.buy-modal-content {
flex-direction: column;
align-items: center;
justify-content: center;
@@ -7,29 +8,29 @@
}
@media screen and (max-width: 575px) {
- .modal-content-title-wrapper {
+ .buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 100px;
}
- .modal-content-title {
+ .buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
- .modal-content-options {
+ .buy-modal-content-options {
flex-direction: column;
padding: 5% 33%;
}
- .modal-content-footer {
+ .buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
- div.modal-content-option {
+ div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 80vw;
@@ -41,40 +42,40 @@
padding: 0% 7%;
justify-content: space-around;
- div.modal-content-option-title {
+ div.buy-modal-content-option-title {
font-size: 20px;
}
- div.modal-content-option-subtitle {
+ div.buy-modal-content-option-subtitle {
font-size: 16px;
}
}
}
@media screen and (min-width: 576px) {
- .modal-content-title-wrapper {
+ .buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 110px;
}
- .modal-content-title {
+ .buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
- .modal-content-footer {
+ .buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
- .modal-content-options {
+ .buy-modal-content-options {
flex-direction: row;
margin: 20px 0;
}
- div.modal-content-option {
+ div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 20vw;
@@ -85,7 +86,7 @@
margin: 0 .5vw;
justify-content: space-around;
- div.modal-content-option-title {
+ div.buy-modal-content-option-title {
font-size: 20px;
@media screen and (max-width: 679px) {
@@ -97,7 +98,7 @@
}
}
- div.modal-content-option-subtitle {
+ div.buy-modal-content-option-subtitle {
font-size: 16px;
padding: 0 10px;
height: 25%;
@@ -121,8 +122,45 @@
}
}
- div.modal-content-footer {
+ div.buy-modal-content-footer {
margin-top: 8vh;
}
}
}
+
+// Edit Account Name Modal
+.edit-account-name-modal-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+}
+
+.edit-account-name-modal-cancel {
+ position: absolute;
+ top: 12px;
+ right: 20px;
+ font-size: 25px;
+}
+
+.edit-account-name-modal-title {
+ margin: 15px;
+}
+
+.edit-account-name-modal-save-button {
+ width: 33%;
+ height: 45px;
+ margin: 15px;
+ font-weight: bold;
+ margin-top: 25px;
+}
+
+.edit-account-name-modal-input {
+ width: 90%;
+ height: 50px;
+ text-align: left;
+ margin: 10px;
+ padding: 10px;
+ font-size: 18px;
+}
diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss
index e09642aa8..d9a4202a4 100644
--- a/ui/app/css/itcss/trumps/index.scss
+++ b/ui/app/css/itcss/trumps/index.scss
@@ -65,7 +65,7 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
// See components/modal.scss
/* stylelint-disable */
-#modal-content-footer-text {
+#buy-modal-content-footer-text {
font-family: 'DIN OT';
font-size: 16px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-24 03:29:20 +0800