From 959007f7038dfa845de57be24e78b5f531aaf3a7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 9 Sep 2019 00:13:38 +0200
Subject: [PATCH] Preferences refactor

---
 src/main/index.js                             |  12 +-
 src/renderer/components/Box.module.css        |  12 ++
 src/renderer/index.css                        |  13 --
 src/renderer/screens/Home/index.jsx           |   3 +-
 .../screens/Preferences/Accounts/New.jsx      |  32 +++++
 .../Preferences/Accounts/New.module.css       |  18 +++
 .../screens/Preferences/Accounts/Saved.jsx    |  40 ++++++
 .../Preferences/Accounts/Saved.module.css     |  15 +++
 .../{Accounts.jsx => Accounts/index.jsx}      |  82 ++-----------
 .../Preferences/Accounts/index.module.css     |  62 ++++++++++
 src/renderer/screens/Preferences/index.css    | 114 ------------------
 src/renderer/screens/Preferences/index.jsx    |   8 +-
 .../screens/Preferences/index.module.css      |  21 ++++
 13 files changed, 223 insertions(+), 209 deletions(-)
 create mode 100644 src/renderer/components/Box.module.css
 create mode 100644 src/renderer/screens/Preferences/Accounts/New.jsx
 create mode 100644 src/renderer/screens/Preferences/Accounts/New.module.css
 create mode 100644 src/renderer/screens/Preferences/Accounts/Saved.jsx
 create mode 100644 src/renderer/screens/Preferences/Accounts/Saved.module.css
 rename src/renderer/screens/Preferences/{Accounts.jsx => Accounts/index.jsx} (52%)
 create mode 100644 src/renderer/screens/Preferences/Accounts/index.module.css
 delete mode 100644 src/renderer/screens/Preferences/index.css
 create mode 100644 src/renderer/screens/Preferences/index.module.css

diff --git a/src/main/index.js b/src/main/index.js
index c7d98a1..b5bf913 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -132,22 +132,22 @@ const installDevTools = async mainWindow => {
 const createWindowEvents = mainWindow => {
   mainWindow.on('enter-full-screen', () =>
     mainWindow.webContents.executeJavaScript(
-      "document.getElementsByTagName('html')[0].classList.add('fullscreen')"
+      'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')'
     )
   )
   mainWindow.on('leave-full-screen', () =>
     mainWindow.webContents.executeJavaScript(
-      "document.getElementsByTagName('html')[0].classList.remove('fullscreen')"
+      'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')'
     )
   )
   mainWindow.on('blur', () =>
     mainWindow.webContents.executeJavaScript(
-      "document.getElementsByTagName('html')[0].classList.add('blur')"
+      'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')'
     )
   )
   mainWindow.on('focus', () =>
     mainWindow.webContents.executeJavaScript(
-      "document.getElementsByTagName('html')[0].classList.remove('blur')"
+      'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')'
     )
   )
 }
@@ -191,10 +191,10 @@ const switchTheme = () => {
 
     isDarkMode
       ? mainWindow.webContents.executeJavaScript(
-          "document.getElementsByTagName('html')[0].classList.add('dark')"
+          'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
         )
       : mainWindow.webContents.executeJavaScript(
-          "document.getElementsByTagName('html')[0].classList.remove('dark')"
+          'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
         )
   }
 }
diff --git a/src/renderer/components/Box.module.css b/src/renderer/components/Box.module.css
new file mode 100644
index 0000000..b436e46
--- /dev/null
+++ b/src/renderer/components/Box.module.css
@@ -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;
+}
diff --git a/src/renderer/index.css b/src/renderer/index.css
index dc8056a..ac4fad4 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -64,16 +64,3 @@ button {
 a h1 {
   color: unset;
 }
-
-.box {
-  width: 100%;
-  padding: 5%;
-  background: #fff;
-  border-radius: 5px;
-  border: 0.1rem solid #e2e2e2;
-}
-
-.dark .box {
-  background: #222;
-  border-color: #303030;
-}
diff --git a/src/renderer/screens/Home/index.jsx b/src/renderer/screens/Home/index.jsx
index d3707fa..b23298c 100644
--- a/src/renderer/screens/Home/index.jsx
+++ b/src/renderer/screens/Home/index.jsx
@@ -9,6 +9,7 @@ import Total from './Total'
 import Account from './Account'
 import Ticker from './Ticker'
 import IconCog from '../../images/cog.svg'
+import stylesBox from '../../components/Box.module.css'
 import styles from './index.module.css'
 
 const Accounts = () => {
@@ -28,7 +29,7 @@ const Home = () => {
 
   return (
     <>
-      <main className={classnames(styles.main, 'box')}>
+      <main className={classnames(styles.main, stylesBox.box)}>
         <Link className={styles.preferences} to="/preferences">
           <IconCog />
         </Link>
diff --git a/src/renderer/screens/Preferences/Accounts/New.jsx b/src/renderer/screens/Preferences/Accounts/New.jsx
new file mode 100644
index 0000000..c72a0a8
--- /dev/null
+++ b/src/renderer/screens/Preferences/Accounts/New.jsx
@@ -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
diff --git a/src/renderer/screens/Preferences/Accounts/New.module.css b/src/renderer/screens/Preferences/Accounts/New.module.css
new file mode 100644
index 0000000..b91589a
--- /dev/null
+++ b/src/renderer/screens/Preferences/Accounts/New.module.css
@@ -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';
+}
diff --git a/src/renderer/screens/Preferences/Accounts/Saved.jsx b/src/renderer/screens/Preferences/Accounts/Saved.jsx
new file mode 100644
index 0000000..774e949
--- /dev/null
+++ b/src/renderer/screens/Preferences/Accounts/Saved.jsx
@@ -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"
+          >
+            &times;
+          </button>
+        </Item>
+      )
+    })}
+  </PoseGroup>
+)
+
+Saved.propTypes = {
+  accounts: PropTypes.array.isRequired,
+  handleDelete: PropTypes.func.isRequired
+}
+
+export default Saved
diff --git a/src/renderer/screens/Preferences/Accounts/Saved.module.css b/src/renderer/screens/Preferences/Accounts/Saved.module.css
new file mode 100644
index 0000000..234853f
--- /dev/null
+++ b/src/renderer/screens/Preferences/Accounts/Saved.module.css
@@ -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;
+}
diff --git a/src/renderer/screens/Preferences/Accounts.jsx b/src/renderer/screens/Preferences/Accounts/index.jsx
similarity index 52%
rename from src/renderer/screens/Preferences/Accounts.jsx
rename to src/renderer/screens/Preferences/Accounts/index.jsx
index 303eab0..de556ec 100644
--- a/src/renderer/screens/Preferences/Accounts.jsx
+++ b/src/renderer/screens/Preferences/Accounts/index.jsx
@@ -1,70 +1,10 @@
 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 ethereum_address from 'ethereum-address'
-import { AppContext } from '../../store/createContext'
-import { fadeIn } from '../../components/Animations'
-
-const Item = posed.li(fadeIn)
-
-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"
-          >
-            &times;
-          </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
-}
+import { AppContext } from '../../../store/createContext'
+import Saved from './Saved'
+import New from './New'
+import styles from './index.module.css'
 
 export default class Accounts extends PureComponent {
   static contextType = AppContext
@@ -133,22 +73,22 @@ export default class Accounts extends PureComponent {
     const { accounts, input, error } = this.state
 
     return (
-      <div className="preference box">
-        <h2 className="preference__title">Accounts</h2>
-        <p className="preference__help">
+      <div className={styles.preference}>
+        <h2 className={styles.title}>Accounts</h2>
+        <p className={styles.help}>
           Add Ethereum account addresses holding Ocean Tokens.
         </p>
-        <ul className="preference__list">
-          <AccountsList accounts={accounts} handleDelete={this.handleDelete} />
+        <ul className={styles.list}>
+          <Saved accounts={accounts} handleDelete={this.handleDelete} />
 
-          <AccountNew
+          <New
             input={input}
             handleInputChange={this.handleInputChange}
             accentColor={accentColor}
             handleSave={this.handleSave}
           />
         </ul>
-        {error !== '' && <div className="preference__error">{error}</div>}
+        {error !== '' && <div className={styles.error}>{error}</div>}
       </div>
     )
   }
diff --git a/src/renderer/screens/Preferences/Accounts/index.module.css b/src/renderer/screens/Preferences/Accounts/index.module.css
new file mode 100644
index 0000000..eb1403e
--- /dev/null
+++ b/src/renderer/screens/Preferences/Accounts/index.module.css
@@ -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;
+}
diff --git a/src/renderer/screens/Preferences/index.css b/src/renderer/screens/Preferences/index.css
deleted file mode 100644
index 8bba46f..0000000
--- a/src/renderer/screens/Preferences/index.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/renderer/screens/Preferences/index.jsx b/src/renderer/screens/Preferences/index.jsx
index 63188dd..86a389c 100644
--- a/src/renderer/screens/Preferences/index.jsx
+++ b/src/renderer/screens/Preferences/index.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { Link } from '@reach/router'
 import Accounts from './Accounts'
-import './index.css'
+import styles from './index.module.css'
 
 const Preferences = () => (
-  <div className="preferences">
-    <h1 className="preferences__title">Preferences</h1>{' '}
-    <Link className="preferences__close" title="Close Preferences" to="/">
+  <div className={styles.preferences}>
+    <h1 className={styles.title}>Preferences</h1>{' '}
+    <Link className={styles.close} title="Close Preferences" to="/">
       &times;
     </Link>
     <Accounts />
diff --git a/src/renderer/screens/Preferences/index.module.css b/src/renderer/screens/Preferences/index.module.css
new file mode 100644
index 0000000..c2aa751
--- /dev/null
+++ b/src/renderer/screens/Preferences/index.module.css
@@ -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;
+}