Preferences refactor
This commit is contained in:
parent
3745051637
commit
959007f703
|
@ -132,22 +132,22 @@ const installDevTools = async mainWindow => {
|
||||||
const createWindowEvents = mainWindow => {
|
const createWindowEvents = mainWindow => {
|
||||||
mainWindow.on('enter-full-screen', () =>
|
mainWindow.on('enter-full-screen', () =>
|
||||||
mainWindow.webContents.executeJavaScript(
|
mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.add('fullscreen')"
|
'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
mainWindow.on('leave-full-screen', () =>
|
mainWindow.on('leave-full-screen', () =>
|
||||||
mainWindow.webContents.executeJavaScript(
|
mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.remove('fullscreen')"
|
'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
mainWindow.on('blur', () =>
|
mainWindow.on('blur', () =>
|
||||||
mainWindow.webContents.executeJavaScript(
|
mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.add('blur')"
|
'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
mainWindow.on('focus', () =>
|
mainWindow.on('focus', () =>
|
||||||
mainWindow.webContents.executeJavaScript(
|
mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.remove('blur')"
|
'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -191,10 +191,10 @@ const switchTheme = () => {
|
||||||
|
|
||||||
isDarkMode
|
isDarkMode
|
||||||
? mainWindow.webContents.executeJavaScript(
|
? mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.add('dark')"
|
'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
|
||||||
)
|
)
|
||||||
: mainWindow.webContents.executeJavaScript(
|
: mainWindow.webContents.executeJavaScript(
|
||||||
"document.getElementsByTagName('html')[0].classList.remove('dark')"
|
'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 0.1rem solid #e2e2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .box {
|
||||||
|
background: #222;
|
||||||
|
border-color: #303030;
|
||||||
|
}
|
|
@ -64,16 +64,3 @@ button {
|
||||||
a h1 {
|
a h1 {
|
||||||
color: unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5%;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 0.1rem solid #e2e2e2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .box {
|
|
||||||
background: #222;
|
|
||||||
border-color: #303030;
|
|
||||||
}
|
|
||||||
|
|
|
@ -9,6 +9,7 @@ import Total from './Total'
|
||||||
import Account from './Account'
|
import Account from './Account'
|
||||||
import Ticker from './Ticker'
|
import Ticker from './Ticker'
|
||||||
import IconCog from '../../images/cog.svg'
|
import IconCog from '../../images/cog.svg'
|
||||||
|
import stylesBox from '../../components/Box.module.css'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
|
||||||
const Accounts = () => {
|
const Accounts = () => {
|
||||||
|
@ -28,7 +29,7 @@ const Home = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main className={classnames(styles.main, 'box')}>
|
<main className={classnames(styles.main, stylesBox.box)}>
|
||||||
<Link className={styles.preferences} to="/preferences">
|
<Link className={styles.preferences} to="/preferences">
|
||||||
<IconCog />
|
<IconCog />
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -0,0 +1,32 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import styles from './New.module.css'
|
||||||
|
|
||||||
|
const New = ({ input, handleInputChange, handleSave, accentColor }) => (
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="0xxxxxxxx"
|
||||||
|
value={input}
|
||||||
|
onChange={e => handleInputChange(e)}
|
||||||
|
className={styles.input}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={styles.button}
|
||||||
|
onClick={e => handleSave(e)}
|
||||||
|
style={{ color: accentColor }}
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
|
||||||
|
New.propTypes = {
|
||||||
|
input: PropTypes.string.isRequired,
|
||||||
|
handleInputChange: PropTypes.func.isRequired,
|
||||||
|
handleSave: PropTypes.func.isRequired,
|
||||||
|
accentColor: PropTypes.string.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default New
|
|
@ -0,0 +1,18 @@
|
||||||
|
.input {
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: 0;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
width: 80%;
|
||||||
|
color: #303030;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .input {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
composes: button from './index.module.css';
|
||||||
|
}
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { toDataUrl } from 'ethereum-blockies'
|
||||||
|
import posed, { PoseGroup } from 'react-pose'
|
||||||
|
import { fadeIn } from '../../../components/Animations'
|
||||||
|
import styles from './Saved.module.css'
|
||||||
|
|
||||||
|
const Item = posed.li(fadeIn)
|
||||||
|
|
||||||
|
const Saved = ({ accounts, handleDelete }) => (
|
||||||
|
<PoseGroup>
|
||||||
|
{accounts.map(account => {
|
||||||
|
const identicon = account && toDataUrl(account)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Item key={account}>
|
||||||
|
<div>
|
||||||
|
<img className={styles.identicon} src={identicon} alt="Blockies" />
|
||||||
|
{account}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={styles.delete}
|
||||||
|
onClick={e => handleDelete(e, account)}
|
||||||
|
title="Remove account"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</Item>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</PoseGroup>
|
||||||
|
)
|
||||||
|
|
||||||
|
Saved.propTypes = {
|
||||||
|
accounts: PropTypes.array.isRequired,
|
||||||
|
handleDelete: PropTypes.func.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Saved
|
|
@ -0,0 +1,15 @@
|
||||||
|
.identicon {
|
||||||
|
width: 1.5rem !important;
|
||||||
|
height: 1.5rem !important;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete {
|
||||||
|
composes: button from './index.module.css';
|
||||||
|
position: relative;
|
||||||
|
font-size: 2rem;
|
||||||
|
top: -0.2rem;
|
||||||
|
color: #41474e;
|
||||||
|
transition: color 0.5s ease-out;
|
||||||
|
}
|
|
@ -1,70 +1,10 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { toDataUrl } from 'ethereum-blockies'
|
|
||||||
import posed, { PoseGroup } from 'react-pose'
|
|
||||||
import Store from 'electron-store'
|
import Store from 'electron-store'
|
||||||
import ethereum_address from 'ethereum-address'
|
import ethereum_address from 'ethereum-address'
|
||||||
import { AppContext } from '../../store/createContext'
|
import { AppContext } from '../../../store/createContext'
|
||||||
import { fadeIn } from '../../components/Animations'
|
import Saved from './Saved'
|
||||||
|
import New from './New'
|
||||||
const Item = posed.li(fadeIn)
|
import styles from './index.module.css'
|
||||||
|
|
||||||
const AccountsList = ({ accounts, handleDelete }) => (
|
|
||||||
<PoseGroup>
|
|
||||||
{accounts.map(account => {
|
|
||||||
const identicon = account && toDataUrl(account)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Item key={account}>
|
|
||||||
<div>
|
|
||||||
<img className="identicon" src={identicon} alt="Blockies" />
|
|
||||||
{account}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="delete"
|
|
||||||
onClick={e => handleDelete(e, account)}
|
|
||||||
title="Remove account"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</Item>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</PoseGroup>
|
|
||||||
)
|
|
||||||
|
|
||||||
AccountsList.propTypes = {
|
|
||||||
accounts: PropTypes.array.isRequired,
|
|
||||||
handleDelete: PropTypes.func.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
const AccountNew = ({ input, handleInputChange, handleSave, accentColor }) => (
|
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="0xxxxxxxx"
|
|
||||||
value={input}
|
|
||||||
onChange={e => handleInputChange(e)}
|
|
||||||
className="preference__input"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="preference__input__add"
|
|
||||||
onClick={e => handleSave(e)}
|
|
||||||
style={{ color: accentColor }}
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
|
|
||||||
AccountNew.propTypes = {
|
|
||||||
input: PropTypes.string.isRequired,
|
|
||||||
handleInputChange: PropTypes.func.isRequired,
|
|
||||||
handleSave: PropTypes.func.isRequired,
|
|
||||||
accentColor: PropTypes.string.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Accounts extends PureComponent {
|
export default class Accounts extends PureComponent {
|
||||||
static contextType = AppContext
|
static contextType = AppContext
|
||||||
|
@ -133,22 +73,22 @@ export default class Accounts extends PureComponent {
|
||||||
const { accounts, input, error } = this.state
|
const { accounts, input, error } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="preference box">
|
<div className={styles.preference}>
|
||||||
<h2 className="preference__title">Accounts</h2>
|
<h2 className={styles.title}>Accounts</h2>
|
||||||
<p className="preference__help">
|
<p className={styles.help}>
|
||||||
Add Ethereum account addresses holding Ocean Tokens.
|
Add Ethereum account addresses holding Ocean Tokens.
|
||||||
</p>
|
</p>
|
||||||
<ul className="preference__list">
|
<ul className={styles.list}>
|
||||||
<AccountsList accounts={accounts} handleDelete={this.handleDelete} />
|
<Saved accounts={accounts} handleDelete={this.handleDelete} />
|
||||||
|
|
||||||
<AccountNew
|
<New
|
||||||
input={input}
|
input={input}
|
||||||
handleInputChange={this.handleInputChange}
|
handleInputChange={this.handleInputChange}
|
||||||
accentColor={accentColor}
|
accentColor={accentColor}
|
||||||
handleSave={this.handleSave}
|
handleSave={this.handleSave}
|
||||||
/>
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
{error !== '' && <div className="preference__error">{error}</div>}
|
{error !== '' && <div className={styles.error}>{error}</div>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -0,0 +1,62 @@
|
||||||
|
.preference {
|
||||||
|
composes: box from '../../../components/Box.module.css';
|
||||||
|
-webkit-app-region: none;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title,
|
||||||
|
.help {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help {
|
||||||
|
color: #8b98a9;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0;
|
||||||
|
border-top: 1px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .list {
|
||||||
|
border-top-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li,
|
||||||
|
.list li > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li {
|
||||||
|
list-style: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #e2e2e2;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .list li {
|
||||||
|
border-bottom-color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
|
@ -1,114 +0,0 @@
|
||||||
.preferences {
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preferences__title {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-top: -1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preferences__close {
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 2rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
color: #8b98a9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__list {
|
|
||||||
padding: 0;
|
|
||||||
border-top: 1px solid #e2e2e2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .preference__list {
|
|
||||||
border-top-color: #303030;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__list li,
|
|
||||||
.preference__list li > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__list li {
|
|
||||||
list-style: none;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: 1px solid #e2e2e2;
|
|
||||||
padding-top: 0.25rem;
|
|
||||||
padding-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .preference__list li {
|
|
||||||
border-bottom-color: #303030;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preferences button {
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
outline: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.delete {
|
|
||||||
position: relative;
|
|
||||||
font-size: 2rem;
|
|
||||||
top: -0.2rem;
|
|
||||||
color: #41474e;
|
|
||||||
transition: color 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference {
|
|
||||||
-webkit-app-region: none;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__title,
|
|
||||||
.preference__help {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__help {
|
|
||||||
color: #8b98a9;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference .identicon {
|
|
||||||
width: 1.5rem !important;
|
|
||||||
height: 1.5rem !important;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__input {
|
|
||||||
font-size: 1rem;
|
|
||||||
outline: 0;
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
width: 80%;
|
|
||||||
color: #303030;
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .preference__input {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preference__error {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Link } from '@reach/router'
|
import { Link } from '@reach/router'
|
||||||
import Accounts from './Accounts'
|
import Accounts from './Accounts'
|
||||||
import './index.css'
|
import styles from './index.module.css'
|
||||||
|
|
||||||
const Preferences = () => (
|
const Preferences = () => (
|
||||||
<div className="preferences">
|
<div className={styles.preferences}>
|
||||||
<h1 className="preferences__title">Preferences</h1>{' '}
|
<h1 className={styles.title}>Preferences</h1>{' '}
|
||||||
<Link className="preferences__close" title="Close Preferences" to="/">
|
<Link className={styles.close} title="Close Preferences" to="/">
|
||||||
×
|
×
|
||||||
</Link>
|
</Link>
|
||||||
<Accounts />
|
<Accounts />
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
.preferences {
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 2rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
color: #8b98a9;
|
||||||
|
}
|
Loading…
Reference in New Issue