From f686b4773e35c20f9a790c5aa0192a51bfd5b78b Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Thu, 9 Nov 2017 16:41:52 +0100
Subject: [PATCH] Move savedAccounts css from js file

---
 src/components/savedAccounts/savedAccounts.css | 13 +++++++++++++
 src/components/savedAccounts/savedAccounts.js  | 14 ++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/components/savedAccounts/savedAccounts.css

diff --git a/src/components/savedAccounts/savedAccounts.css b/src/components/savedAccounts/savedAccounts.css
new file mode 100644
index 000000000..68c2a3cd4
--- /dev/null
+++ b/src/components/savedAccounts/savedAccounts.css
@@ -0,0 +1,13 @@
+.tableWrapper {
+  margin: -24px -24px 24px -24px;
+}
+
+.iconCell {
+  width: 24px;
+  text-align: right;
+}
+
+.isActive {
+  background-color: #d6f0ff !important;
+  font-weight: bold;
+}
diff --git a/src/components/savedAccounts/savedAccounts.js b/src/components/savedAccounts/savedAccounts.js
index f4bb74b0e..119882761 100644
--- a/src/components/savedAccounts/savedAccounts.js
+++ b/src/components/savedAccounts/savedAccounts.js
@@ -7,6 +7,8 @@ import networks from '../../constants/networks';
 import getNetwork from '../../utils/getNetwork';
 import { extractAddress } from '../../utils/api/account';
 
+import styles from './savedAccounts.css';
+
 const SavedAccounts = ({
   networkOptions,
   publicKey,
@@ -35,18 +37,18 @@ const SavedAccounts = ({
         <InfoParagraph>
           {t('This will save public key of your account on this device, so next time it will launch without the need to log in. However, you will be prompted to enter the passphrase once you want to do any transaction.')}
         </InfoParagraph> :
-        <div style={{ margin: '-24px -24px 24px -24px' }} >
+        <div className={styles.tableWrapper} >
           <Table selectable={false} className='saved-accounts-table'>
             <TableHead>
-              <TableCell style={{ width: 20 }} >{t('Switch')}</TableCell>
+              <TableCell className={styles.iconCell} >{t('Switch')}</TableCell>
               <TableCell>{t('Address')}</TableCell>
               <TableCell>{t('Network')}</TableCell>
-              <TableCell style={{ 'text-align': 'right' }}>{t('Forget')}</TableCell>
+              <TableCell className={styles.iconCell} >{t('Forget')}</TableCell>
             </TableHead>
             {savedAccounts.map(account => (
               <TableRow key={account.publicKey + account.network}
-                style={{ 'font-weight': (isActive(account) ? 'bold' : 'normal') }}>
-                <TableCell style={{ width: 20 }} >
+                className={(isActive(account) ? styles.isActive : null)}>
+                <TableCell className={styles.iconCell} >
                   <IconButton icon='exit_to_app'
                     disabled={isActive(account)}
                     className='switch-button'
@@ -60,7 +62,7 @@ const SavedAccounts = ({
                     account.address :
                     t((getNetwork(account.network) || {}).name)}
                 </TableCell>
-                <TableCell style={{ 'text-align': 'right' }}>
+                <TableCell className={styles.iconCell} >
                   <IconButton icon='clear' className='forget-button'
                     onClick={accountRemoved.bind(this, account)} />
                 </TableCell>