From c3a15af73f449dcf0b4502bed252ddc6ce97b3c7 Mon Sep 17 00:00:00 2001
From: Matheus Degiovani <opensource@matheusd.com>
Date: Mon, 11 Sep 2017 17:13:52 -0300
Subject: [PATCH] Refactor inline styles to css classes. Remove radium. (#654)

---
 app/app.html                                  |    5 +-
 app/components/Balance.js                     |   27 +-
 .../CreateWalletForm/ConfirmSeed/SeedEntry.js |    2 +-
 .../CreateWalletForm/CreateWallet.js          |    2 +-
 app/components/Header/Header.js               |   64 +-
 app/components/PurchaseTickets/Form.js        |  128 +-
 app/components/SideBar/Bar.js                 |    2 +-
 app/components/StakeInfo/Display.js           |   88 +-
 app/components/StakePools/AddForm.js          |   34 +-
 app/components/StakePools/List.js             |   40 +-
 app/components/TicketAutoBuyer/Form.js        |   92 +-
 app/components/TxHistory.js                   |    2 +-
 app/components/TxHistoryRow/index.js          |    3 +-
 app/components/VotingPrefs/Page.js            |   18 +-
 .../AccountsPage/Accounts/AccountRow/Row.js   |    2 +-
 app/components/views/Help.js                  |    8 +-
 app/components/views/HomePage/Page.js         |    2 +-
 app/components/views/SettingsPage/Page.js     |   48 +-
 app/components/views/TicketsPage/Header.js    |   52 +-
 app/components/views/TicketsPage/Page.js      |    8 +-
 app/components/views/TicketsPage/Tickets.js   |    6 +-
 app/components/views/TxDetails.js             |   81 +-
 app/components/views/ViewStyles.js            | 1668 -----------------
 app/containers/App.js                         |   13 +-
 app/style/AccountRow.less                     |   11 +-
 app/style/AccountsPage.less                   |    4 +-
 app/style/AgendaCard.less                     |    8 +-
 app/style/AgendaOverview.less                 |    3 +-
 app/style/Balance.less                        |   14 +
 .../fonts.css => style/Fonts.less}            |   23 +-
 app/style/Global.less                         |   16 +
 app/style/Help.less                           |   30 +
 app/style/HistoryPage.less                    |    4 +-
 app/style/HomePage.less                       |    3 +-
 app/style/Icons.less                          |   56 +
 app/style/Loading.less                        |    2 +-
 app/style/MiscComponents.less                 |   13 +-
 app/style/NumTicketsInput.less                |    8 +-
 .../ReactSelectGlobal.less}                   |    0
 app/style/ReceivePage.less                    |    5 +-
 app/style/SendPage.less                       |   16 +-
 app/style/Settings.less                       |   90 +
 app/style/SideBar.less                        |    5 +-
 app/style/Snackbar.less                       |   39 +
 app/style/StakePool.less                      | 1226 ++++++++++++
 app/style/Stakey.less                         |    4 +-
 app/style/TxDetails.less                      |  283 +++
 app/style/TxHistory.less                      |   11 +-
 app/{ => style}/fonts/Inconsolata-Bold.ttf    |  Bin
 app/{ => style}/fonts/Inconsolata-Regular.ttf |  Bin
 app/{ => style}/fonts/SourceSansPro-Bold.ttf  |  Bin
 .../fonts/SourceSansPro-BoldItalic.ttf        |  Bin
 .../fonts/SourceSansPro-Italic.ttf            |  Bin
 app/{ => style}/fonts/SourceSansPro-Light.ttf |  Bin
 .../fonts/SourceSansPro-LightItalic.ttf       |  Bin
 .../fonts/SourceSansPro-Regular.ttf           |  Bin
 .../fonts/SourceSansPro-SemiBold.ttf          |  Bin
 .../fonts/SourceSansPro-SemiBoldItalic.ttf    |  Bin
 .../icons/account-download.svg                |    0
 .../icons/account-eye-hide.svg                |    0
 .../icons/account-eye-open.svg                |    0
 .../icons/account-rename.svg                  |    0
 app/{components => style}/icons/add.svg       |    0
 .../icons/arrow-down-key-blue.svg             |    0
 .../icons/arrow-down-mid-blue.svg             |    0
 .../icons/arrow-right-gray.svg                |    0
 .../icons/arrow-right-key-blue.svg            |    0
 .../icons/arrow-right-smoke.svg               |    0
 .../icons/arrow-up-key-blue.svg               |    0
 .../icons/arrow-up-light-blue.svg             |    0
 .../icons/arrow-up-turquiose.svg              |    0
 .../icons/balance-to-maintain.svg             |    0
 app/{components => style}/icons/checkbox.svg  |    0
 .../icons/copy-to-clipboard-blue.svg          |    0
 .../icons/copy-to-clipboard-gray.svg          |    0
 app/{components => style}/icons/delete.svg    |    0
 app/{components => style}/icons/expiry.svg    |    0
 app/{components => style}/icons/img.svg       |    0
 .../icons/indicator-confirmed.svg             |    0
 .../icons/indicator-finished.svg              |    0
 .../icons/indicator-invalid.svg               |    0
 .../icons/indicator-pending.svg               |    0
 app/{components => style}/icons/logo.svg      |    0
 app/{components => style}/icons/max-fee.svg   |    0
 .../icons/max-per-block.svg                   |    0
 .../icons/max-price-absolute.svg              |    0
 .../icons/max-price-relative.svg              |    0
 .../icons/menu-link-left-color.png            |  Bin
 app/{components => style}/icons/menu-logo.svg |    0
 app/{components => style}/icons/minus-big.svg |    0
 .../icons/minus-small.svg                     |    0
 app/{components => style}/icons/plus-big.svg  |    0
 .../icons/plus-small.svg                      |    0
 .../icons/pool-fee-address.svg                |    0
 app/{components => style}/icons/pool-fees.svg |    0
 app/{components => style}/icons/qrcode-1.svg  |    0
 app/{components => style}/icons/search.svg    |    0
 .../icons/searchHightWidth.svg                |    0
 app/{components => style}/icons/split-fee.svg |    0
 .../icons/stake-pool.svg                      |    0
 .../icons/stakeySprites.png                   |  Bin
 app/{components => style}/icons/stripe.svg    |    0
 .../tickets-agenda-card-cebab-disabled.svg    |    0
 .../icons/tickets-agenda-card-cebab-hover.svg |    0
 .../icons/tickets-agenda-card-cebab.svg       |    0
 .../tickets-agenda-card-kebab-disabled.svg    |    0
 .../icons/tickets-agenda-card-kebab-hover.svg |    0
 .../icons/tickets-agenda-card-kebab.svg       |    0
 .../icons/tickets-agenda-close.svg            |    0
 .../icons/tickets-cogs-closed.svg             |    0
 .../icons/tickets-cogs-opened.svg             |    0
 .../icons/tickets-info.svg                    |    0
 .../icons/tickets-manage-stakepools.svg       |    0
 .../icons/tickets-ticket.svg                  |    0
 .../icons/transparent.png                     |  Bin
 .../icons/voting-address.svg                  |    0
 .../icons/wallet-blue.svg                     |    0
 .../icons/wallet-gray.svg                     |    0
 .../icons/wallet-smoke.svg                    |    0
 .../icons/wallet-turquoise.svg                |    0
 package.json                                  |    2 -
 public/css/app.global.css                     |   37 -
 122 files changed, 2120 insertions(+), 2188 deletions(-)
 delete mode 100644 app/components/views/ViewStyles.js
 create mode 100644 app/style/Balance.less
 rename app/{components/fonts.css => style/Fonts.less} (56%)
 create mode 100644 app/style/Global.less
 create mode 100644 app/style/Help.less
 create mode 100644 app/style/Icons.less
 rename app/{components/react-select.global.css => style/ReactSelectGlobal.less} (100%)
 create mode 100644 app/style/Settings.less
 create mode 100644 app/style/Snackbar.less
 create mode 100644 app/style/TxDetails.less
 rename app/{ => style}/fonts/Inconsolata-Bold.ttf (100%)
 rename app/{ => style}/fonts/Inconsolata-Regular.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-Bold.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-BoldItalic.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-Italic.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-Light.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-LightItalic.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-Regular.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-SemiBold.ttf (100%)
 rename app/{ => style}/fonts/SourceSansPro-SemiBoldItalic.ttf (100%)
 rename app/{components => style}/icons/account-download.svg (100%)
 rename app/{components => style}/icons/account-eye-hide.svg (100%)
 rename app/{components => style}/icons/account-eye-open.svg (100%)
 rename app/{components => style}/icons/account-rename.svg (100%)
 rename app/{components => style}/icons/add.svg (100%)
 rename app/{components => style}/icons/arrow-down-key-blue.svg (100%)
 rename app/{components => style}/icons/arrow-down-mid-blue.svg (100%)
 rename app/{components => style}/icons/arrow-right-gray.svg (100%)
 rename app/{components => style}/icons/arrow-right-key-blue.svg (100%)
 rename app/{components => style}/icons/arrow-right-smoke.svg (100%)
 rename app/{components => style}/icons/arrow-up-key-blue.svg (100%)
 rename app/{components => style}/icons/arrow-up-light-blue.svg (100%)
 rename app/{components => style}/icons/arrow-up-turquiose.svg (100%)
 rename app/{components => style}/icons/balance-to-maintain.svg (100%)
 rename app/{components => style}/icons/checkbox.svg (100%)
 rename app/{components => style}/icons/copy-to-clipboard-blue.svg (100%)
 rename app/{components => style}/icons/copy-to-clipboard-gray.svg (100%)
 rename app/{components => style}/icons/delete.svg (100%)
 rename app/{components => style}/icons/expiry.svg (100%)
 rename app/{components => style}/icons/img.svg (100%)
 rename app/{components => style}/icons/indicator-confirmed.svg (100%)
 rename app/{components => style}/icons/indicator-finished.svg (100%)
 rename app/{components => style}/icons/indicator-invalid.svg (100%)
 rename app/{components => style}/icons/indicator-pending.svg (100%)
 rename app/{components => style}/icons/logo.svg (100%)
 rename app/{components => style}/icons/max-fee.svg (100%)
 rename app/{components => style}/icons/max-per-block.svg (100%)
 rename app/{components => style}/icons/max-price-absolute.svg (100%)
 rename app/{components => style}/icons/max-price-relative.svg (100%)
 rename app/{components => style}/icons/menu-link-left-color.png (100%)
 rename app/{components => style}/icons/menu-logo.svg (100%)
 rename app/{components => style}/icons/minus-big.svg (100%)
 rename app/{components => style}/icons/minus-small.svg (100%)
 rename app/{components => style}/icons/plus-big.svg (100%)
 rename app/{components => style}/icons/plus-small.svg (100%)
 rename app/{components => style}/icons/pool-fee-address.svg (100%)
 rename app/{components => style}/icons/pool-fees.svg (100%)
 rename app/{components => style}/icons/qrcode-1.svg (100%)
 rename app/{components => style}/icons/search.svg (100%)
 rename app/{components => style}/icons/searchHightWidth.svg (100%)
 rename app/{components => style}/icons/split-fee.svg (100%)
 rename app/{components => style}/icons/stake-pool.svg (100%)
 rename app/{components => style}/icons/stakeySprites.png (100%)
 rename app/{components => style}/icons/stripe.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-cebab-disabled.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-cebab-hover.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-cebab.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-kebab-disabled.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-kebab-hover.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-card-kebab.svg (100%)
 rename app/{components => style}/icons/tickets-agenda-close.svg (100%)
 rename app/{components => style}/icons/tickets-cogs-closed.svg (100%)
 rename app/{components => style}/icons/tickets-cogs-opened.svg (100%)
 rename app/{components => style}/icons/tickets-info.svg (100%)
 rename app/{components => style}/icons/tickets-manage-stakepools.svg (100%)
 rename app/{components => style}/icons/tickets-ticket.svg (100%)
 rename app/{components => style}/icons/transparent.png (100%)
 rename app/{components => style}/icons/voting-address.svg (100%)
 rename app/{components => style}/icons/wallet-blue.svg (100%)
 rename app/{components => style}/icons/wallet-gray.svg (100%)
 rename app/{components => style}/icons/wallet-smoke.svg (100%)
 rename app/{components => style}/icons/wallet-turquoise.svg (100%)
 delete mode 100644 public/css/app.global.css

diff --git a/app/app.html b/app/app.html
index ba8032f978..d5c053badc 100644
--- a/app/app.html
+++ b/app/app.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="./components/react-select.global.css">
+    <link rel="stylesheet" href="./style/Global.less">
+    <link rel="stylesheet" href="./style/ReactSelectGlobal.less">
     <title>Decrediton</title>
     <script>
       (function() {
@@ -15,7 +16,7 @@
       }());
     </script>
   </head>
-  <body style="font-family: 'Source Sans Pro', sans-serif;color: #333;font-size: 14px;line-height: 20px;font-weight: 400;margin: 0px;min-height: 100%;background-color: #FFF;box-sizing: border-box;">
+  <body class="decrediton">
     <div id="root"></div>
     <script>
       {
diff --git a/app/components/Balance.js b/app/components/Balance.js
index 475642caaf..0a4c5c170f 100644
--- a/app/components/Balance.js
+++ b/app/components/Balance.js
@@ -1,7 +1,7 @@
 // @flow
-import Radium from "radium";
 import React from "react";
 import { connect } from "react-redux";
+import "../style/Balance.less";
 
 function mapStateToProps(state) {
   return {
@@ -9,19 +9,6 @@ function mapStateToProps(state) {
   };
 }
 
-var styles = {
-  base: {
-    fontSize: "1em",
-    fontFamily: "Inconsolata, monospace",
-  },
-  small: {
-    fontSize: "0.8em",
-  },
-
-  block: {
-    display: "block",
-  },
-};
 
 class Balance extends React.Component {
   render() {
@@ -35,25 +22,25 @@ class Balance extends React.Component {
       }
       return (
         <span
-        style={styles.base}
+        className="balance-base"
         onClick={this.props.onClick}
         >
           {numberFormatPart[0]}.{numberFormatPart[1].toString().slice(0,2)}
-          <span style={styles.small}>{numberFormatPart[1].toString().slice(2)}</span>
-          <span style={styles.small}> DCR</span>
+          <span className="balance-small">{numberFormatPart[1].toString().slice(2)}</span>
+          <span className="balance-small"> DCR</span>
         </span>
       );
     } else if (currentSettings.currencyDisplay === "atoms") {
       return (
         <span
-        style={styles.base}
+        className="balance-base"
         onClick={this.props.onClick}
         >
           {this.props.amount}
-          <span style={styles.small}> atoms</span>
+          <span className="balance-small"> atoms</span>
         </span>
       );
     }
   }
 }
-export default connect(mapStateToProps)(Radium(Balance));
+export default connect(mapStateToProps)(Balance);
diff --git a/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js b/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js
index 179f5d9eb2..27ef564db2 100644
--- a/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js
+++ b/app/components/CreateWalletForm/ConfirmSeed/SeedEntry.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { autobind } from "core-decorators";
 import Select from "react-select";
-import "../../react-select.global.css";
+import "../../../style/ReactSelectGlobal.less";
 import { SEED_LENGTH, SEED_WORDS } from "../../../wallet/seed";
 
 const SEED_WORD_OPTIONS = SEED_WORDS.map(name => ({ name }));
diff --git a/app/components/CreateWalletForm/CreateWallet.js b/app/components/CreateWalletForm/CreateWallet.js
index 85b6d5fed5..18ad1889d2 100644
--- a/app/components/CreateWalletForm/CreateWallet.js
+++ b/app/components/CreateWalletForm/CreateWallet.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import KeyBlueButton from "../KeyBlueButton";
-import "../react-select.global.css";
+import "../../style/ReactSelectGlobal.less";
 import "../../style/CreateWalletForm.less";
 
 const CreateWallet = ({
diff --git a/app/components/Header/Header.js b/app/components/Header/Header.js
index 6a8c8662d1..6e3933570a 100644
--- a/app/components/Header/Header.js
+++ b/app/components/Header/Header.js
@@ -3,58 +3,16 @@ import React from "react";
 import Snackbar from "material-ui/Snackbar";
 import Notification from "./Notification";
 import "../../style/Header.less";
-import WalletGray from "../icons/wallet-gray.svg";
-import TicketSmall from "../icons/tickets-ticket.svg";
-import PlusBig from "../icons/plus-big.svg";
-import MinusBig from "../icons/minus-big.svg";
+import "../../style/Snackbar.less";
 
-const snackbarStyles = {
-  stake: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${TicketSmall})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  receive: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${PlusBig})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  send: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${MinusBig})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  },
-  transfer: {
-    height: "78px",
-    padding: "0px 50px",
-    backgroundColor: "rgba(12, 30, 62, 0.5)",
-    backgroundImage: `url(${WalletGray})`,
-    backgroundPosition: "15px 50%",
-    backgroundSize: "20px",
-    backgroundRepeat: "no-repeat",
-  }
-};
-
-const snackbarBodyStyle = ({ type }) => ({
-  "Ticket": snackbarStyles.stake,
-  "Vote": snackbarStyles.stake,
-  "Revoke": snackbarStyles.stake,
-  "Receive": snackbarStyles.receive,
-  "Send": snackbarStyles.send,
-  "Transfer": snackbarStyles.transfer
-})[type] || {};
+const snackbarClasses = ({ type }) => ({
+  "Ticket": "snackbar snackbar-stake",
+  "Vote": "snackbar snackbar-stake",
+  "Revoke": "snackbar snackbar-stake",
+  "Receive": "snackbar snackbar-receive",
+  "Send": "snackbar snackbar-send",
+  "Transfer": "snackbar snackbar-transfer"
+})[type] || "snackbar ";
 
 const Header = ({
   headerTop,
@@ -66,11 +24,11 @@ const Header = ({
 }) => (
   <div>
     <Snackbar
-      className="snackbar"
+      className={snackbarClasses(message || "")}
       open={!!message}
       message={message ? <Notification {...message} /> : ""}
       autoHideDuration={4000}
-      bodyStyle={snackbarBodyStyle(message || {})}
+      bodyStyle={{backgroundColor: "inherited"}}
       onRequestClose={reason => reason !== "clickaway" ? onDismissMessage() : null}
     />
     <div className="header">
diff --git a/app/components/PurchaseTickets/Form.js b/app/components/PurchaseTickets/Form.js
index 0da561f524..bc81394cdd 100644
--- a/app/components/PurchaseTickets/Form.js
+++ b/app/components/PurchaseTickets/Form.js
@@ -7,7 +7,7 @@ import SelectStakePool from "../SelectStakePool";
 import KeyBlueButton from "../KeyBlueButton";
 import PurchaseTicketsInfoButton from "../PurchaseTicketsInfoButton";
 import TicketsCogs from "../TicketsCogs";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 import { addSpacingAroundText } from "../../helpers/strings";
 
 const PurchaseTicketsForm = ({
@@ -39,18 +39,18 @@ const PurchaseTicketsForm = ({
   onShowTicketsInfo
 }) => (
   <div>
-    <div style={StakePoolStyles.votingTitleArea}>
-      <div style={StakePoolStyles.votingTitleAreaName}>Purchase Tickets</div>
-      <div style={StakePoolStyles.purchaseTicketInputButtons}>
+    <div className="stakepool-voting-title-area">
+      <div className="stakepool-voting-title-area-name">Purchase Tickets</div>
+      <div className="stakepool-purchase-ticket-input-buttons">
         <PurchaseTicketsInfoButton onClick={onShowTicketsInfo}/>
         <TicketsCogs opened={!isShowingAdvanced} onClick={onToggleShowAdvanced}/>
       </div>
     </div>
-    <div style={isShowingAdvanced ? StakePoolStyles.flexHeightShown : StakePoolStyles.flexHeightHidden }>
-      <div style={StakePoolStyles.purchaseTicketRow}>
-        <div style={StakePoolStyles.purchaseTicketRowAccountSelect}>
-          <div style={StakePoolStyles.purchaseTicketAccountSelectLabel}>Account:</div>
-          <div style={StakePoolStyles.purchaseTicketInputSelect}>
+    <div className={isShowingAdvanced ? "stakepool-flex-height-shown" : "stakepool-flex-height-hidden" }>
+      <div className="stakepool-purchase-ticket-row">
+        <div className="stakepool-purchase-ticket-row-account-select">
+          <div className="stakepool-purchase-ticket-account-select-label">Account:</div>
+          <div className="stakepool-purchase-ticket-input-select">
             <Select
               value={account}
               onChange={onChangeAccount}
@@ -72,9 +72,9 @@ const PurchaseTicketsForm = ({
             to={"/accounts"}
           />
         </div>
-        <div style={StakePoolStyles.purchaseTicketRowNumTickets}>
-          <div style={StakePoolStyles.purchaseTicketLabel}>Number of Tickets:</div>
-          <div style={StakePoolStyles.purchaseTicketNumSelect}>
+        <div className="stakepool-purchase-ticket-row-num-tickets">
+          <div className="stakepool-purchase-ticket-label">Number of Tickets:</div>
+          <div className="stakepool-purchase-ticket-num-select">
             <NumTicketsInput
               numTickets={numTicketsToBuy}
               incrementNumTickets={onIncrementNumTickets}
@@ -84,29 +84,29 @@ const PurchaseTicketsForm = ({
         </div>
       </div>
       <div hidden={isShowingAdvanced ? false : true}>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketLabel}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-label">
             Stake Pool:
           </div>
-          <div style={StakePoolStyles.purchaseTicketInputSelect}>
+          <div className="stakepool-purchase-ticket-input-select">
             <SelectStakePool
               options={configuredStakePools}
               value={stakePool}
               onChange={onChangeStakePool}
             />
           </div>
-          <div style={StakePoolStyles.managePoolButtonArea}>
+          <div className="stakepool-manage-pool-button-area">
             <ManagePoolsButton onClick={onShowStakePoolConfig} />
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketRowThirds}>
-            <div style={StakePoolStyles.purchaseTicketLabel}>Ticket Fee (DCR/kB):</div>
-            <div style={StakePoolStyles.purchaseTicketThirdsInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-row-thirds">
+            <div className="stakepool-purchase-ticket-label">Ticket Fee (DCR/kB):</div>
+            <div className="stakepool-purchase-ticket-thirds-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Ticket Fee"
                   value={ticketFee}
                   onChange={e => onChangeTicketFee(e.target.value)}
@@ -114,16 +114,16 @@ const PurchaseTicketsForm = ({
               </div>
             </div>
             {ticketFeeError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{ticketFeeError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{ticketFeeError}</div>
             ) : null}
           </div>
-          <div style={StakePoolStyles.purchaseTicketRowThirds}>
-            <div style={StakePoolStyles.purchaseTicketLabel}>Tx Fee (DCR/kB):</div>
-            <div style={StakePoolStyles.purchaseTicketThirdsInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+          <div className="stakepool-purchase-ticket-row-thirds">
+            <div className="stakepool-purchase-ticket-label">Tx Fee (DCR/kB):</div>
+            <div className="stakepool-purchase-ticket-thirds-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Tx Fee"
                   value={txFee}
                   onChange={e => onChangeTxFee(e.target.value)}
@@ -131,16 +131,16 @@ const PurchaseTicketsForm = ({
               </div>
             </div>
             {txFeeError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{txFeeError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{txFeeError}</div>
             ) : null}
           </div>
-          <div style={StakePoolStyles.purchaseTicketRowThirds}>
-            <div style={StakePoolStyles.purchaseTicketLabel}>Expiry:</div>
-            <div style={StakePoolStyles.purchaseTicketThirdsInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+          <div className="stakepool-purchase-ticket-row-thirds">
+            <div className="stakepool-purchase-ticket-label">Expiry:</div>
+            <div className="stakepool-purchase-ticket-thirds-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Expiry"
                   value={expiry}
                   onChange={e => onChangeExpiry(e.target.value)}
@@ -148,45 +148,45 @@ const PurchaseTicketsForm = ({
               </div>
             </div>
             {expiryError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{expiryError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{expiryError}</div>
             ) : null}
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketLabel}>Ticket Address:</div>
-          <div style={StakePoolStyles.purchaseTicketAddressInput}>
-            <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-label">Ticket Address:</div>
+          <div className="stakepool-purchase-ticket-address-input">
+            <div className="stakepool-input-form-purchase-ticket">
               <input
                 type="text"
                 disabled readOnly
-                style={StakePoolStyles.contentNestPurchaseTicketFormDisabled}
+                className="stakepool-content-nest-purchase-ticket-form-disabled"
                 value={stakePool ? stakePool.value.TicketAddress : null}
               />
             </div>
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketLabel}>Pool Address:</div>
-          <div style={StakePoolStyles.purchaseTicketAddressInput}>
-            <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-label">Pool Address:</div>
+          <div className="stakepool-purchase-ticket-address-input">
+            <div className="stakepool-input-form-purchase-ticket">
               <input
                 type="text"
                 disabled readOnly
-                style={StakePoolStyles.contentNestPurchaseTicketFormDisabled}
+                className="stakepool-content-nest-purchase-ticket-form-disabled"
                 value={stakePool ? stakePool.value.PoolAddress : null}
               />
             </div>
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketRowLeft}>
-            <div style={StakePoolStyles.purchaseTicketLabel}>Pool Fees:</div>
-            <div style={StakePoolStyles.purchaseTicketNumInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-row-left">
+            <div className="stakepool-purchase-ticket-label">Pool Fees:</div>
+            <div className="stakepool-purchase-ticket-num-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
                   disabled readOnly
-                  style={StakePoolStyles.contentNestPurchaseTicketFormDisabled}
+                  className="stakepool-content-nest-purchase-ticket-form-disabled"
                   value={stakePool ? stakePool.value.PoolFees : null}
                 />
               </div>
@@ -194,20 +194,20 @@ const PurchaseTicketsForm = ({
           </div>
         </div>
       </div>
-      <div hidden={isShowingAdvanced ? true : false} style={StakePoolStyles.purchaseTicketQuickBarRow}>
-        <div style={StakePoolStyles.quickBarRowLabel}>Settings:</div>
-        <div style={StakePoolStyles.stakepoolIcon} data-tip="Current Stakepool">{stakePool ? stakePool.value.Host : null}</div>
-        <div style={StakePoolStyles.feeIcon} data-tip="Ticket Fee">{ticketFee} DCR/KB</div>
-        <div style={StakePoolStyles.feeIcon} data-tip="Tx Fee">{txFee} DCR/KB</div>
-        <div style={StakePoolStyles.expiryIcon} data-tip="Expiry">{expiry} Blocks</div>
-        <div style={StakePoolStyles.ticketAddressIcon} data-tip="Ticket Address">{stakePool ? addSpacingAroundText(stakePool.value.TicketAddress) : null}</div>
-        <div style={StakePoolStyles.feeAddressIcon} data-tip="Pool Address">{stakePool ? addSpacingAroundText(stakePool.value.PoolAddress) : null}</div>
-        <div style={StakePoolStyles.poolFeeIcon} data-tip="Pool Fee">{stakePool ? stakePool.value.PoolFees : null}%</div>
+      <div hidden={isShowingAdvanced ? true : false} className="stakepool-purchase-ticket-quick-bar-row">
+        <div className="stakepool-quick-bar-row-label">Settings:</div>
+        <div className="stakepool-icon" data-tip="Current Stakepool">{stakePool ? stakePool.value.Host : null}</div>
+        <div className="stakepool-fee-icon" data-tip="Ticket Fee">{ticketFee} DCR/KB</div>
+        <div className="stakepool-fee-icon" data-tip="Tx Fee">{txFee} DCR/KB</div>
+        <div className="stakepool-expiry-icon" data-tip="Expiry">{expiry} Blocks</div>
+        <div className="stakepool-ticket-address-icon" data-tip="Ticket Address">{stakePool ? addSpacingAroundText(stakePool.value.TicketAddress) : null}</div>
+        <div className="stakepool-fee-address-icon" data-tip="Pool Address">{stakePool ? addSpacingAroundText(stakePool.value.PoolAddress) : null}</div>
+        <div className="stakepool-pool-fee-icon" data-tip="Pool Fee">{stakePool ? stakePool.value.PoolFees : null}%</div>
       </div>
     </div>
-    <div style={StakePoolStyles.purchaseTicketButtonsArea}>
+    <div className="stakepool-purchase-ticket-buttons-area">
       <KeyBlueButton
-        style={StakePoolStyles.contentPurchaseButton}
+        className="stakepool-content-purchase-button"
         disabled={!canAffordTickets}
         onClick={onRequestPassphrase}
       >Purchase</KeyBlueButton>
@@ -219,11 +219,11 @@ const PurchaseTicketsForm = ({
       )}
 
       <KeyBlueButton
-        style={StakePoolStyles.contentImportScriptButton}
+        className="stakepool-content-import-script-button"
         onClick={onShowImportScript}
       >Import Script</KeyBlueButton>
       <KeyBlueButton
-        style={StakePoolStyles.contentRevokeButton}
+        className="stakepool-content-revoke-button"
         onClick={onShowRevokeTicket}
       >Revoke</KeyBlueButton>
     </div>
diff --git a/app/components/SideBar/Bar.js b/app/components/SideBar/Bar.js
index cc06cc124d..7f229222dd 100644
--- a/app/components/SideBar/Bar.js
+++ b/app/components/SideBar/Bar.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import MenuLink from "../MenuLink";
-import "../fonts.css";
+import "../../style/Fonts.less";
 import "../../style/SideBar.less";
 
 const Bar = ({
diff --git a/app/components/StakeInfo/Display.js b/app/components/StakeInfo/Display.js
index a203e10e7a..e4ba02f7db 100644
--- a/app/components/StakeInfo/Display.js
+++ b/app/components/StakeInfo/Display.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 import TicketsCogs from "../TicketsCogs";
 
 const StakeInfoDisplay = ({
@@ -16,15 +16,15 @@ const StakeInfoDisplay = ({
   onHideStakeInfo,
   onShowStakeInfo
 }) => isShowingDetails ? (
-  <div style={StakePoolStyles.stakeInfoArea}>
-    <div style={StakePoolStyles.stakeInfoRow}>
-      <div style={StakePoolStyles.stakeInfoRowLeft}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Poolsize:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{ticketPoolSize}</div>
+  <div className="stakepool-stake-info-area">
+    <div className="stakepool-stake-info-row">
+      <div className="stakepool-stake-info-row-left">
+        <div className="stakepool-stake-info-label">Poolsize:</div>
+        <div className="stakepool-stake-info-value">{ticketPoolSize}</div>
       </div>
-      <div style={StakePoolStyles.stakeInfoRowRight}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Voted Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{votedTicketsCount}</div>
+      <div className="stakepool-stake-info-row-right">
+        <div className="stakepool-stake-info-label">Voted Tickets:</div>
+        <div className="stakepool-stake-info-value">{votedTicketsCount}</div>
         <TicketsCogs
           opened={!isShowingDetails}
           style={{paddingTop: "2px"}}
@@ -32,56 +32,56 @@ const StakeInfoDisplay = ({
         />
       </div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRow}>
-      <div style={StakePoolStyles.stakeInfoRowLeft}>
-        <div style={StakePoolStyles.stakeInfoLabel}>All Mempool Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{allMempoolTicketsCount}</div>
+    <div className="stakepool-stake-info-row">
+      <div className="stakepool-stake-info-row-left">
+        <div className="stakepool-stake-info-label">All Mempool Tickets:</div>
+        <div className="stakepool-stake-info-value">{allMempoolTicketsCount}</div>
       </div>
-      <div style={StakePoolStyles.stakeInfoRowRight}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Missed Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{missedTicketsCount}</div>
+      <div className="stakepool-stake-info-row-right">
+        <div className="stakepool-stake-info-label">Missed Tickets:</div>
+        <div className="stakepool-stake-info-value">{missedTicketsCount}</div>
       </div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRow}>
-      <div style={StakePoolStyles.stakeInfoRowLeft}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Own Mempool Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{ownMempoolTicketsCount}</div>
+    <div className="stakepool-stake-info-row">
+      <div className="stakepool-stake-info-row-left">
+        <div className="stakepool-stake-info-label">Own Mempool Tickets:</div>
+        <div className="stakepool-stake-info-value">{ownMempoolTicketsCount}</div>
       </div>
-      <div style={StakePoolStyles.stakeInfoRowRight}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Revoked Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{revokedTicketsCount}</div>
+      <div className="stakepool-stake-info-row-right">
+        <div className="stakepool-stake-info-label">Revoked Tickets:</div>
+        <div className="stakepool-stake-info-value">{revokedTicketsCount}</div>
       </div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRow}>
-      <div style={StakePoolStyles.stakeInfoRowLeft}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Immature Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{immatureTicketsCount}</div>
+    <div className="stakepool-stake-info-row">
+      <div className="stakepool-stake-info-row-left">
+        <div className="stakepool-stake-info-label">Immature Tickets:</div>
+        <div className="stakepool-stake-info-value">{immatureTicketsCount}</div>
       </div>
-      <div style={StakePoolStyles.stakeInfoRowRight}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Expired Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{expiredTicketsCount}</div>
+      <div className="stakepool-stake-info-row-right">
+        <div className="stakepool-stake-info-label">Expired Tickets:</div>
+        <div className="stakepool-stake-info-value">{expiredTicketsCount}</div>
       </div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRow}>
-      <div style={StakePoolStyles.stakeInfoRowLeft}>
-        <div style={StakePoolStyles.stakeInfoLabel}>Live Tickets:</div>
-        <div style={StakePoolStyles.stakeInfoValue}>{liveTicketsCount}</div>
+    <div className="stakepool-stake-info-row">
+      <div className="stakepool-stake-info-row-left">
+        <div className="stakepool-stake-info-label">Live Tickets:</div>
+        <div className="stakepool-stake-info-value">{liveTicketsCount}</div>
       </div>
     </div>
   </div>
 ) : (
-  <div style={StakePoolStyles.stakeInfoAreaSmall}>
-    <div style={StakePoolStyles.stakeInfoRowSmall}>
-      <div style={StakePoolStyles.stakeInfoLabel}>Own Mempool Tickets:</div>
-      <div style={StakePoolStyles.stakeInfoValue}>{ownMempoolTicketsCount}</div>
+  <div className="stakepool-stake-info-area-small">
+    <div className="stakepool-stake-info-row-small">
+      <div className="stakepool-stake-info-label">Own Mempool Tickets:</div>
+      <div className="stakepool-stake-info-value">{ownMempoolTicketsCount}</div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRowSmall}>
-      <div style={StakePoolStyles.stakeInfoLabel}>Immature Tickets:</div>
-      <div style={StakePoolStyles.stakeInfoValue}>{immatureTicketsCount}</div>
+    <div className="stakepool-stake-info-row-small">
+      <div className="stakepool-stake-info-label">Immature Tickets:</div>
+      <div className="stakepool-stake-info-value">{immatureTicketsCount}</div>
     </div>
-    <div style={StakePoolStyles.stakeInfoRowSmallRight}>
-      <div style={StakePoolStyles.stakeInfoLabel}>Live Tickets:</div>
-      <div style={StakePoolStyles.stakeInfoValue}>{liveTicketsCount}</div>
+    <div className="stakepool-stake-info-row-small-right">
+      <div className="stakepool-stake-info-label">Live Tickets:</div>
+      <div className="stakepool-stake-info-value">{liveTicketsCount}</div>
       <TicketsCogs
         opened={!isShowingDetails}
         style={{paddingTop: "2px"}}
diff --git a/app/components/StakePools/AddForm.js b/app/components/StakePools/AddForm.js
index 5a24bab2dd..e23a3fa24c 100644
--- a/app/components/StakePools/AddForm.js
+++ b/app/components/StakePools/AddForm.js
@@ -3,7 +3,7 @@ import { shell } from "electron";
 import PassphraseModal from "../PassphraseModal";
 import KeyBlueButton from "../KeyBlueButton";
 import SlateGrayButton from "../SlateGrayButton";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 
 const StakePoolsAddForm = ({
   selectedUnconfigured,
@@ -25,39 +25,39 @@ const StakePoolsAddForm = ({
       cancelPassphrase={onCancelPassphraseRequest}
       heading={"Enter private passphrase to connect to your stakepool"}
     />
-    <div style={!this.state.passphraseModalOpen ? StakePoolStyles.content : StakePoolStyles.contentBlur}>
-      <div style={StakePoolStyles.flexHeight}>
-        <div style={StakePoolStyles.contentNestFromAddress}>
-          <div style={StakePoolStyles.contentNestPrefixSend}>Stake Pool:</div>
-          <div style={StakePoolStyles.stakePoolUnconfiguredSelect}>
+    <div className={!this.state.passphraseModalOpen ? "stakepool-content" : "stakepool-contentBlur"}>
+      <div className="stakepool-flex-height">
+        <div className="stakepool-content-nest-from-address">
+          <div className="stakepool-content-nest-prefix-send">Stake Pool:</div>
+          <div className="stakepool-unconfigured-select">
             <SelectStakePool
               options={unconfiguredStakePools}
               value={selectedUnconfigured}
               onChange={onChangeSelectedUnconfigured}
             />
           </div>
-          <div style={StakePoolStyles.contentNestFromAddressWalletIcon}></div>
+          <div className="stakepool-content-nest-from-address-wallet-icon"></div>
         </div>
-        <div style={StakePoolStyles.contentNestApiKeyInstructions}>
+        <div className="stakepool-content-nest-api-key-instructions">
           <span>
             Please select your desired stakepool from the above dropdown and follow these instructions:
-            <br/>1) Create an account or login to your existing account at <a style={StakePoolStyles.stakepoolLink} onClick={function(x){shell.openExternal(x);}.bind(null, selectedUnconfigured.label)}>{selectedUnconfigured.label}</a>.
+            <br/>1) Create an account or login to your existing account at <a className="stakepool-link" onClick={function(x){shell.openExternal(x);}.bind(null, selectedUnconfigured.label)}>{selectedUnconfigured.label}</a>.
             <br/>2) Once logged in, select the 'Settings' tab.
             <br/>3) Copy and paste your Api Key into the field below (typically starts with 'eyJhb...').
             <br/>4) Click Add and enter your private passphrase.
             <br/>
             <br/>
-            <span style={StakePoolStyles.highlighTextOrange}>Notice!</span> If you receive an error about the script not being redeemable when attempting to add your stakepool, you can try the following:
+            <span className="stakepool-highligh-text-orange">Notice!</span> If you receive an error about the script not being redeemable when attempting to add your stakepool, you can try the following:
             <br/> - Each stakepool account you create can only be associated with 1 wallet.  If you have previously created this stakepool account with a different wallet (different seed), then you must create a new account.
             <br/> - If you had previously used a 'voting account', for your ticket purchases, please go to the Accounts page and create a new account.  This may now allow you to successfully import your script for your stakepool.
           </span>
         </div>
-        <div style={StakePoolStyles.contentNestToAddress}>
-          <div style={StakePoolStyles.contentNestApiKey}>
-            <div style={StakePoolStyles.inputForm}>
+        <div className="stakepool-content-nest-to-address">
+          <div className="stakepool-content-nest-api-key">
+            <div className="stakepool-input-form">
               <input
                 type="text"
-                style={StakePoolStyles.contentNestAddressAmountSum}
+                className="stakepool-content-nest-address-amount-sum"
                 placeholder="API Key"
                 value={apiKey}
                 onChange={e => onChangeApiKey(e.target.value)}
@@ -65,16 +65,16 @@ const StakePoolsAddForm = ({
             </div>
           </div>
           {apiKey ? null : (
-            <div style={StakePoolStyles.apiKeyError}>{"*Please enter your API key"}</div>
+            <div className="stakepool-api-key-error">{"*Please enter your API key"}</div>
           )}
         </div>
       </div>
-      <KeyBlueButton style={StakePoolStyles.contentSend} disabled={!apiKey} onClick={onSaveStakePool}>
+      <KeyBlueButton className="stakepool-content-send" disabled={!apiKey} onClick={onSaveStakePool}>
         Add
       </KeyBlueButton>
       {configuredStakePools.length ? (
         <SlateGrayButton
-          style={StakePoolStyles.hideStakePoolConfig}
+          className="stakepool-hide-config"
           onClick={onCancelAddStakePool}
         >Cancel</SlateGrayButton>
       ) : null}
diff --git a/app/components/StakePools/List.js b/app/components/StakePools/List.js
index e19b9de9cb..7e93816d4f 100644
--- a/app/components/StakePools/List.js
+++ b/app/components/StakePools/List.js
@@ -1,7 +1,7 @@
 import React from "react";
 import KeyBlueButton from "../KeyBlueButton";
 import SlateGrayButton from "../SlateGrayButton";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 
 const StakePoolsList = ({
   configuredStakePools,
@@ -9,43 +9,43 @@ const StakePoolsList = ({
   onShowAddStakePool,
   onHideStakePoolConfig
 }) => (
-  <div style={StakePoolStyles.content}>
-    <div style={StakePoolStyles.flexHeight}>
-      <div style={StakePoolStyles.contentNestFromAddress}>
-        <div style={StakePoolStyles.contentNestPrefixConfigured}>Configured stake pools:</div>
+  <div className="stakepool-content">
+    <div className="stakepool-flex-height">
+      <div className="stakepool-content-nest-from-address">
+        <div className="stakepool-content-nest-prefix-configured">Configured stake pools:</div>
       </div>
       <div id="dynamicInput">
         {configuredStakePools.map(({
           value: { Host, TicketAddress, PoolFees, Script }}
         ) => (
-          <div key={Host} style={StakePoolStyles.contentNestStakePool}>
-            <div style={StakePoolStyles.contentNestStakePoolSettings}>
-              <div style={StakePoolStyles.contentNestPrefixStakePoolSettings}>URL:</div>
-              <div style={StakePoolStyles.contentNestContentStakePoolSettings}>{Host}</div>
+          <div key={Host} className="stakepool-content-nest-stake-pool">
+            <div className="stakepool-content-nest-settings">
+              <div className="stakepool-content-nest-prefix-settings">URL:</div>
+              <div className="stakepool-content-nest-content-settings">{Host}</div>
             </div>
-            <div style={StakePoolStyles.contentNestStakePoolSettings}>
-              <div style={StakePoolStyles.contentNestPrefixStakePoolSettings}>Ticket Address:</div>
-              <div style={StakePoolStyles.contentNestContentStakePoolSettings}>{TicketAddress}</div>
+            <div className="stakepool-content-nest-settings">
+              <div className="stakepool-content-nest-prefix-settings">Ticket Address:</div>
+              <div className="stakepool-content-nest-content-settings">{TicketAddress}</div>
             </div>
-            <div style={StakePoolStyles.contentNestStakePoolSettings}>
-              <div style={StakePoolStyles.contentNestPrefixStakePoolSettings}>Script:</div>
-              <textarea disabled value={Script} style={StakePoolStyles.contentNestContentStakePoolSettings}/>
+            <div className="stakepool-content-nest-settings">
+              <div className="stakepool-content-nest-prefix-settings">Script:</div>
+              <textarea disabled value={Script} className="stakepool-content-nest-content-settings"/>
             </div>
-            <div style={StakePoolStyles.contentNestStakePoolSettingsBottom}>
-              <div style={StakePoolStyles.contentNestPrefixStakePoolSettings}>Pool Fees:</div>
-              <div style={StakePoolStyles.contentNestContentStakePoolSettings}>{PoolFees}</div>
+            <div className="stakepool-content-nest-settings-bottom">
+              <div className="stakepool-content-nest-prefix-settings">Pool Fees:</div>
+              <div className="stakepool-content-nest-content-settings">{PoolFees}</div>
             </div>
           </div>
         ))}
       </div>
     </div>
     {unconfiguredStakePools.length > 0 ? (
-      <KeyBlueButton style={StakePoolStyles.contentSend} onClick={onShowAddStakePool}>
+      <KeyBlueButton className="stakepool-content-send" onClick={onShowAddStakePool}>
         Add stakepool
       </KeyBlueButton>
     ) : null}
     <SlateGrayButton
-      style={StakePoolStyles.hideStakePoolConfig}
+      className="stakepool-hide-config"
       onClick={onHideStakePoolConfig}
     >Cancel</SlateGrayButton>
   </div>
diff --git a/app/components/TicketAutoBuyer/Form.js b/app/components/TicketAutoBuyer/Form.js
index 1329b53614..626aabed1a 100644
--- a/app/components/TicketAutoBuyer/Form.js
+++ b/app/components/TicketAutoBuyer/Form.js
@@ -2,7 +2,7 @@ import React from "react";
 import TicketsCogs from "../TicketsCogs";
 import AutoBuyerSwitch from "../AutoBuyerSwitch";
 import KeyBlueButton from "../KeyBlueButton";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 
 const TicketAutoBuyerForm = ({
   isHidingDetails,
@@ -29,37 +29,37 @@ const TicketAutoBuyerForm = ({
   onToggleShowDetails
 }) => (
   <div>
-    <div style={StakePoolStyles.votingTitleArea}>
-      <div style={StakePoolStyles.votingTitleAreaName}>Automatic Purchase</div>
+    <div className="stakepool-voting-title-area">
+      <div className="stakepool-voting-title-area-name">Automatic Purchase</div>
     </div>
-    <div style={isHidingDetails ? StakePoolStyles.flexHeightAutoBuyerHidden : StakePoolStyles.flexHeightAutoBuyerShown }>
-      <div style={StakePoolStyles.autoBuyerRow}>
+    <div className={isHidingDetails ? "stakepool-flex-height-auto-buyer-hidden" : "stakepool-flex-height-auto-buyer-shown" }>
+      <div className="stakepool-auto-buyer-row">
         <AutoBuyerSwitch enabled={isTicketAutoBuyerEnabled} onClick={onToggleTicketAutoBuyer} />
-        <div style={StakePoolStyles.autoBuyerLabel}>{isTicketAutoBuyerEnabled ? "Enabled" : "Disabled"}</div>
-        <div style={StakePoolStyles.autoBuyerQuickBarRow}>
+        <div className="stakepool-auto-buyer-label">{isTicketAutoBuyerEnabled ? "Enabled" : "Disabled"}</div>
+        <div className="stakepool-auto-buyer-quick-bar-row">
           {isHidingDetails ? (
             <div>
-              <div style={StakePoolStyles.autoBuyerIconAreas} data-tip="Balance To Maintain"><div style={StakePoolStyles.balanceToMaintainIcon}/>{balanceToMaintain}</div>
-              <div style={StakePoolStyles.autoBuyerIconAreas} data-tip="Max Fee"><div style={StakePoolStyles.maxFeeIcon}/>{maxFee} DCR</div>
-              <div style={StakePoolStyles.autoBuyerIconAreas} data-tip="Max Price Absolute"><div style={StakePoolStyles.maxPriceAbsoluteIcon}/>{maxPriceAbsolute} DCR</div>
-              <div style={StakePoolStyles.autoBuyerIconAreas} data-tip="Max Price Relative"><div style={StakePoolStyles.maxPriceRelativeIcon}/>{maxPriceRelative}%</div>
-              <div style={StakePoolStyles.autoBuyerIconAreas} data-tip="Max Per Block"><div style={StakePoolStyles.maxPerBlockIcon}/>{maxPerBlock}</div>
+              <div className="stakepool-auto-buyer-icon-areas" data-tip="Balance To Maintain"><div className="stakepool-balance-to-maintain-icon"/>{balanceToMaintain}</div>
+              <div className="stakepool-auto-buyer-icon-areas" data-tip="Max Fee"><div className="stakepool-max-fee-icon"/>{maxFee} DCR</div>
+              <div className="stakepool-auto-buyer-icon-areas" data-tip="Max Price Absolute"><div className="stakepool-max-price-absolute-icon"/>{maxPriceAbsolute} DCR</div>
+              <div className="stakepool-auto-buyer-icon-areas" data-tip="Max Price Relative"><div className="stakepool-max-price-relative-icon"/>{maxPriceRelative}%</div>
+              <div className="stakepool-auto-buyer-icon-areas" data-tip="Max Per Block"><div className="stakepool-max-per-block-icon"/>{maxPerBlock}</div>
             </div>
           ) : null}
         </div>
-        <div style={StakePoolStyles.autoBuyerShowAdvancedArea}>
+        <div className="stakepool-auto-buyer-show-advanced-area">
           <TicketsCogs opened={isHidingDetails} onClick={onToggleShowDetails} />
         </div>
       </div>
       <div hidden={isHidingDetails ? true : false}>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketRowLeft}>
-            <div style={StakePoolStyles.autoBuyerIconAreasExpand}><div style={StakePoolStyles.balanceToMaintainIcon}/>Balance to maintain:</div>
-            <div style={StakePoolStyles.purchaseTicketNumInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-row-left">
+            <div className="stakepool-auto-buyer-icon-areas-expand"><div className="stakepool-balance-to-maintain-icon"/>Balance to maintain:</div>
+            <div className="stakepool-purchase-ticket-num-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Balance to Maintain"
                   value={balanceToMaintain}
                   onChange={e => onChangeBalanceToMaintain(e.target.value)}
@@ -67,16 +67,16 @@ const TicketAutoBuyerForm = ({
               </div>
             </div>
             {balanceToMaintainError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{balanceToMaintainError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{balanceToMaintainError}</div>
             ) : null}
           </div>
-          <div style={StakePoolStyles.purchaseTicketRowRight}>
-            <div style={StakePoolStyles.autoBuyerIconAreasExpand}><div style={StakePoolStyles.maxFeeIcon}/>Max Fee:</div>
-            <div style={StakePoolStyles.purchaseTicketNumInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+          <div className="stakepool-purchase-ticket-row-right">
+            <div className="stakepool-auto-buyer-icon-areas-expand"><div className="stakepool-max-fee-icon"/>Max Fee:</div>
+            <div className="stakepool-purchase-ticket-num-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Max Fee"
                   value={maxFee}
                   onChange={e => onChangeMaxFee(e.target.value)}
@@ -84,18 +84,18 @@ const TicketAutoBuyerForm = ({
               </div>
             </div>
             {maxFeeError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{maxFeeError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{maxFeeError}</div>
             ) : null}
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.purchaseTicketRowLeft}>
-            <div style={StakePoolStyles.autoBuyerIconAreasExpand}><div style={StakePoolStyles.maxPriceAbsoluteIcon}/>Max Price Absolute:</div>
-            <div style={StakePoolStyles.purchaseTicketNumInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-purchase-ticket-row-left">
+            <div className="stakepool-auto-buyer-icon-areas-expand"><div className="stakepool-max-price-absolute-icon"/>Max Price Absolute:</div>
+            <div className="stakepool-purchase-ticket-num-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Max Price Absolute"
                   value={maxPriceAbsolute}
                   onChange={e => onChangeMaxPriceAbsolute(e.target.value)}
@@ -103,16 +103,16 @@ const TicketAutoBuyerForm = ({
               </div>
             </div>
             {maxPriceAbsoluteError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{maxPriceAbsoluteError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{maxPriceAbsoluteError}</div>
             ) : null}
           </div>
-          <div style={StakePoolStyles.purchaseTicketRowRight}>
-            <div style={StakePoolStyles.autoBuyerIconAreasExpand}><div style={StakePoolStyles.maxPriceRelativeIcon}/>Max Price Relative:</div>
-            <div style={StakePoolStyles.purchaseTicketNumInput}>
-              <div style={StakePoolStyles.inputFormPurchaseTicket}>
+          <div className="stakepool-purchase-ticket-row-right">
+            <div className="stakepool-auto-buyer-icon-areas-expand"><div className="stakepool-max-price-relative-icon"/>Max Price Relative:</div>
+            <div className="stakepool-purchase-ticket-num-input">
+              <div className="stakepool-input-form-purchase-ticket">
                 <input
                   type="text"
-                  style={StakePoolStyles.contentNestPurchaseTicketForm}
+                  className="stakepool-content-nest-purchase-ticket-form"
                   placeholder="Max Price Relative"
                   value={maxPriceRelative}
                   onChange={e => onChangeMaxPriceRelative(e.target.value)}
@@ -120,17 +120,17 @@ const TicketAutoBuyerForm = ({
               </div>
             </div>
             {maxPriceRelativeError ? (
-              <div style={StakePoolStyles.purchaseTicketInputError}>{maxPriceRelativeError}</div>
+              <div className="stakepool-purchase-ticket-input-error">{maxPriceRelativeError}</div>
             ) : null}
           </div>
         </div>
-        <div style={StakePoolStyles.purchaseTicketRow}>
-          <div style={StakePoolStyles.autoBuyerIconAreasExpand}><div style={StakePoolStyles.maxPerBlockIcon}/>Max Per Block:</div>
-          <div style={StakePoolStyles.purchaseTicketNumInput}>
-            <div style={StakePoolStyles.inputFormPurchaseTicket}>
+        <div className="stakepool-purchase-ticket-row">
+          <div className="stakepool-auto-buyer-icon-areas-expand"><div className="stakepool-max-per-block-icon"/>Max Per Block:</div>
+          <div className="stakepool-purchase-ticket-num-input">
+            <div className="stakepool-input-form-purchase-ticket">
               <input
                 type="text"
-                style={StakePoolStyles.contentNestPurchaseTicketForm}
+                className="stakepool-content-nest-purchase-ticket-form"
                 placeholder="Max Per Block"
                 value={maxPerBlock}
                 onChange={e => onChangeMaxPerBlock(e.target.value)}
@@ -138,12 +138,12 @@ const TicketAutoBuyerForm = ({
             </div>
           </div>
           {maxPerBlockError ? (
-            <div style={StakePoolStyles.purchaseTicketInputError}>{maxPerBlockError}</div>
+            <div className="stakepool-purchase-ticket-input-error">{maxPerBlockError}</div>
           ) : null}
         </div>
         <div hidden={!getTicketBuyerConfigResponse}>
           <KeyBlueButton
-            style={StakePoolStyles.contentPurchaseButton}
+            className="stakepool-content-purchase-button"
             disabled={!isTicketAutoBuyerConfigDirty}
             onClick={onUpdateTicketAutoBuyerConfig}
           >Update Config</KeyBlueButton>
diff --git a/app/components/TxHistory.js b/app/components/TxHistory.js
index 0a27c0ac2b..0e510ce693 100644
--- a/app/components/TxHistory.js
+++ b/app/components/TxHistory.js
@@ -1,7 +1,7 @@
 import React from "react";
 import TxHistoryRow from "./TxHistoryRow";
 import dateFormat from "dateformat";
-import "./fonts.css";
+import "../style/Fonts.less";
 
 const TxHistory = ({ mined=[], unmined=[], showTxDetail }) => (
   <div>
diff --git a/app/components/TxHistoryRow/index.js b/app/components/TxHistoryRow/index.js
index 8caf6c84fe..84e60328c4 100644
--- a/app/components/TxHistoryRow/index.js
+++ b/app/components/TxHistoryRow/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import Radium from "radium";
 import TicketPurchase from "./TicketPurchase";
 import Vote from "./Vote";
 import Revocation from "./Revocation";
@@ -39,4 +38,4 @@ const TxRow = ({
   ) : null;
 };
 
-export default Radium(TxRow);
+export default TxRow;
diff --git a/app/components/VotingPrefs/Page.js b/app/components/VotingPrefs/Page.js
index 006c8259d9..fa934120a4 100644
--- a/app/components/VotingPrefs/Page.js
+++ b/app/components/VotingPrefs/Page.js
@@ -2,7 +2,7 @@ import React from "react";
 import AgendaCard from "../AgendaCard";
 import AgendaOverview from "../AgendaOverview";
 import SelectStakePool from "../SelectStakePool";
-import { StakePoolStyles } from "../views/ViewStyles";
+import "../../style/StakePool.less";
 
 const VotingPrefsPage = ({
   agendas,
@@ -15,10 +15,10 @@ const VotingPrefsPage = ({
   onCloseAgenda,
   onUpdateVotePreference
 }) => (
-  <div style={StakePoolStyles.contentVotingGui}>
-    <div style={StakePoolStyles.votingTitleArea}>
-      <div style={StakePoolStyles.votingTitleAreaName}>Voting Preferences</div>
-      <div style={StakePoolStyles.stakePoolUnconfiguredSelect}>
+  <div className="stakepool-content-voting-gui">
+    <div className="stakepool-voting-title-area">
+      <div className="stakepool-voting-title-area-name">Voting Preferences</div>
+      <div className="stakepool-unconfigured-select">
         <SelectStakePool
           options={configuredStakePools}
           value={stakePool}
@@ -27,7 +27,7 @@ const VotingPrefsPage = ({
       </div>
     </div>
     {(stakePool && stakePool.isVersionValid) ? (
-      <div style={StakePoolStyles.votingAgendaArea}>
+      <div className="stakepool-voting-agenda-area">
         {(selectedAgenda && stakePool) ? (
           <AgendaOverview
             agenda={selectedAgenda}
@@ -48,12 +48,12 @@ const VotingPrefsPage = ({
             ) : null
           )
         ) : (
-          <div style={StakePoolStyles.noAgendasMessage}>There are currently no agendas for voting.</div>
+          <div className="stakepool-no-agendas-message">There are currently no agendas for voting.</div>
         )}
       </div>
     ) : (
-      <div style={StakePoolStyles.votingAgendaArea}>
-        <div style={StakePoolStyles.noAgendasMessage}>This pool is not configured for vote choices.</div>
+      <div className="stakepool-voting-agenda-area">
+        <div className="stakepool-no-agendas-message">This pool is not configured for vote choices.</div>
       </div>
     )}
   </div>
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/Row.js b/app/components/views/AccountsPage/Accounts/AccountRow/Row.js
index 2685fe84d7..32127a4d9a 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/Row.js
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/Row.js
@@ -4,7 +4,7 @@ import SlateGrayButton from "../../../../SlateGrayButton";
 import KeyBlueButton from "../../../../KeyBlueButton";
 import Balance from "../../../../Balance";
 import ReactToolTip from "react-tooltip";
-import "../../../../fonts.css";
+import "../../../../../style/Fonts.less";
 import "../../../../../style/AccountRow.less";
 
 const Row = ({
diff --git a/app/components/views/Help.js b/app/components/views/Help.js
index 87aac00640..d01423a8a5 100644
--- a/app/components/views/Help.js
+++ b/app/components/views/Help.js
@@ -3,16 +3,16 @@ import React, {Component} from "react";
 import SideBar from "../SideBar";
 import Header from "../Header";
 import HelpLink from "../HelpLink";
-import { HelpStyles } from "./ViewStyles";
+import "../../style/Help.less";
 
 class Help extends Component{
   render() {
     const helpView = (
-      <div style={HelpStyles.view}>
+      <div className="help-view">
         <Header
           headerTitleOverview="Help"
         />
-        <div style={HelpStyles.content}>
+        <div className="help-content">
             <HelpLink href="https://forum.decred.org">Forum</HelpLink>
             <HelpLink href="https://decred.slack.com">Chat</HelpLink>
             <HelpLink href="https://docs.decred.org/">Documentation</HelpLink>
@@ -23,7 +23,7 @@ class Help extends Component{
     );
 
     return(
-      <div style={HelpStyles.body}>
+      <div className="help-body">
         <SideBar />
         {helpView}
       </div>);
diff --git a/app/components/views/HomePage/Page.js b/app/components/views/HomePage/Page.js
index c0197b3721..6e23ec4529 100644
--- a/app/components/views/HomePage/Page.js
+++ b/app/components/views/HomePage/Page.js
@@ -10,7 +10,7 @@ import Balance from "../../Balance";
 import SideBar from "../../SideBar";
 import TxHistory from "../../TxHistory";
 import Header from "../../Header";
-import "../../fonts.css";
+import "../../../style/Fonts.less";
 import "../../../style/HomePage.less";
 
 const HomePage = ({
diff --git a/app/components/views/SettingsPage/Page.js b/app/components/views/SettingsPage/Page.js
index eb33e5619b..0a8dbb6275 100644
--- a/app/components/views/SettingsPage/Page.js
+++ b/app/components/views/SettingsPage/Page.js
@@ -1,9 +1,11 @@
+
 import React from "react";
 import KeyBlueButton from "../../KeyBlueButton";
 import SideBar from "../../SideBar";
 import Header from "../../Header";
 import ChangePassphraseModal from "../../ChangePassphraseModal";
-import { SettingStyles, StakePoolStyles } from "../ViewStyles";
+import "../../../style/StakePool.less";
+import "../../../style/Settings.less";
 
 const SettingsPage = ({
   changePassphraseError,
@@ -20,24 +22,24 @@ const SettingsPage = ({
   onClearChangePassphraseSuccess,
   onClearChangePassphraseError
 }) => (
-  <div style={SettingStyles.body}>
+  <div className="settings-body">
     <SideBar />
-    <div style={SettingStyles.view}>
+    <div className="settings-view">
       <Header
         headerTop={[
           changePassphraseError ? (
-            <div key="updateStakePoolError" style={StakePoolStyles.viewNotificationError}>
+            <div key="updateStakePoolError" className="stakepool-view-notification-error">
               <div
-                style={StakePoolStyles.contentNestAddressDeleteIcon}
+                className="stakepool-content-nest-address-delete-icon"
                 onClick={onClearChangePassphraseError}
               />
               {changePassphraseError}
             </div>
           ) : null,
           changePassphraseSuccess ? (
-            <div key="configSuccess"  style={StakePoolStyles.viewNotificationSuccess}>
+            <div key="configSuccess"  className="stakepool-view-notification-success">
               <div
-                style={StakePoolStyles.contentNestAddressDeleteIcon}
+                className="stakepool-content-nest-address-delete-icon"
                 onClick={onClearChangePassphraseSuccess}
               />
               {changePassphraseSuccess}
@@ -51,38 +53,38 @@ const SettingsPage = ({
           updatePassphrase={onAttemptChangePassphrase}
           cancelPassphrase={onCancelChangePassphrase}
         />
-        <div style={isShowingChangePassphrase ? SettingStyles.contentBlur : SettingStyles.content}>
-          <div style={SettingStyles.settingsRow}>
-            <div style={SettingStyles.settingsLabel}>
+        <div className={isShowingChangePassphrase ? "settings-content-blur" : "settings-content"}>
+          <div className="settings-row">
+            <div className="settings-label">
               Displayed Units
             </div>
-            <div style={SettingStyles.settingsInput}>
+            <div className="settings-input">
               <select
-                style={SettingStyles.settingsInputSelect}
+                className="settings-input-select"
                 value={tempSettings.currencyDisplay}
                 onChange={(e) => onChangeCurrencyDisplay(e.target.value)}
               >
-                <option style={SettingStyles.settingsInputSelectOption} value="DCR">DCR</option>
-                <option style={SettingStyles.settingsInputSelectOption} value="atoms">atoms</option>
+                <option className="settings-input-select-option" value="DCR">DCR</option>
+                <option className="settings-input-select-option" value="atoms">atoms</option>
               </select>
             </div>
           </div>
-          <div style={SettingStyles.settingsRow}>
-            <div style={SettingStyles.settingsLabel}>
-              Network <span style={SettingStyles.restart}>(requires restart!)</span>
+          <div className="settings-row">
+            <div className="settings-label">
+              Network <span className="settings-restart">(requires restart!)</span>
             </div>
-            <div style={SettingStyles.settingsInput}>
+            <div className="settings-input">
               <select
-                style={SettingStyles.settingsInputSelect}
+                className="settings-input-select"
                 value={tempSettings.network}
                 onChange={(e) => onChangeNetwork(e.target.value)}
               >
-                <option style={SettingStyles.settingsInputSelectOption} value="mainnet">mainnet</option>
-                <option style={SettingStyles.settingsInputSelectOption} value="testnet">testnet</option>
+                <option className="settings-input-select-option" value="mainnet">mainnet</option>
+                <option className="settings-input-select-option" value="testnet">testnet</option>
               </select>
             </div>
           </div>
-          <div style={SettingStyles.settingsSaveButton}>
+          <div className="settings-save-button">
             <KeyBlueButton
               disabled={!areSettingsDirty}
               size="large"
@@ -91,7 +93,7 @@ const SettingsPage = ({
               Save Settings
             </KeyBlueButton>
           </div>
-          <div style={SettingStyles.settingsSaveButton}>
+          <div className="settings-save-button">
               <KeyBlueButton
                 onClick={onShowChangePassphrase}>
                 Update Private Passphrase
diff --git a/app/components/views/TicketsPage/Header.js b/app/components/views/TicketsPage/Header.js
index 1441dfecf8..7a9dbd0606 100644
--- a/app/components/views/TicketsPage/Header.js
+++ b/app/components/views/TicketsPage/Header.js
@@ -2,7 +2,7 @@ import React from "react";
 import Header from "../../Header";
 import Balance from "../../Balance";
 import TextToggle from "../../TextToggle";
-import { StakePoolStyles } from "../ViewStyles";
+import "../../../style/StakePool.less";
 import ticketsPage from "../../../connectors/ticketsPage";
 
 const TicketsPageHeader = ({
@@ -38,74 +38,74 @@ const TicketsPageHeader = ({
   <Header
     headerTop={[
       currentStakePoolConfigError ? (
-        <div key="updateStakePoolError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStakePoolConfigError}/>
+        <div key="updateStakePoolError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStakePoolConfigError}/>
           {currentStakePoolConfigError}
         </div>
       ) : null,
       currentStakePoolConfigSuccessMessage ? (
-        <div key="configSuccess"  style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStakePoolConfigSuccess}/>
+        <div key="configSuccess"  className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStakePoolConfigSuccess}/>
           {currentStakePoolConfigSuccessMessage}
         </div>
       ) : null,
       purchaseTicketsError ? (
-        <div key="purchaseTicketsError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearPurchaseTicketsError}/>
+        <div key="purchaseTicketsError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearPurchaseTicketsError}/>
           {purchaseTicketsError}
         </div>
       ) : null,
       purchaseTicketsSuccess ? (
-        <div key="purchaseTicketsSuccess" style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearPurchaseTicketsSuccess}/>
+        <div key="purchaseTicketsSuccess" className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearPurchaseTicketsSuccess}/>
           {purchaseTicketsSuccess}
         </div>
       ) : null,
       revokeTicketsError ? (
-        <div key="revokeTicketsError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearRevokeTicketsError}/>
+        <div key="revokeTicketsError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearRevokeTicketsError}/>
           {revokeTicketsError}
         </div>
       ) : null,
       revokeTicketsSuccess ? (
-        <div key="revokeTicketsSuccess" style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearRevokeTicketsSuccess}/>
+        <div key="revokeTicketsSuccess" className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearRevokeTicketsSuccess}/>
           {revokeTicketsSuccess}
         </div>
       ) : null,
       startAutoBuyerSuccess ? (
-        <div key="startAutoBuyerSuccess" style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStartAutoBuyerSuccess}/>
+        <div key="startAutoBuyerSuccess" className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStartAutoBuyerSuccess}/>
           {startAutoBuyerSuccess}
         </div>
       ) : null,
       stopAutoBuyerSuccess ? (
-        <div key="stopAutoBuyerSuccess" style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStopAutoBuyerSuccess}/>
+        <div key="stopAutoBuyerSuccess" className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStopAutoBuyerSuccess}/>
           {stopAutoBuyerSuccess}
         </div>
       ) : null,
       startAutoBuyerError ? (
-        <div key="startAutoBuyerError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStartAutoBuyerError}/>
+        <div key="startAutoBuyerError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStartAutoBuyerError}/>
           {startAutoBuyerError}
         </div>
       ) : null,
       stopAutoBuyerError ? (
-        <div key="stopAutoBuyerError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearStopAutoBuyerError}/>
+        <div key="stopAutoBuyerError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearStopAutoBuyerError}/>
           {stopAutoBuyerError}
         </div>
       ) : null,
       importScriptError ? (
-        <div key="importScriptError" style={StakePoolStyles.viewNotificationError}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearImportScriptError}/>
+        <div key="importScriptError" className="stakepool-view-notification-error">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearImportScriptError}/>
           {importScriptError}
         </div>
       ) : null,
       importScriptSuccess ? (
-        <div key="importScriptSuccess" style={StakePoolStyles.viewNotificationSuccess}>
-          <div style={StakePoolStyles.contentNestAddressDeleteIcon} onClick={onClearImportScriptSuccess}/>
+        <div key="importScriptSuccess" className="stakepool-view-notification-success">
+          <div className="stakepool-content-nest-address-delete-icon" onClick={onClearImportScriptSuccess}/>
           {importScriptSuccess}
         </div>
       ) : null
@@ -121,7 +121,7 @@ const TicketsPageHeader = ({
       isShowingAddStakePool ? null : (
         <div>
           <Balance amount={ticketPrice} />
-          <div style={StakePoolStyles.toggle}>
+          <div className="stakepool-toggle">
             <TextToggle
               activeButton={"left"}
               leftText={"Purchase Tickets"}
diff --git a/app/components/views/TicketsPage/Page.js b/app/components/views/TicketsPage/Page.js
index 63039bdb72..80776d9fe1 100644
--- a/app/components/views/TicketsPage/Page.js
+++ b/app/components/views/TicketsPage/Page.js
@@ -7,7 +7,7 @@ import VotingPrefs from "../../VotingPrefs";
 import StakePools from "../../StakePools";
 import TicketsPageHeader from "./Header";
 import Tickets from "./Tickets";
-import { StakePoolStyles } from "../ViewStyles";
+import "../../../style/StakePool.less";
 
 const TicketsPage = ({
   isSavingStakePoolConfig,
@@ -21,12 +21,12 @@ const TicketsPage = ({
   onHideStakePoolConfig,
   ...props
 }) => (
-  <div style={StakePoolStyles.body}>
+  <div className="stakepool-body">
     <SideBar />
-    <div style={StakePoolStyles.view}>
+    <div className="stakepool-view">
       <TicketsPageHeader {...{ onToggleTicketStakePool }} />
       {(isSavingStakePoolConfig || isPurchasingTickets)
-        ? <div style={StakePoolStyles.content}><StakeyBounce/></div>
+        ? <div className="stakepool-content"><StakeyBounce/></div>
         : (isShowingStakePools)
           ? <StakePools {...{ onHideStakePoolConfig }} />
           : isShowingVotingPrefs
diff --git a/app/components/views/TicketsPage/Tickets.js b/app/components/views/TicketsPage/Tickets.js
index 6d5db3db69..b67ee51bcf 100644
--- a/app/components/views/TicketsPage/Tickets.js
+++ b/app/components/views/TicketsPage/Tickets.js
@@ -4,7 +4,7 @@ import TicketAutoBuyer from "../../TicketAutoBuyer";
 import PassphraseModal from "../../PassphraseModal";
 import ImportScriptModal from "../../ImportScriptModal";
 import StakeInfo from "../../StakeInfo";
-import { StakePoolStyles } from "../ViewStyles";
+import "../../../style/StakePool.less";
 
 const Tickets = ({
   isRequestingPassphrase,
@@ -32,10 +32,10 @@ const Tickets = ({
       heading={"Enter Passphrase to Import Script"}
       description={<div>Please enter your Script from your configured stakepool:</div>}
     />
-    <div style={isRequestingPassphrase || isShowingImportScript ? StakePoolStyles.contentPurchaseTicketViewBlur : StakePoolStyles.contentPurchaseTicketView}>
+    <div className={isRequestingPassphrase || isShowingImportScript ? "stakepool-content-purchase-ticket-view-blur" : "stakepool-content-purchase-ticket-view"}>
       <StakeInfo />
       <PurchaseTickets {...{ ...props, onCancelPassphraseRequest }} />
-      <div style={StakePoolStyles.areaSpacing}></div>
+      <div className="stakepool-area-spacing"></div>
       <TicketAutoBuyer {...{ ...props, onCancelPassphraseRequest }} />
     </div>
   </div>
diff --git a/app/components/views/TxDetails.js b/app/components/views/TxDetails.js
index c072f8619a..76e8962b06 100644
--- a/app/components/views/TxDetails.js
+++ b/app/components/views/TxDetails.js
@@ -1,20 +1,19 @@
 // @flow
 import React from "react";
-import Radium from "radium";
 import Balance from "../Balance";
 import Header from "../Header";
 import { shell } from "electron";
 import dateFormat from "dateformat";
 import transactionDetails from "../../connectors/transactionDetails";
 import SlateGrayButton from "../SlateGrayButton";
-import { TxDetailsStyles } from "./ViewStyles";
+import "../../style/TxDetails.less";
 import { addSpacingAroundText } from "../../helpers/strings";
-import "../fonts.css";
+import "../../style/Fonts.less";
 
-const getHeaderStyle = txDirection => ({
-  out: TxDetailsStyles.headerMetaTransactionDetailsOut,
-  transfer: TxDetailsStyles.headerMetaTransactionDetailsTransfer,
-  in: TxDetailsStyles.headerMetaTransactionDetailsIn
+const getHeaderClassName = txDirection => ({
+  out: "txdetails-header-meta-out",
+  transfer: "txdetails-header-meta-transfer",
+  in: "txdetails-header-meta-in"
 })[txDirection];
 
 const getFormattedDate = timestamp => dateFormat(new Date(timestamp*1000), "mmm d yyyy, HH:MM:ss");
@@ -37,70 +36,70 @@ const TxDetails = ({
   currentBlockHeight,
   onClearTxDetail
 }) => (
-  <div style={TxDetailsStyles.view}>
+  <div className="txdetails-view">
     <Header
       headerTitleOverview={<SlateGrayButton key="back" style={{float: "right"}} onClick={onClearTxDetail}>back</SlateGrayButton>}
       headerMetaOverview={txType ? (
-        <div style={TxDetailsStyles.headerMetaTransactionDetailsStakeTx}>
+        <div className="txdetails-header-meta-stake-tx">
           {txType}
-          <div style={TxDetailsStyles.headerMetaTransactionDetailsTimeAndDate}>{getFormattedDate(txTimestamp)}</div>
+          <div className="txdetails-header-meta-time-and-date">{getFormattedDate(txTimestamp)}</div>
         </div>
       ) : (
-        <div style={getHeaderStyle(txDirection)}>
+        <div className={getHeaderClassName(txDirection)}>
           {txDirection === "in" ? "" : "-"}<Balance amount={txAmount} />
-          <div style={TxDetailsStyles.headerMetaTransactionDetailsTimeAndDate}>{getFormattedDate(txTimestamp)}</div>
+          <div className="txdetails-header-meta-time-and-date">{getFormattedDate(txTimestamp)}</div>
         </div>
       )}
     />
-    <div style={TxDetailsStyles.content}>
-      <div style={TxDetailsStyles.contentNest}>
-        <div style={TxDetailsStyles.transactionDetailsTop}>
-          <div style={TxDetailsStyles.transactionDetailsName}>Transaction:</div>
-          <div style={TxDetailsStyles.transactionDetailsValue}>
+    <div className="txdetails-content">
+      <div className="txdetails-content-nest">
+        <div className="txdetails-top">
+          <div className="txdetails-name">Transaction:</div>
+          <div className="txdetails-value">
             <a onClick={() => shell.openExternal(txUrl)} style={{cursor: "pointer"}}>{txHash}</a>
           </div>
-          <div style={TxDetailsStyles.transactionDetailsName}>
-            <div style={TxDetailsStyles.indicatorConfirmed}>confirmed</div>
+          <div className="txdetails-name">
+            <div className="txdetails-indicator-confirmed">confirmed</div>
           </div>
-          <div style={TxDetailsStyles.transactionDetailsValue}>{currentBlockHeight - txHeight} <span style={TxDetailsStyles.transactionDetailsValueText}>confirmations</span></div>
-          <div style={TxDetailsStyles.transactionDetailsOverview}>
-            <div style={TxDetailsStyles.transactionDetailsOverviewTitle}>
-              <div style={TxDetailsStyles.transactionDetailsOverviewTitleConsumed}>Used Inputs</div>
-              <div style={TxDetailsStyles.transactionDetailsOverviewTitleCreated}>New Wallet Outputs</div>
+          <div className="txdetails-value">{currentBlockHeight - txHeight} <span className="txdetails-value-text">confirmations</span></div>
+          <div className="txdetails-overview">
+            <div className="txdetails-overview-title">
+              <div className="txdetails-overview-title-consumed">Used Inputs</div>
+              <div className="txdetails-overview-title-created">New Wallet Outputs</div>
             </div>
-            <div style={TxDetailsStyles.transactionDetailsInputArea}>
+            <div className="txdetails-input-area">
               {txInputs.map(({ accountName, amount }, idx) => (
-                <div key={idx} style={TxDetailsStyles.transactionDetailsRow}>
-                  <div style={TxDetailsStyles.transactionDetailsAddress}>{accountName}</div>
-                  <div style={TxDetailsStyles.transactionDetailsAmount}><Balance amount={amount}/></div>
+                <div key={idx} className="txdetails-row">
+                  <div className="txdetails-address">{accountName}</div>
+                  <div className="txdetails-amount"><Balance amount={amount}/></div>
                 </div>
               ))}
             </div>
-            <div style={TxDetailsStyles.transactionDetailsOutputArea}>
+            <div className="txdetails-output-area">
               {txOutputs.map(({ address, amount }, idx) => (
-                <div key={idx} style={TxDetailsStyles.transactionDetailsRow}>
-                  <div style={TxDetailsStyles.transactionDetailsAddress}>{addSpacingAroundText(address)}</div>
-                  <div style={TxDetailsStyles.transactionDetailsAmount}><Balance amount={amount}/></div>
+                <div key={idx} className="txdetails-row">
+                  <div className="txdetails-address">{addSpacingAroundText(address)}</div>
+                  <div className="txdetails-amount"><Balance amount={amount}/></div>
                 </div>
               ))}
             </div>
           </div>
-          <div style={TxDetailsStyles.transactionDetailsName}>Transaction fee:</div>
-          <div style={TxDetailsStyles.transactionDetailsValue}><Balance amount={txFee} />
+          <div className="txdetails-name">Transaction fee:</div>
+          <div className="txdetails-value"><Balance amount={txFee} />
           </div>
         </div>
-        <div style={TxDetailsStyles.transactionDetails}>
-          <div style={TxDetailsStyles.transactionDetailsTitle}>Properties</div>
-          <div style={TxDetailsStyles.transactionDetailsName}>Block:</div>
-          <div style={TxDetailsStyles.transactionDetailsValue}>
+        <div className="txdetails-details">
+          <div className="txdetails-title">Properties</div>
+          <div className="txdetails-name">Block:</div>
+          <div className="txdetails-value">
             <a onClick={() => shell.openExternal(txBlockUrl)} style={{cursor: "pointer"}}>{txBlockHash}</a>
           </div>
-          <div style={TxDetailsStyles.transactionDetailsName}>Height:</div>
-          <div style={TxDetailsStyles.transactionDetailsValue}>{txHeight}</div>
+          <div className="txdetails-name">Height:</div>
+          <div className="txdetails-value">{txHeight}</div>
         </div>
       </div>
     </div>
   </div>
 );
 
-export default transactionDetails(Radium(TxDetails));
+export default transactionDetails(TxDetails);
diff --git a/app/components/views/ViewStyles.js b/app/components/views/ViewStyles.js
deleted file mode 100644
index 80c95c6145..0000000000
--- a/app/components/views/ViewStyles.js
+++ /dev/null
@@ -1,1668 +0,0 @@
-// @flow
-import Delete from "../icons/delete.svg";
-import IndicatorPending from "../icons/indicator-pending.svg";
-import IndicatorConfirmed from "../icons/indicator-confirmed.svg";
-import PlusBig from "../icons/plus-big.svg";
-import MinusBig from "../icons/minus-big.svg";
-import ArrowDownMidBlue from "../icons/arrow-down-mid-blue.svg";
-import ArrowDownKeyBlue from "../icons/arrow-down-key-blue.svg";
-import ArrowUpLightBlue from "../icons/arrow-up-light-blue.svg";
-import ArrowUpTurquiose from "../icons/arrow-up-turquiose.svg";
-import ArrowRightKeyBlue from "../icons/arrow-right-key-blue.svg";
-import WalletGray from "../icons/wallet-gray.svg";
-import StakePoolIcon from "../icons/stake-pool.svg";
-import ExpiryIcon from "../icons/expiry.svg";
-import SplitFeeIcon from "../icons/split-fee.svg";
-import TicketAddressIcon from "../icons/voting-address.svg";
-import FeeAddressIcon from "../icons/pool-fee-address.svg";
-import PoolFeeIcon from "../icons/pool-fees.svg";
-import BalanceToMaintainIcon from "../icons/balance-to-maintain.svg";
-import MaxFeeIcon from "../icons/max-fee.svg";
-import MaxPriceAbsoluteIcon from "../icons/max-price-absolute.svg";
-import MaxPriceRelativeIcon from "../icons/max-price-relative.svg";
-import MaxPerBlockIcon from "../icons/max-per-block.svg";
-import TicketSmall from "../icons/tickets-ticket.svg";
-
-export const SettingStyles = {
-  body: {
-    position: "fixed",
-    left: "0px",
-    top: "50%",
-    right: "0px",
-    display: "block",
-    overflow: "hidden",
-    width: "1178px",
-    height: "770px",
-    marginTop: "-385px",
-    marginRight: "auto",
-    marginLeft: "auto",
-    backgroundColor: "#FFF",
-  },
-  view: {
-    width: "880px",
-    height: "100%",
-    float: "right",
-    backgroundColor: "#f3f6f6",
-  },
-  content: {
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  contentBlur: {
-    filter: "blur(6px)",
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  saveSettingsButton: {
-    float: "right",
-  },
-  restart: {
-    fontWeight: "bold",
-  },
-  settingsSaveButton: {
-    marginTop: "10px",
-    marginRight: "27px",
-    float: "right",
-  },
-  settingsRow: {
-    width: "100%",
-    height: "50px",
-    paddingTop: "15px",
-    float: "left",
-    borderBottom: "1px black solid",
-  },
-  settingsLabel: {
-    width: "50%",
-    paddingLeft: "10px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "20px",
-    textAlign: "left",
-  },
-  settingsInput: {
-    width: "45%",
-    paddingRight: "10px",
-    float: "left",
-    height: "100%",
-    fontSize: "20px",
-    paddingTop: "5px",
-    textAlign: "right",
-  },
-  settingsInputSelect: {
-    display: "block",
-    overflow: "hidden",
-    float: "right",
-    color: "rgb(12, 30, 62)",
-    fontSize: "19px",
-  },
-  settingsInputSelectOption: {
-    overflow: "hidden",
-    height: "34px",
-    marginRight: "20px",
-    paddingTop: "5px",
-    paddingLeft: "10px",
-    color: "rgb(41, 113, 255)",
-    fontSize: "19px",
-  },
-  settingsInputError: {
-    width: "290px",
-    float: "right",
-    height: "100%",
-    textAlign: "left",
-    color: "red",
-    paddingTop: "5px",
-  },
-};
-export const StakePoolStyles = {
-  body: {
-    position: "fixed",
-    left: "0px",
-    top: "50%",
-    right: "0px",
-    display: "block",
-    overflow: "hidden",
-    width: "1178px",
-    height: "770px",
-    marginTop: "-385px",
-    marginRight: "auto",
-    marginLeft: "auto",
-    backgroundColor: "#FFF",
-  },
-  view: {
-    width: "880px",
-    height: "100%",
-    float: "right",
-    backgroundColor: "#f3f6f6",
-  },
-  viewNotificationError: {
-    marginTop: "20px",
-    display: "inline-block",
-    marginRight: "auto",
-    marginLeft: "auto",
-    padding: "7px 20px 7px 7px",
-    borderRadius: "5px",
-    backgroundColor: "#fd714b",
-    boxShadow: "0 3px 10px 0 rgba(0, 0, 0, .2)",
-    color: "#fff",
-    fontSize: "13px",
-    textAlign: "center",
-  },
-  viewNotificationSuccess: {
-    marginTop: "20px",
-    display: "inline-block",
-    marginRight: "auto",
-    marginLeft: "auto",
-    padding: "7px 20px 7px 7px",
-    borderRadius: "5px",
-    backgroundColor: "#41bf53",
-    boxShadow: "0 3px 10px 0 rgba(0, 0, 0, .2)",
-    color: "#fff",
-    fontSize: "13px",
-    textAlign: "center",
-    textDecoration: "none",
-  },
-  contentNestAddressDeleteIcon: {
-    width: "26px",
-    height: "19px",
-    float: "left",
-    backgroundImage: `url(${Delete})`,
-    backgroundPosition: "50% 50%",
-    backgroundSize: "8px",
-    backgroundRepeat: "no-repeat",
-    cursor: "pointer",
-    ":hover": {
-      opacity: "0.85",
-    }
-  },
-  transition1: {
-    transition: "all 100ms ease-in-out",
-  },
-  headerMetaSend: {
-    height: "54px",
-    width: "480px",
-    paddingLeft: "50px",
-    color: "#0c1e3e",
-    fontSize: "14px",
-  },
-  content: {
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  contentBlur: {
-    filter: "blur(6px)",
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  contentVotingGui: {
-    overflow: "auto",
-    height: "556px",
-    padding: "0px 60px 10px 80px",
-  },
-  contentPurchaseTicketViewBlur: {
-    filter: "blur(6px)",
-    overflow: "auto",
-    height: "565px",
-    padding: "20px 60px 20px 80px",
-  },
-  contentPurchaseTicketView: {
-    overflow: "auto",
-    height: "565px",
-    padding: "20px 60px 20px 80px",
-  },
-  instructions: {
-    fontSize: "13px",
-  },
-  contentNestPurchaseTicketForm: {
-    width: "100%",
-    height: "100%",
-    paddingTop: "2px",
-    paddingLeft: "10px",
-    borderStyle: "none",
-    color: "#2971ff",
-    borderBottom: "1px solid",
-    fontSize: "15px",
-    cursor: "text",
-    ":focus": {
-      color: "#2971ff",
-    },
-  },
-  contentNestPurchaseTicketFormDisabled: {
-    width: "100%",
-    height: "100%",
-    paddingTop: "2px",
-    paddingLeft: "10px",
-    borderStyle: "none",
-    color: "#2971ff",
-    fontSize: "15px",
-    cursor: "text",
-    ":focus": {
-      color: "#2971ff",
-    },
-  },
-  contentNestSend: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-  },
-  contentNestDeleteAddress: {
-    width: "625px",
-    height: "54px",
-    paddingTop: "10px",
-    paddingLeft: "116px",
-    float: "left",
-  },
-  contentNestPrefixConfigured: {
-    width: "200px",
-    paddingRight: "15px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "19px",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  contentNestStakePool: {
-    borderTop: "1px solid",
-    height: "185px",
-    position: "relative",
-    borderBottom: "1px solid",
-    float: "left",
-  },
-  contentNestBalance: {
-    borderTop: "1px solid",
-    height: "260px",
-    position: "relative",
-    borderBottom: "1px solid",
-    float: "left",
-  },
-  contentNestStakePoolSettings: {
-    width: "100%",
-    height: "20px",
-    marginTop: "20px",
-    float: "left",
-  },
-  contentNestBalanceOverview: {
-    width: "100%",
-    height: "25px",
-    marginTop: "10px",
-    float: "left",
-  },
-  contentNestPrefixStakePoolSettings: {
-    width: "125px",
-    paddingRight: "15px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  contentNestPrefixBalanceOverview: {
-    width: "245px",
-    paddingRight: "15px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  contentNestStakePoolSettingsBottom: {
-    width: "100%",
-    height: "20px",
-    marginTop: "30px",
-    float: "left",
-  },
-  contentNestBalanceOverviewBottom: {
-    width: "100%",
-    height: "20px",
-    marginTop: "30px",
-    float: "left",
-  },
-  contentNestContentStakePoolSettings: {
-    position: "relative",
-    overflowY: "hidden",
-    overflowX: "auto",
-    width: "575px",
-    height: "30px",
-    float: "left",
-    fontSize: "13px",
-    paddingTop: "2px",
-  },
-  contentNestContentBalanceOverview: {
-    position: "relative",
-    overflowY: "hidden",
-    overflowX: "auto",
-    width: "465px",
-    height: "20px",
-    float: "left",
-    fontSize: "13px",
-    paddingTop: "2px",
-  },
-  contentNestPrefixSend: {
-    width: "100px",
-    paddingRight: "15px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "19px",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  stakePoolUnconfiguredSelect: {
-    width: "350px",
-    float: "left",
-    fontSize: "16px",
-    paddingLeft: "10px",
-  },
-  contentNestPrefixConfirm: {
-    width: "230px",
-    paddingRight: "15px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "19px",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  contentNestFromAddress: {
-    width: "100%",
-    height: "54px",
-    paddingTop: "10px",
-    float: "left",
-  },
-  contentNestApiKeyInstructions: {
-    width: "600px",
-    height: "285px",
-    paddingLeft: "30px",
-    float: "left",
-  },
-  contentNestApiKey: {
-    position: "relative",
-    paddingLeft: "65px",
-    width: "600px",
-    height: "34px",
-    float: "left",
-    fontSize: "13px",
-  },
-  contentNestToAddress: {
-    width: "100%",
-    height: "54px",
-    paddingTop: "10px",
-    float: "left",
-  },
-  contentNestAddressHashTo: {
-    width: "100%",
-    height: "100%",
-    paddingTop: "4px",
-    paddingLeft: "10px",
-    borderStyle: "none",
-    color: "#2971ff",
-    fontSize: "13px",
-    cursor: "text",
-    ":focus": {
-      color: "#2971ff",
-    },
-  },
-  contentNestAddressHashBlock: {
-    position: "relative",
-    width: "600px",
-    height: "34px",
-    float: "left",
-    fontSize: "13px",
-  },
-  contentNestAddressHashBlockConfirm: {
-    position: "relative",
-    overflow: "hidden",
-    width: "300px",
-    height: "34px",
-    paddingTop: "7px",
-    float: "left",
-    fontSize: "17px",
-  },
-  contentNestGradient: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    width: "40px",
-    height: "100%",
-    backgroundImage: "linear-gradient(90deg, transparent, #fff 80%)",
-  },
-  selectAccountsSend: {
-    width: "300px",
-    position: "relative",
-    zIndex: "3",
-    overflow: "visible",
-    height: "34px",
-    minWidth: "300px",
-    float: "left",
-    borderBottom: "1px solid #2971ff",
-    backgroundColor: "#fff",
-    backgroundImage: `url(${ArrowDownMidBlue})`,
-    backgroundPosition: "100% 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    cursor: "pointer",
-    ":hover": {
-      backgroundImage: `url(${ArrowDownKeyBlue})`,
-      backgroundSize: "10px",
-    }
-  },
-  selectAccount: {
-    display: "block",
-    overflow: "hidden",
-    width: "100%",
-    height: "100%",
-    color: "#0c1e3e",
-    fontSize: "19px",
-    ":hover": {
-      height: "auto",
-    }
-  },
-  selectAccountNFirst: {
-    overflow: "hidden",
-    height: "34px",
-    marginRight: "20px",
-    paddingTop: "5px",
-    paddingLeft: "10px",
-    color: "#2971ff",
-    fontSize: "19px",
-  },
-  selectAccountNTextSend: {
-    width: "200%",
-    paddingTop: "1px",
-    fontSize: "13px",
-  },
-  selectAccountNAmount: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    marginRight: "20px",
-    paddingTop: "7px",
-    paddingLeft: "40px",
-    backgroundImage: "linear-gradient(90deg, transparent, #fff 28%)",
-    fontFamily: "Inconsolata, monospace",
-    color: "#596d81",
-    fontSize: "11px",
-    fontWeight: "400",
-    textAlign: "right",
-  },
-  selectAccountNAmountBold: {
-    fontFamily: "Inconsolata, monospace",
-    fontWeight: "700",
-  },
-  selectAccountNNestSend: {
-    fontSize: "13px",
-    overflow: "auto",
-    height: "auto",
-    maxHeight: "413px",
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    borderBottom: "1px solid #a9b4bf",
-    backgroundColor: "#fff",
-  },
-  selectAccountNGradient: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    width: "40px",
-    height: "100%",
-    backgroundImage: "linear-gradient(90deg, transparent, #fff 75%)",
-  },
-  selectAccountN: {
-    position: "relative",
-    overflow: "hidden",
-    width: "100%",
-    paddingTop: "18px",
-    paddingBottom: "18px",
-    paddingLeft: "10px",
-    float: "left",
-    ":hover": {
-      color: "#2971ff",
-    }
-  },
-  selectAccountNText: {
-    width: "200%",
-  },
-  highlightTextNeonGreen: {
-    color: "#2ed8a3",
-  },
-  highlighTextOrange: {
-    color: "#fd714b",
-  },
-  selectVotingPreferences: {
-    display: "block",
-    float: "right",
-    overflow: "hidden",
-    height: "100%",
-    paddingTop: "3px",
-    color: "#0c1e3e",
-    ":hover": {
-      height: "auto",
-    }
-  },
-  selectPurchaseTickets: {
-    display: "block",
-    overflow: "hidden",
-    height: "100%",
-    width: "100%",
-    paddingTop: "3px",
-    color: "#0c1e3e",
-    ":hover": {
-      height: "auto",
-    }
-  },
-  selectPurchaseTicketsNFirst: {
-    overflow: "hidden",
-    height: "34px",
-    marginRight: "20px",
-    paddingTop: "5px",
-    paddingLeft: "10px",
-    color: "#2971ff",
-    fontSize: "19px",
-  },
-  selectPurchaseTicketsNTextSend: {
-    width: "200%",
-    paddingTop: "1px",
-    fontSize: "13px",
-  },
-  selectPurchaseTicketsNAmount: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    marginRight: "20px",
-    paddingTop: "7px",
-    paddingLeft: "40px",
-    backgroundImage: "linear-gradient(90deg, transparent, #fff 28%)",
-    fontFamily: "Inconsolata, monospace",
-    color: "#596d81",
-    fontSize: "11px",
-    fontWeight: "400",
-    textAlign: "right",
-  },
-  selectPurchaseTicketsNAmountBold: {
-    fontFamily: "Inconsolata, monospace",
-    fontWeight: "700",
-  },
-  selectPurchaseTicketsNNestSend: {
-    fontSize: "13px",
-    overflow: "auto",
-    height: "auto",
-    maxHeight: "413px",
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    borderBottom: "1px solid #a9b4bf",
-    backgroundColor: "#fff",
-  },
-  selectPurchaseTicketsNGradient: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    width: "40px",
-    height: "100%",
-    backgroundImage: "linear-gradient(90deg, transparent, #fff 75%)",
-  },
-  selectPurchaseTicketsN: {
-    position: "relative",
-    overflow: "hidden",
-    width: "100%",
-    paddingTop: "18px",
-    paddingBottom: "18px",
-    paddingLeft: "10px",
-    float: "left",
-    ":hover": {
-      color: "#2971ff",
-    }
-  },
-  selectPurchaseTicketsNText: {
-    width: "200%",
-  },
-  inputForm: {
-    position: "relative",
-    width: "100%",
-    height: "25px",
-  },
-  inputFormPurchaseTicket: {
-    position: "relative",
-    width: "100%",
-    height: "25px",
-    paddingTop: "1px",
-  },
-  contentNestAddressAmount: {
-    display: "block",
-    height: "34px",
-    float: "right",
-  },
-  contentNestAddressAmountSumAndCurrency: {
-    position: "relative",
-    overflow: "hidden",
-    width: "140px",
-    height: "100%",
-    marginRight: "20px",
-    float: "right",
-    borderBottom: "1px solid #a9b4bf",
-    color: "#0c1e3e",
-    textAlign: "right",
-  },
-  contentNestAddressAmountSumGradient: {
-    position: "absolute",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    display: "inline-block",
-    width: "37px",
-    height: "100%",
-    paddingTop: "9px",
-    paddingRight: "10px",
-    backgroundColor: "#fff",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "13px",
-    textTransform: "uppercase",
-  },
-  contentNestAddressAmountSum: {
-    display: "block",
-    width: "100%",
-    height: "100%",
-    fontSize: "19px",
-    fontWeight: "700",
-  },
-  contentNestToAddressAmountSumNumberFormatSmall: {
-    fontSize: "13px",
-  },
-  contentNestAddressAmountSumNumberFormatSmall: {
-    fontSize: "13px",
-  },
-  contentSend: {
-    marginTop: "20px",
-  },
-  contentSendSection: {
-    display: "block",
-    width: "91%",
-    height: "22px",
-    paddingLeft: "30px",
-    float: "left",
-    color: "#0c1e3e",
-  },
-  contentSendSectionCheckboxText: {
-    height: "100%",
-    paddingTop: "1px",
-    paddingLeft: "5px",
-    float: "left",
-    textTransform: "capitalize",
-  },
-  contentSendSectionAmount: {
-    width: "160px",
-    height: "100%",
-    paddingTop: "1px",
-    paddingRight: "30px",
-    float: "right",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "13px",
-    textAlign: "right",
-  },
-  contentSendSectionDescription: {
-    height: "100%",
-    paddingTop: "1px",
-    paddingRight: "20px",
-    float: "right",
-    color: "#596d81",
-    fontSize: "13px",
-  },
-  contentSendSectionAmountCurrency: {
-    paddingLeft: "5px",
-  },
-  contentPurchaseButton: {
-    marginTop: "8px",
-    marginLeft: "8px",
-    float: "left",
-  },
-  contentRevokeButton : {
-    marginTop: "8px",
-    marginRight: "8px",
-    float: "right",
-  },
-  contentImportScriptButton: {
-    marginTop: "8px",
-    marginRight: "8px",
-    float: "right",
-  },
-  showAdvanced: {
-    width: "300px",
-    position: "relative",
-    zIndex: "3",
-    overflow: "visible",
-    height: "34px",
-    minWidth: "300px",
-    float: "left",
-    borderBottom: "1px solid #2971ff",
-    backgroundColor: "#fff",
-    backgroundImage: `url(${ArrowDownMidBlue})`,
-    backgroundPosition: "100% 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    cursor: "pointer",
-    ":hover": {
-      backgroundImage: `url(${ArrowDownKeyBlue})`,
-      backgroundSize: "10px",
-    }
-  },
-  hideAdvanced: {
-    width: "300px",
-    position: "relative",
-    zIndex: "3",
-    overflow: "visible",
-    height: "34px",
-    minWidth: "300px",
-    float: "left",
-    borderBottom: "1px solid #2971ff",
-    backgroundColor: "#fff",
-    backgroundImage: `url(${ArrowUpLightBlue})`,
-    backgroundPosition: "100% 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    cursor: "pointer",
-    ":hover": {
-      backgroundImage: `url(${ArrowUpTurquiose})`,
-      backgroundSize: "10px",
-    }
-  },
-  selectStakePoolArea: {
-    paddingTop: "4px"
-  },
-  autoBuyerQuickBarRow: {
-    width: "400px",
-    paddingLeft: "37px",
-    paddingTop: "8px",
-    float: "left",
-    position: "relative",
-  },
-
-/*
-  .switch.disabled-inactive {
-    background-color: #f3f6f6;
-    cursor: default;
-  }
-
-  .switch.disabled-inactive.transition0.automatic-purchase {
-    float: left;
-  }
-
-  .switch.enabled-inactive {
-    background-color: #f3f6f6;
-    cursor: default;
-  }
-
-  .switch.enabled-inactive.transition0.automatic-purchase {
-    float: left;
-  }
-  .switch-knob.disabled-inactive {
-    float: right;
-    background-color: #e7eaed;
-  }
-
-  .switch-knob.enabled-inactive {
-    background-color: #e7eaed;
-  }
-  */
-
-  autoBuyerLabel: {
-    width: "75px",
-    display: "block",
-    paddingTop: "13px",
-    paddingLeft: "20px",
-    float: "left",
-    color: "#0c1e3e",
-    fontSize: "19px",
-    textTransform: "capitalize",
-  },
-  autoBuyerShowAdvancedArea: {
-    float: "right",
-    paddingTop: "13px",
-  },
-  flexHeightAutoBuyerHidden: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-    height:"54px",
-    width: "740px",
-    float: "left",
-    overflowY: "auto",
-    overflowX: "hidden",
-    transition: "all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s",
-  },
-  flexHeightAutoBuyerShown: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-    height:"258px",
-    width: "740px",
-    float: "left",
-    overflowY: "auto",
-    overflowX: "hidden",
-  },
-  autoBuyerRow: {
-    width: "100%",
-    height: "54px",
-    float: "left",
-  },
-  purchaseTicketQuickBarRow: {
-    height: "36px",
-    float: "left",
-    paddingTop: "5px",
-    paddingRight: "20px",
-    position: "relative",
-  },
-  quickBarRowLabel: {
-    width: "120px",
-    position: "relative",
-    paddingTop: "6px",
-    float: "left",
-    fontSize: "13px",
-    paddingRight: "10px",
-    color: "#0c1e3e",
-    height: "100%",
-    textAlign: "right",
-    textTransform: "capitalize",
-  },
-  autoBuyerIconAreas: {
-    marginTop: "8px",
-    paddingRight: "10px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  autoBuyerIconAreasExpand: {
-    marginTop: "8px",
-    width: "140px",
-    textAlign: "right",
-    paddingRight: "10px",
-    paddingLeft: "10px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  balanceToMaintainIcon: {
-    display: "block",
-    backgroundImage: `url(${BalanceToMaintainIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    width: "16px",
-    paddingRight: "10px",
-    float: "left",
-  },
-  maxFeeIcon: {
-    display: "block",
-    backgroundImage: `url(${MaxFeeIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    width: "16px",
-    paddingRight: "10px",
-    float: "left",
-  },
-  maxPriceAbsoluteIcon: {
-    display: "block",
-    backgroundImage: `url(${MaxPriceAbsoluteIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    width: "16px",
-    paddingRight: "10px",
-    float: "left",
-  },
-  maxPriceRelativeIcon: {
-    display: "block",
-    backgroundImage: `url(${MaxPriceRelativeIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    width: "16px",
-    paddingRight: "10px",
-    float: "left",
-  },
-  maxPerBlockIcon: {
-    display: "block",
-    backgroundImage: `url(${MaxPerBlockIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    width: "16px",
-    paddingRight: "10px",
-    float: "left",
-  },
-  stakepoolIcon: {
-    display: "block",
-    backgroundImage: `url(${StakePoolIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  expiryIcon: {
-    backgroundImage: `url(${ExpiryIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    display: "block",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  feeIcon: {
-    backgroundImage: `url(${SplitFeeIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    display: "block",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  ticketAddressIcon: {
-    backgroundImage: `url(${TicketAddressIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    display: "block",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  feeAddressIcon: {
-    backgroundImage: `url(${FeeAddressIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    display: "block",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  poolFeeIcon: {
-    backgroundImage: `url(${PoolFeeIcon})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "16px",
-    backgroundRepeat: "no-repeat",
-    display: "block",
-    height: "16px",
-    minWidth: "20px",
-    marginTop: "8px",
-    paddingRight: "18px",
-    paddingLeft: "20px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    color: "#0c1e3e",
-    fontSize: "11px",
-    lineHeight: "17px",
-  },
-  stakeInfoArea: {
-    paddingTop: "1px",
-    backgroundColor: "rgb(255, 255, 255)",
-    height: "130px",
-    width: "740px",
-    float: "left",
-    marginBottom: "10px",
-  },
-  stakeInfoAreaSmall: {
-    paddingTop: "1px",
-    backgroundColor: "rgb(255, 255, 255)",
-    height: "25px",
-    width: "740px",
-    float: "left",
-    marginBottom: "10px",
-    transition: "all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s",
-  },
-  stakeInfoRowSmall: {
-    width: "33%",
-    float: "left",
-  },
-  stakeInfoRowSmallRight: {
-    width: "34%",
-    float: "left",
-  },
-  stakeInfoRow: {
-    width: "100%",
-    height: "25px",
-    float: "left",
-    borderBottom: "1px #E7EAED solid",
-  },
-  stakeInfoRowLeft: {
-    width: "50%",
-    float: "left",
-  },
-  stakeInfoRowRight: {
-    width: "50%",
-    float: "right",
-  },
-  stakeInfoLabel: {
-    width: "152px",
-    paddingRight: "15px",
-    paddingLeft: "5px",
-    float: "left",
-    height: "100%",
-    paddingTop: "2px",
-    fontSize: "14px",
-    textAlign: "right",
-  },
-  stakeInfoValue: {
-    fontFamily: "Inconsolata, monospace",
-    float: "left",
-    paddingTop: "3px",
-  },
-  purchaseTicketRow: {
-    width: "100%",
-    height: "45px",
-    paddingTop: "2px",
-    float: "left",
-    borderBottom: "1px #E7EAED solid",
-  },
-  purchaseTicketRowThirds: {
-    width: "33%",
-    float: "left",
-  },
-  purchaseTicketRowAccountSelect: {
-    width: "58%",
-    float: "left",
-  },
-  purchaseTicketAccountSelectLabel: {
-    width: "86px",
-    paddingRight: "15px",
-    paddingLeft: "5px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "16px",
-    textAlign: "right",
-  },
-  purchaseTicketRowNumTickets: {
-    width: "42%",
-    float: "left",
-  },
-  purchaseTicketRowLeft: {
-    width: "50%",
-    float: "left",
-  },
-  purchaseTicketRowRight: {
-    width: "50%",
-    float: "right",
-  },
-  purchaseTicketLabel: {
-    width: "152px",
-    paddingRight: "15px",
-    paddingLeft: "5px",
-    float: "left",
-    height: "100%",
-    paddingTop: "5px",
-    fontSize: "16px",
-    textAlign: "right",
-  },
-  purchaseTicketInput: {
-    width: "283px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-  },
-  purchaseTicketInputSelect: {
-    width: "283px",
-    float: "left",
-    height: "100%",
-    fontSize: "16px",
-    textAlign: "left",
-  },
-  purchaseTicketNumSelect: {
-    width: "85px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-  },
-  purchaseTicketNumInput: {
-    width: "146px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-  },
-  purchaseTicketThirdsInput: {
-    width: "53px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-  },
-  purchaseTicketAddressInput: {
-    width: "331px",
-    float: "left",
-    height: "100%",
-    fontSize: "19px",
-    textAlign: "right",
-  },
-  purchaseTicketInputButtons: {
-    width: "90px",
-    float: "right",
-    paddingTop: "5px",
-    paddingLeft: "10px",
-  },
-  managePoolButtonArea: {
-    float: "left",
-    paddingTop: "8px",
-    paddingLeft: "10px",
-  },
-  purchaseTicketInputError: {
-    float: "right",
-    width: "200px",
-    textAlign: "left",
-    color: "red",
-    fontSize: "11px",
-    paddingTop: "4px",
-  },
-  areaSpacing: {
-    float: "left",
-    height: "25px",
-    width: "100%",
-  },
-  apiKeyError: {
-    paddingLeft: "70px",
-    textAlign: "left",
-    float: "left",
-    color: "red",
-  },
-  stakepoolLink: {
-    color: "#2971ff",
-    fontWeight: "bold",
-    cursor: "pointer",
-  },
-  flexHeight: {
-    backgroundColor: "#fff",
-    float: "left",
-  },
-  flexHeightBalanceOverview: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-    height:"553px",
-    float: "left",
-    overflowY: "auto",
-    overflowX: "hidden",
-  },
-  flexHeightHidden: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-    height:"116px",
-    width: "740px",
-    float: "left",
-    overflowY: "auto",
-    overflowX: "hidden",
-    transition: "all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s",
-  },
-  purchaseTicketButtonsArea: {
-    width: "740px",
-    float: "left",
-  },
-  flexHeightShown: {
-    paddingTop: "1px",
-    backgroundColor: "#fff",
-    height:"288px",
-    width: "740px",
-    float: "left",
-    overflowY: "auto",
-    overflowX: "hidden",
-  },
-  loading: {
-    marginTop: "110px",
-    marginLeft: "268px",
-  },
-  selectAccountsPurchase: {
-    width: "300px",
-    position: "relative",
-    zIndex: "3",
-    overflow: "visible",
-    height: "34px",
-    minWidth: "300px",
-    float: "left",
-    borderBottom: "1px solid #2971ff",
-    backgroundColor: "#fff",
-    backgroundImage: `url(${ArrowDownMidBlue})`,
-    backgroundPosition: "100% 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    cursor: "pointer",
-    ":hover": {
-      backgroundImage: `url(${ArrowDownKeyBlue})`,
-      backgroundSize: "10px",
-    }
-  },
-  toggle: {
-    fontFamily: "Source Sans Pro, sans-serif",
-    float: "right",
-  },
-  contentTitle: {
-    display: "block",
-    height: "44px",
-    marginRight: "auto",
-    marginBottom: "10px",
-    marginLeft: "auto",
-    borderBottom: "1px solid transparent",
-    color: "#596d81",
-    fontSize: "27px",
-  },
-  contentTitleText: {
-    display: "inline-block",
-    overflow: "hidden",
-    width: "500px",
-    height: "100%",
-    paddingTop: "13px",
-    paddingRight: "20px",
-    paddingLeft: "20px",
-  },
-  votingTitleArea: {
-    display: "block",
-    height: "20px",
-    width: "740px",
-    borderBottom: "1px solid transparent",
-    color: "#596d81",
-    fontSize: "20px",
-  },
-  votingTitleAreaName: {
-    fontSize: "20px",
-    display: "inline-block",
-    height: "100%",
-    paddingTop: "10px",
-    paddingBottom: "10px",
-    float: "left",
-  },
-  votingAgendaArea: {
-    width: "100%",
-    float: "left",
-  },
-  noAgendasMessage: {
-    fontSize: "25px",
-    paddingTop: "200px",
-    paddingLeft: "150px",
-  },
-  hideStakePoolConfig: {
-    float: "right",
-    marginTop: "10px",
-  },
-  manageStakePoolsButton: {
-    width: "150px",
-    padding: "7px 18px",
-    display: "block",
-  }
-};
-export const HelpStyles = {
-  body: {
-    position: "fixed",
-    left: "0px",
-    top: "50%",
-    right: "0px",
-    display: "block",
-    overflow: "hidden",
-    width: "1178px",
-    height: "770px",
-    marginTop: "-385px",
-    marginRight: "auto",
-    marginLeft: "auto",
-    backgroundColor: "#FFF",
-  },
-  view: {
-    width: "880px",
-    height: "100%",
-    float: "right",
-    backgroundColor: "#f3f6f6",
-  },
-  content: {
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  img: {
-    width: "250px",
-    paddingLeft: "244px",
-  },
-  center: {
-    textAlign: "center",
-    justifyContent: "center",
-    alignItems: "center",
-  }
-};
-export const TxDetailsStyles = {
-  view: {
-    width: "880px",
-    height: "100%",
-    float: "right",
-    backgroundColor: "#f3f6f6",
-  },
-  header: {
-    paddingRight: "80px",
-    paddingLeft: "100px",
-    backgroundColor: "#fff",
-  },
-  content: {
-    overflow: "auto",
-    height: "556px",
-    padding: "54px 60px 54px 80px",
-  },
-  headerTop: {
-    height: "106px",
-    paddingBottom: "20px",
-  },
-  headerTitleOverview: {
-    height: "54px",
-    paddingTop: "13px",
-    color: "#596d81",
-    fontSize: "27px",
-  },
-  headerMetaOverview: {
-    height: "54px",
-    paddingTop: "5px",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "53px",
-  },
-  contentTitle: {
-    display: "block",
-    height: "44px",
-    marginRight: "auto",
-    marginBottom: "10px",
-    marginLeft: "auto",
-    borderBottom: "1px solid transparent",
-    color: "#596d81",
-    fontSize: "27px",
-  },
-  contentNest: {
-    paddingTop: "1px",
-  },
-  indicatorPending: {
-    display: "inline-block",
-    padding: "5px 8px 5px 20px",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderRadius: "3px",
-    fontSize: "12px",
-    lineHeight: "8px",
-    textAlign: "right",
-    textTransform: "capitalize",
-    borderColor: "#2971ff",
-    backgroundImage: `url(${IndicatorPending})`,
-    backgroundPosition: "6px 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    color: "#2971ff",
-  },
-
-  indicatorConfirmed: {
-    display: "inline-block",
-    padding: "5px 8px 5px 20px",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    borderRadius: "3px",
-    fontSize: "12px",
-    lineHeight: "8px",
-    textAlign: "right",
-    textTransform: "capitalize",
-    borderColor: "#2ed8a3",
-    backgroundImage: `url(${IndicatorConfirmed})`,
-    backgroundPosition: "6px 50%",
-    backgroundSize: "10px",
-    backgroundRepeat: "no-repeat",
-    color: "#2ed8a3",
-  },
-  headerTopTransactionDetails: {
-    height: "106px",
-    paddingTop: "43px",
-    textAlign: "center",
-    marginRight: "-20px",
-  },
-  headerMetaTransactionDetailsStakeTx: {
-    height: "38px",
-    paddingTop: "16px",
-    paddingLeft: "50px",
-    backgroundImage: `url(${TicketSmall})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "30px",
-    backgroundRepeat: "no-repeat",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "35px",
-    fontWeight: "700",
-  },
-  headerMetaTransactionDetailsIn: {
-    height: "38px",
-    paddingTop: "16px",
-    paddingLeft: "50px",
-    backgroundImage: `url(${PlusBig})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "30px",
-    backgroundRepeat: "no-repeat",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "35px",
-    fontWeight: "700",
-  },
-  headerMetaTransactionDetailsTransfer: {
-    height: "38px",
-    paddingTop: "16px",
-    paddingLeft: "50px",
-    backgroundImage: `url(${WalletGray})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "30px",
-    backgroundRepeat: "no-repeat",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "35px",
-    fontWeight: "700",
-  },
-  headerMetaTransactionDetailsCurrency: {
-    fontSize: "19px",
-    fontWeight: "400",
-  },
-
-  headerMetaTransactionDetailsTimeAndDate: {
-    display: "inline-block",
-    paddingTop: "4px",
-    float: "right",
-    fontFamily: "Source Sans Pro, sans-serif",
-    fontSize: "19px",
-    fontWeight: "400",
-  },
-
-  headerMetaTransactionDetailsOut: {
-    height: "38px",
-    paddingTop: "16px",
-    paddingLeft: "50px",
-    backgroundImage: `url(${MinusBig})`,
-    backgroundPosition: "0px 50%",
-    backgroundSize: "30px",
-    backgroundRepeat: "no-repeat",
-    fontFamily: "Inconsolata, monospace",
-    fontSize: "35px",
-    fontWeight: "700",
-  },
-
-  transactionDetails: {
-    paddingTop: "18px",
-    paddingBottom: "8px",
-    borderBottom: "1px solid #e7eaed",
-    fontSize: "13px",
-    height: "100px",
-  },
-
-  transactionDetailsTop: {
-    paddingTop: "18px",
-    paddingBottom: "8px",
-    borderBottom: "1px solid #e7eaed",
-    fontSize: "13px",
-    height: "240px",
-  },
-
-  transactionDetailsLeft: {
-    width: "150px",
-    float: "left",
-  },
-
-  transactionDetailsRight: {
-    width: "570px",
-    float: "right",
-  },
-
-  transactionDetailsName: {
-    display: "block",
-    width: "160px",
-    height: "28px",
-    paddingTop: "4px",
-    paddingRight: "20px",
-    float: "left",
-    clear: "left",
-    fontSize: "13px",
-    lineHeight: "19px",
-    textAlign: "right",
-  },
-  transactionDetailsOverview: {
-    height: "100px",
-    width: "100%",
-    paddingLeft: "80px",
-  },
-  transactionDetailsOverviewTitle: {
-    float: "left",
-    height: "30px",
-    width: "100%",
-    fontSize: "20px",
-    fontWeight: "700",
-    borderTop: "1px solid #e7eaed",
-    paddingTop: "10px",
-  },
-  transactionDetailsOverviewTitleCreated: {
-    float: "right",
-    width: "63%",
-  },
-  transactionDetailsOverviewTitleConsumed: {
-    float: "left",
-    width: "30%",
-  },
-  transactionDetailsInputArea: {
-    float: "left",
-    width: "30%",
-    height: "100px",
-    overflow: "auto",
-    backgroundImage: `url(${ArrowRightKeyBlue})`,
-    backgroundPosition: "100% 50%",
-    backgroundSize: "15px",
-    backgroundRepeat: "no-repeat",
-    paddingRight: "35px",
-  },
-  transactionDetailsOutputArea: {
-    float: "right",
-    width: "56%",
-    height: "100px",
-    overflow: "auto",
-    paddingRight: "50px",
-  },
-  transactionDetailsDirection: {
-    display: "block",
-    width: "100%",
-    height: "28px",
-    paddingTop: "4px",
-    paddingLeft: "80px",
-    float: "left",
-    clear: "left",
-    fontSize: "20px",
-    lineHeight: "19px",
-    textAlign: "left",
-  },
-  transactionDetailsValue: {
-    display: "inline-block",
-    height: "28px",
-    paddingTop: "9px",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    lineHeight: "10px",
-    fontWeight: "700",
-    textAlign: "left",
-  },
-  transactionDetailsRow: {
-    display: "inline-block",
-    height: "28px",
-    paddingTop: "9px",
-    width: "100%",
-    float: "left",
-    fontFamily: "Inconsolata, monospace",
-    lineHeight: "10px",
-    fontWeight: "700",
-  },
-  transactionDetailsAddress: {
-    width: "50%",
-    float: "left",
-    textAlign: "left",
-  },
-  transactionDetailsAmount: {
-    width: "50%",
-    float: "right",
-    textAlign: "right",
-  },
-
-  transactionDetailsValueText: {
-    fontWeight: "400",
-  },
-
-  transactionDetailsTitle: {
-    width: "140px",
-    height: "28px",
-    paddingTop: "4px",
-    color: "#596d81",
-    fontSize: "20px",
-    textAlign: "right",
-  },
-
-  transactionDetailsLast: {
-    borderBottom: "0px none transparent",
-  }
-};
diff --git a/app/containers/App.js b/app/containers/App.js
index fd81a06c95..b6b37e1606 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import { PropTypes } from "prop-types";
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import theme from "../materialUITheme";
-import {StyleRoot} from "radium";
 
 export default class App extends Component {
   static propTypes = {
@@ -11,13 +10,11 @@ export default class App extends Component {
 
   render() {
     return (
-      <StyleRoot>
-        <MuiThemeProvider muiTheme={theme}>
-          <div>
-            {this.props.children}
-          </div>
-        </MuiThemeProvider>
-      </StyleRoot>
+      <MuiThemeProvider muiTheme={theme}>
+        <div>
+          {this.props.children}
+        </div>
+      </MuiThemeProvider>
     );
   }
 }
diff --git a/app/style/AccountRow.less b/app/style/AccountRow.less
index 3476fe5a81..12e5ca7ea1 100644
--- a/app/style/AccountRow.less
+++ b/app/style/AccountRow.less
@@ -1,14 +1,5 @@
 @import (reference) "./main.less";
-
-
-@arrow-right-gray-icon: url(../components/icons/arrow-right-gray.svg);
-@arrow-right-key-blue-icon: url(../components/icons/arrow-right-key-blue.svg);
-@arrow-down-mid-blue-icon: url(../components/icons/arrow-down-mid-blue.svg);
-@arrow-down-key-blue-icon: url(../components/icons/arrow-down-key-blue.svg);
-@wallet-gray-icon: url(../components/icons/wallet-gray.svg);
-@account-rename-icon: url(../components/icons/account-rename.svg);
-@show-account-icon: url(../components/icons/account-eye-open.svg);
-@hide-account-icon: url(../components/icons/account-eye-hide.svg);
+@import (reference) "./Icons.less";
 
 
 // From AccountStyles
diff --git a/app/style/AccountsPage.less b/app/style/AccountsPage.less
index b7e16279d5..78baabcd8c 100644
--- a/app/style/AccountsPage.less
+++ b/app/style/AccountsPage.less
@@ -1,7 +1,5 @@
 @import (reference) "./main.less";
-
-@delete-icon: url(../components/icons/delete.svg);
-
+@import (reference) "./Icons.less";
 
 .account-body {
     position: fixed;
diff --git a/app/style/AgendaCard.less b/app/style/AgendaCard.less
index 828d5946f8..e503ebdaa6 100644
--- a/app/style/AgendaCard.less
+++ b/app/style/AgendaCard.less
@@ -1,11 +1,5 @@
 @import (reference) "./main.less";
-
-@agenda-card-kebab: url(../components/icons/tickets-agenda-card-kebab.svg);
-@agenda-card-kebab-hover: url(../components/icons/tickets-agenda-card-kebab-hover.svg);
-@agenda-card-kebab-disabled: url(../components/icons/tickets-agenda-card-kebab-disabled.svg);
-@agenda-indicator-pending: url(../components/icons/indicator-pending.svg);
-@agenda-indicator-finished: url(../components/icons/indicator-finished.svg);
-@agenda-close-icon: url(../components/icons/tickets-agenda-close.svg);
+@import (reference) "./Icons.less";
 
 
 .agenda-card {
diff --git a/app/style/AgendaOverview.less b/app/style/AgendaOverview.less
index 27dee7eeea..2a394b0784 100644
--- a/app/style/AgendaOverview.less
+++ b/app/style/AgendaOverview.less
@@ -1,7 +1,6 @@
 @import (reference) "./main.less";
+@import (reference) "./Icons.less";
 
-@agenda-stripe: url(../components/icons/stripe.svg);
-@indicator-pending-icon: url(../components/icons/indicator-pending.svg);
 
 
 .agenda-overview {
diff --git a/app/style/Balance.less b/app/style/Balance.less
new file mode 100644
index 0000000000..d526df9892
--- /dev/null
+++ b/app/style/Balance.less
@@ -0,0 +1,14 @@
+@import (reference) "./main.less";
+
+.balance-base {
+    font-size: 1em;
+    font-family: Inconsolata, monospace;
+}
+
+.balance-small {
+    font-size: 0.8em;
+}
+
+.balance-block {
+    display: block;
+}
diff --git a/app/components/fonts.css b/app/style/Fonts.less
similarity index 56%
rename from app/components/fonts.css
rename to app/style/Fonts.less
index 42ddf8af5c..ee42920ab0 100644
--- a/app/components/fonts.css
+++ b/app/style/Fonts.less
@@ -1,53 +1,56 @@
 /* Inconsolata - Source Sans Pro */
+
+@font-root: '../style/fonts';
+
 @font-face {
   font-family: 'Inconsolata';
   font-weight: 700;
-  src: url('../fonts/Inconsolata-Bold.ttf'); 
+  src: url('@{font-root}/Inconsolata-Bold.ttf');
 }
 @font-face {
   font-family: 'Inconsolata';
   font-weight: 400;
-  src: url('../fonts/Inconsolata-Regular.ttf');
+  src: url('@{font-root}/Inconsolata-Regular.ttf');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 300;
-  src: url('../fonts/SourceSansPro-Light.ttf'); 
+  src: url('@{font-root}/SourceSansPro-Light.ttf');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 300;
   font-style: italic;
-  src: url('../fonts/SourceSansPro-LightItalic.ttf'); 
+  src: url('@{font-root}/SourceSansPro-LightItalic.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
-  src: url('../fonts/SourceSansPro-Regular.ttf'); 
+  src: url('@{font-root}/SourceSansPro-Regular.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
-  src: url('../fonts/SourceSansPro-Italic.ttf'); 
+  src: url('@{font-root}/SourceSansPro-Italic.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 700;
-  src: url('../fonts/SourceSansPro-Bold.ttf'); 
+  src: url('@{font-root}/SourceSansPro-Bold.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 700;
   font-style: italic;
-  src: url('../fonts/SourceSansPro-BoldItalic.ttf'); 
+  src: url('@{font-root}/SourceSansPro-BoldItalic.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 600;
-  src: url('../fonts/SourceSansPro-SemiBold.ttf'); 
+  src: url('@{font-root}/SourceSansPro-SemiBold.ttf'); 
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-weight: 600;
   font-style: italic;
-  src: url('../fonts/SourceSansPro-SemiBoldItalic.ttf'); 
+  src: url('@{font-root}/SourceSansPro-SemiBoldItalic.ttf'); 
 }
\ No newline at end of file
diff --git a/app/style/Global.less b/app/style/Global.less
new file mode 100644
index 0000000000..e94178e209
--- /dev/null
+++ b/app/style/Global.less
@@ -0,0 +1,16 @@
+/********
+ * Global defitions embedded on app.html
+ *******/
+@import (reference) 'main.less';
+
+body.decrediton {
+    font-family: 'Source Sans Pro', sans-serif;
+    color: #333;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    margin: 0px;
+    min-height: 100%;
+    background-color: #FFF;
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/app/style/Help.less b/app/style/Help.less
new file mode 100644
index 0000000000..7faa910ebb
--- /dev/null
+++ b/app/style/Help.less
@@ -0,0 +1,30 @@
+@import (reference) "./main.less";
+
+.help-body {
+    position: fixed;
+    left: 0px;
+    top: 50%;
+    right: 0px;
+    display: block;
+    overflow: hidden;
+    width: 1178px;
+    height: 770px;
+    margin-top: -385px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #FFF;
+} 
+
+.help-view {
+    width: 880px;
+    height: 100%;
+    float: right;
+    background-color: #f3f6f6;
+}
+
+.help-content {
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+
diff --git a/app/style/HistoryPage.less b/app/style/HistoryPage.less
index fa0bd8e0ae..21f84d80a2 100644
--- a/app/style/HistoryPage.less
+++ b/app/style/HistoryPage.less
@@ -1,7 +1,5 @@
 @import (reference) "./main.less";
-
-@arrow-down-mid-blue-icon: url(../components/icons/arrow-down-mid-blue.svg);
-@arrow-down-key-blue-icon: url(../components/icons/arrow-down-key-blue.svg);
+@import (reference) "./Icons.less";
 
 
 .history-body {
diff --git a/app/style/HomePage.less b/app/style/HomePage.less
index 75c3b5dfa0..93e863459a 100644
--- a/app/style/HomePage.less
+++ b/app/style/HomePage.less
@@ -1,6 +1,5 @@
 @import (reference) "./main.less";
-
-@search-icon: url(../components/icons/search.svg);
+@import (reference) "./Icons.less";
 
 
 .home-body {
diff --git a/app/style/Icons.less b/app/style/Icons.less
new file mode 100644
index 0000000000..bfa1220497
--- /dev/null
+++ b/app/style/Icons.less
@@ -0,0 +1,56 @@
+
+@icon-root: '../style/icons';
+
+@account-rename-icon: url('@{icon-root}/account-rename.svg');
+@accounts-button-hover-icon: url('@{icon-root}/wallet-blue.svg');
+@accounts-button-icon: url('@{icon-root}/wallet-gray.svg');
+@add-icon: url('@{icon-root}/add.svg');
+@agenda-card-kebab-disabled: url('@{icon-root}/tickets-agenda-card-kebab-disabled.svg');
+@agenda-card-kebab-hover: url('@{icon-root}/tickets-agenda-card-kebab-hover.svg');
+@agenda-card-kebab: url('@{icon-root}/tickets-agenda-card-kebab.svg');
+@agenda-close-icon: url('@{icon-root}/tickets-agenda-close.svg');
+@agenda-indicator-finished: url('@{icon-root}/indicator-finished.svg');
+@agenda-indicator-pending: url('@{icon-root}/indicator-pending.svg');
+@agenda-stripe: url('@{icon-root}/stripe.svg');
+@arrow-down-key-blue-icon: url('@{icon-root}/arrow-down-key-blue.svg');
+@arrow-down-mid-blue-icon: url('@{icon-root}/arrow-down-mid-blue.svg');
+@arrow-right-blue-icon: url('@{icon-root}/arrow-right-key-blue.svg');
+@arrow-right-gray-icon: url('@{icon-root}/arrow-right-gray.svg');
+@arrow-right-key-blue-icon: url('@{icon-root}/arrow-right-key-blue.svg');
+@arrow-up-key-blue-icon: url('@{icon-root}/arrow-up-key-blue.svg');
+@arrow-up-light-blue-icon: url('@{icon-root}/arrow-up-light-blue.svg');
+@arrow-up-turquiose-icon: url('@{icon-root}/arrow-up-turquiose.svg');
+@balance-to-maintain-icon: url('@{icon-root}/balance-to-maintain.svg');
+@copy-to-clipboard-hover-icon: url('@{icon-root}/copy-to-clipboard-blue.svg');
+@copy-to-clipboard-icon: url('@{icon-root}/copy-to-clipboard-gray.svg');
+@delete-icon: url('@{icon-root}/delete.svg');
+@expiry-icon: url('@{icon-root}/expiry.svg');
+@fee-address-icon: url('@{icon-root}/pool-fee-address.svg');
+@help-link-icon: @menu-link-icon;
+@hide-account-icon: url('@{icon-root}/account-eye-hide.svg');
+@indicator-confirmed-icon: url('@{icon-root}/indicator-confirmed.svg');
+@indicator-pending-icon: url('@{icon-root}/indicator-pending.svg');
+@logo: url('@{icon-root}/logo.svg');
+@manage-pools-icon: url('@{icon-root}/tickets-manage-stakepools.svg');
+@max-fee-icon: url('@{icon-root}/max-fee.svg');
+@max-per-block-icon: url('@{icon-root}/max-per-block.svg');
+@max-price-absolute-icon: url('@{icon-root}/max-price-absolute.svg');
+@max-price-relative-icon: url('@{icon-root}/max-price-relative.svg');
+@menu-link-icon: url('@{icon-root}/menu-link-left-color.png');
+@menu-logo: url('@{icon-root}/menu-logo.svg');
+@minus-big-icon: url('@{icon-root}/minus-big.svg');
+@minus-small-icon: url('@{icon-root}/minus-small.svg');
+@plus-big-icon: url('@{icon-root}/plus-big.svg');
+@plus-small-icon: url('@{icon-root}/plus-small.svg');
+@pool-fee-icon: url('@{icon-root}/pool-fees.svg');
+@search-icon: url('@{icon-root}/search.svg');
+@show-account-icon: url('@{icon-root}/account-eye-open.svg');
+@split-fee-icon: url('@{icon-root}/split-fee.svg');
+@stake-pool-icon: url('@{icon-root}/stake-pool.svg');
+@stakeySprites: url('@{icon-root}/stakeySprites.png');
+@ticket-address-icon: url('@{icon-root}/voting-address.svg');
+@ticket-small-icon: url('@{icon-root}/tickets-ticket.svg');
+@tickets-cogs-opened-icon: url('@{icon-root}/tickets-cogs-opened.svg');
+@tickets-cogs-closed-icon: url('@{icon-root}/tickets-cogs-closed.svg');
+@tickets-info-icon: url('@{icon-root}/tickets-info.svg');
+@wallet-gray-icon: url('@{icon-root}/wallet-gray.svg');
diff --git a/app/style/Loading.less b/app/style/Loading.less
index 4b3b4781bc..4463f00a32 100644
--- a/app/style/Loading.less
+++ b/app/style/Loading.less
@@ -1,6 +1,6 @@
 @import (reference) "./main.less";
+@import (reference) "./Icons.less";
 
-@logo: url(../components/icons/logo.svg);
 
 @keyframes spin {
     30% {transform: rotate(182deg);}
diff --git a/app/style/MiscComponents.less b/app/style/MiscComponents.less
index 100e1f880c..53f7d257df 100644
--- a/app/style/MiscComponents.less
+++ b/app/style/MiscComponents.less
@@ -1,16 +1,5 @@
 @import (reference) "./main.less";
-
-@accounts-button-icon: url(../components/icons/wallet-gray.svg);
-@accounts-button-hover-icon: url(../components/icons/wallet-blue.svg);
-@copy-to-clipboard-icon: url(../components/icons/copy-to-clipboard-gray.svg);
-@copy-to-clipboard-hover-icon: url(../components/icons/copy-to-clipboard-blue.svg);
-@menu-link-icon: url(../components/icons/menu-link-left-color.png);
-@help-link-icon: @menu-link-icon;
-@manage-pools-icon: url(../components/icons/tickets-manage-stakepools.svg);
-@tickets-cogs-opened-icon: url(../components/icons/tickets-cogs-opened.svg);
-@tickets-cogs-closed-icon: url(../components/icons/tickets-cogs-closed.svg);
-@tickets-info-icon: url(../components/icons/tickets-info.svg);
-
+@import (reference) "./Icons.less";
 
 .accounts-button-icon {
     display: inline-block;
diff --git a/app/style/NumTicketsInput.less b/app/style/NumTicketsInput.less
index 589b6c65f2..5354244ba2 100644
--- a/app/style/NumTicketsInput.less
+++ b/app/style/NumTicketsInput.less
@@ -1,7 +1,5 @@
 @import (reference) "./main.less";
-
-@arrow-up-key-blue: url(../components/icons/arrow-up-key-blue.svg);
-@arrow-down-key-blue: url(../components/icons/arrow-down-key-blue.svg);
+@import (reference) "./Icons.less";
 
 
 .num-tickets-input-area {
@@ -60,10 +58,10 @@
     background-repeat: no-repeat;
 }
 .num-tickets-more {
-    background-image: @arrow-up-key-blue;
+    background-image: @arrow-up-key-blue-icon;
 }
 .num-tickets-less {
-    background-image: @arrow-down-key-blue;
+    background-image: @arrow-down-key-blue-icon;
 }
 .num-tickets-more:hover,
 .num-tickets-less:hover {
diff --git a/app/components/react-select.global.css b/app/style/ReactSelectGlobal.less
similarity index 100%
rename from app/components/react-select.global.css
rename to app/style/ReactSelectGlobal.less
diff --git a/app/style/ReceivePage.less b/app/style/ReceivePage.less
index 9a682bc67c..b0de0cd635 100644
--- a/app/style/ReceivePage.less
+++ b/app/style/ReceivePage.less
@@ -1,8 +1,5 @@
 @import (reference) "./main.less";
-
-@plus-big-icon: url(../components/icons/plus-big.svg);
-@wallet-gray-icon: url(../components/icons/wallet-gray.svg);
-
+@import (reference) "./Icons.less";
 
 .receive-body {
     position: fixed;
diff --git a/app/style/SendPage.less b/app/style/SendPage.less
index bbc0620575..e3d717769e 100644
--- a/app/style/SendPage.less
+++ b/app/style/SendPage.less
@@ -1,15 +1,5 @@
 @import (reference) "./main.less";
-
-@add-icon: url(../components/icons/add.svg);
-@delete-icon: url(../components/icons/delete.svg);
-@minus-big-icon: url(../components/icons/minus-big.svg);
-@wallet-gray-icon: url(../components/icons/wallet-gray.svg);
-@arrow-down-mid-blue: url(../components/icons/arrow-down-mid-blue.svg);
-@arrow-down-key-blue: url(../components/icons/arrow-down-key-blue.svg);
-@minus-big-icon: url(../components/icons/minus-big.svg);
-@minus-big-icon: url(../components/icons/minus-big.svg);
-@minus-big-icon: url(../components/icons/minus-big.svg);
-
+@import (reference) "./Icons.less";
 
 .send-body {
   position: fixed;
@@ -314,14 +304,14 @@
   float: left;
   border-bottom: 1px solid #2971ff;
   background-color: #fff;
-  background-image: @arrow-down-mid-blue;
+  background-image: @arrow-down-mid-blue-icon;
   background-position: 100% 50%;
   background-size: 10px;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 .select-accounts-send:hover {
-  background-image: @arrow-down-key-blue;
+  background-image: @arrow-down-key-blue-icon;
   background-size: 10px;
 }
 
diff --git a/app/style/Settings.less b/app/style/Settings.less
new file mode 100644
index 0000000000..88428aa634
--- /dev/null
+++ b/app/style/Settings.less
@@ -0,0 +1,90 @@
+@import (reference) "./main.less";
+
+.settings-body {
+    position: fixed;
+    left: 0px;
+    top: 50%;
+    right: 0px;
+    display: block;
+    overflow: hidden;
+    width: 1178px;
+    height: 770px;
+    margin-top: -385px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+}
+.settings-view {
+    width: 880px;
+    height: 100%;
+    float: right;
+    background-color: #f3f6f6;
+}
+.settings-content {
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+.settings-content-blur {
+    filter: blur(6px);
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+.settings-restart {
+    font-weight: bold;
+}
+.settings-save-button {
+    margin-top: 10px;
+    margin-right: 27px;
+    float: right;
+}
+.settings-row {
+    width: 100%;
+    height: 50px;
+    padding-top: 15px;
+    float: left;
+    border-bottom: 1px black solid;
+}
+.settings-label {
+    width: 50%;
+    padding-left: 10px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 20px;
+    text-align: left;
+}
+.settings-input {
+    width: 45%;
+    padding-right: 10px;
+    float: left;
+    height: 100%;
+    font-size: 20px;
+    padding-top: 5px;
+    text-align: right;
+}
+.settings-input-select {
+    display: block;
+    overflow: hidden;
+    float: right;
+    color: rgb(12, 30, 62);
+    font-size: 19px;
+}
+.settings-input-select-option {
+    overflow: hidden;
+    height: 34px;
+    margin-right: 20px;
+    padding-top: 5px;
+    padding-left: 10px;
+    color: rgb(41, 113, 255);
+    font-size: 19px;
+}
+.settings-input-error {
+    width: 290px;
+    float: right;
+    height: 100%;
+    text-align: left;
+    color: red;
+    padding-top: 5px;
+}
\ No newline at end of file
diff --git a/app/style/SideBar.less b/app/style/SideBar.less
index 739a5127ee..8c00084c8d 100644
--- a/app/style/SideBar.less
+++ b/app/style/SideBar.less
@@ -1,8 +1,5 @@
 @import (reference) "./main.less";
-
-@menu-logo: url(../components/icons/menu-logo.svg);
-@arrow-up-light-blue-icon: url(../components/icons/arrow-up-light-blue.svg);
-
+@import (reference) "./Icons.less";
 
 .sidebar-menu {
     position: relative;
diff --git a/app/style/Snackbar.less b/app/style/Snackbar.less
new file mode 100644
index 0000000000..4426f3c19a
--- /dev/null
+++ b/app/style/Snackbar.less
@@ -0,0 +1,39 @@
+@import (reference) "./main.less";
+@import (reference) "./Icons.less";
+
+.snackbar-stake {
+    height: 78px;
+    padding: 0px 50px;
+    background-color: rgba(12, 30, 62, 0.5);
+    background-image: @ticket-small-icon;
+    background-position: 15px 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+}
+.snackbar-receive {
+    height: 78px;
+    padding: 0px 50px;
+    background-color: rgba(12, 30, 62, 0.5);
+    background-image: @plus-big-icon;
+    background-position: 15px 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+}
+.snackbar-send { 
+    height: 78px;
+    padding: 0px 50px;
+    background-color: rgba(12, 30, 62, 0.5);
+    background-image: @minus-big-icon;
+    background-position: 15px 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+}
+.snackbar-transfer { 
+    height: 78px;
+    padding: 0px 50px;
+    background-color: rgba(12, 30, 62, 0.5);
+    background-image: @wallet-gray-icon;
+    background-position: 15px 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/app/style/StakePool.less b/app/style/StakePool.less
index 851c4eb7fc..e9649ddad5 100644
--- a/app/style/StakePool.less
+++ b/app/style/StakePool.less
@@ -1,4 +1,5 @@
 @import (reference) "./main.less";
+@import (reference) "./Icons.less";
 
 .autobuyer-switch {
     width: 85px;
@@ -80,4 +81,1229 @@
     color: #fff;
     font-size: 13px;
     line-height: 14px;
+}
+
+.stakepool-body {
+    position: fixed;
+    left: 0px;
+    top: 50%;
+    right: 0px;
+    display: block;
+    overflow: hidden;
+    width: 1178px;
+    height: 770px;
+    margin-top: -385px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+}
+.stakepool-view {
+    width: 880px;
+    height: 100%;
+    float: right;
+    background-color: #f3f6f6;
+}
+.stakepool-view-notification-error {
+    margin-top: 20px;
+    display: inline-block;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 7px 20px 7px 7px;
+    border-radius: 5px;
+    background-color: #fd714b;
+    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
+    color: #fff;
+    font-size: 13px;
+    text-align: center;
+}
+.stakepool-view-notification-success {
+    margin-top: 20px;
+    display: inline-block;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 7px 20px 7px 7px;
+    border-radius: 5px;
+    background-color: #41bf53;
+    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
+    color: #fff;
+    font-size: 13px;
+    text-align: center;
+    text-decoration: none;
+}
+.stakepool-content-nest-address-delete-icon {
+    width: 26px;
+    height: 19px;
+    float: left;
+    background-image: @delete-icon;
+    background-position: 50% 50%;
+    background-size: 8px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.85;
+    }
+}
+.stakepool-transition1 {
+    transition: all 100ms ease-in-out;
+}
+.stakepool-header-meta-send {
+    height: 54px;
+    width: 480px;
+    padding-left: 50px;
+    color: #0c1e3e;
+    font-size: 14px;
+}
+.stakepool-content {
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+.stakepool-content-blur {
+    filter: blur(6px);
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+.stakepool-content-voting-gui {
+    overflow: auto;
+    height: 556px;
+    padding: 0px 60px 10px 80px;
+}
+.stakepool-content-purchase-ticket-view-blur {
+    filter: blur(6px);
+    overflow: auto;
+    height: 565px;
+    padding: 20px 60px 20px 80px;
+}
+.stakepool-content-purchase-ticket-view {
+    overflow: auto;
+    height: 565px;
+    padding: 20px 60px 20px 80px;
+}
+.stakepool-instructions {
+    font-size: 13px;
+}
+.stakepool-content-nest-purchase-ticket-form {
+    width: 100%;
+    height: 100%;
+    padding-top: 2px;
+    padding-left: 10px;
+    border-style: none;
+    color: #2971ff;
+    border-bottom: 1px solid;
+    font-size: 15px;
+    cursor: text;
+    &:focus {
+      color: #2971ff;
+    }
+}
+.stakepool-content-nest-purchase-ticket-form-disabled {
+    width: 100%;
+    height: 100%;
+    padding-top: 2px;
+    padding-left: 10px;
+    border-style: none;
+    color: #2971ff;
+    font-size: 15px;
+    cursor: text;
+    &:focus {
+      color: #2971ff;
+    }
+}
+.stakepool-content-nest-send {
+    padding-top: 1px;
+    background-color: #fff;
+}
+.stakepool-content-nest-delete-address {
+    width: 625px;
+    height: 54px;
+    padding-top: 10px;
+    padding-left: 116px;
+    float: left;
+}
+.stakepool-content-nest-prefix-configured {
+    width: 200px;
+    padding-right: 15px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 19px;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-content-nest-stake-pool {
+    border-top: 1px solid;
+    height: 185px;
+    position: relative;
+    border-bottom: 1px solid;
+    float: left;
+}
+.stakepool-content-nest-balance {
+    border-top: 1px solid;
+    height: 260px;
+    position: relative;
+    border-bottom: 1px solid;
+    float: left;
+}
+.stakepool-content-nest-settings {
+    width: 100%;
+    height: 20px;
+    margin-top: 20px;
+    float: left;
+}
+.stakepool-content-nest-balance-overview {
+    width: 100%;
+    height: 25px;
+    margin-top: 10px;
+    float: left;
+}
+.stakepool-content-nest-prefix-settings {
+    width: 125px;
+    padding-right: 15px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-content-nest-prefix-balance-overview {
+    width: 245px;
+    padding-right: 15px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-content-nest-settings-bottom {
+    width: 100%;
+    height: 20px;
+    margin-top: 30px;
+    float: left;
+}
+.stakepool-content-nest-balance-overview-bottom {
+    width: 100%;
+    height: 20px;
+    margin-top: 30px;
+    float: left;
+}
+.stakepool-content-nest-content-settings {
+    position: relative;
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 575px;
+    height: 30px;
+    float: left;
+    font-size: 13px;
+    padding-top: 2px;
+}
+.stakepool-content-nest-content-balance-overview {
+    position: relative;
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 465px;
+    height: 20px;
+    float: left;
+    font-size: 13px;
+    padding-top: 2px;
+}
+.stakepool-content-nest-prefix-send {
+    width: 100px;
+    padding-right: 15px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 19px;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-unconfigured-select {
+    width: 350px;
+    float: left;
+    font-size: 16px;
+    padding-left: 10px;
+}
+.stakepool-content-nest-prefix-confirm {
+    width: 230px;
+    padding-right: 15px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 19px;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-content-nest-from-address {
+    width: 100%;
+    height: 54px;
+    padding-top: 10px;
+    float: left;
+}
+.stakepool-content-nest-api-key-instructions {
+    width: 600px;
+    height: 285px;
+    padding-left: 30px;
+    float: left;
+}
+.stakepool-content-nest-api-key {
+    position: relative;
+    padding-left: 65px;
+    width: 600px;
+    height: 34px;
+    float: left;
+    font-size: 13px;
+}
+.stakepool-content-nest-to-address {
+    width: 100%;
+    height: 54px;
+    padding-top: 10px;
+    float: left;
+}
+.stakepool-content-nest-address-hash-to {
+    width: 100%;
+    height: 100%;
+    padding-top: 4px;
+    padding-left: 10px;
+    border-style: none;
+    color: #2971ff;
+    font-size: 13px;
+    cursor: text;
+    &:focus {
+      color: #2971ff;
+    }
+}
+.stakepool-content-nest-address-hash-block {
+    position: relative;
+    width: 600px;
+    height: 34px;
+    float: left;
+    font-size: 13px;
+}
+.stakepool-content-nest-address-hash-block-confirm {
+    position: relative;
+    overflow: hidden;
+    width: 300px;
+    height: 34px;
+    padding-top: 7px;
+    float: left;
+    font-size: 17px;
+}
+.stakepool-content-nest-gradient {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 40px;
+    height: 100%;
+    background-image: linear-gradient(90deg, transparent, #fff 80%);
+}
+.stakepool-select-accounts-send {
+    width: 300px;
+    position: relative;
+    z-index: 3;
+    overflow: visible;
+    height: 34px;
+    min-width: 300px;
+    float: left;
+    border-bottom: 1px solid #2971ff;
+    background-color: #fff;
+    background-image: @arrow-down-mid-blue-icon;
+    background-position: 100% 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &:hover {
+      background-image: @arrow-down-key-blue-icon;
+      background-size: 10px;
+    }
+}
+.stakepool-select-account {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    color: #0c1e3e;
+    font-size: 19px;
+    &:hover {
+      height: auto;
+    }
+}
+.stakepool-select-account-n-first {
+    overflow: hidden;
+    height: 34px;
+    margin-right: 20px;
+    padding-top: 5px;
+    padding-left: 10px;
+    color: #2971ff;
+    font-size: 19px;
+}
+.stakepool-select-account-n-text-send {
+    width: 200%;
+    padding-top: 1px;
+    font-size: 13px;
+}
+.stakepool-select-account-n-amount {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    margin-right: 20px;
+    padding-top: 7px;
+    padding-left: 40px;
+    background-image: linear-gradient(90deg, transparent, #fff 28%);
+    font-family: inconsolata, monospace;
+    color: #596d81;
+    font-size: 11px;
+    font-weight: 400;
+    text-align: right;
+}
+.stakepool-select-account-n-amount-bold {
+    font-family: inconsolata, monospace;
+    font-weight: 700;
+}
+.stakepool-select-account-n-nest-send {
+    font-size: 13px;
+    overflow: auto;
+    height: auto;
+    max-height: 413px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #a9b4bf;
+    background-color: #fff;
+}
+.stakepool-select-account-n-gradient {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 40px;
+    height: 100%;
+    background-image: linear-gradient(90deg, transparent, #fff 75%);
+}
+.stakepool-select-account-n {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 18px;
+    padding-bottom: 18px;
+    padding-left: 10px;
+    float: left;
+    &:hover {
+      color: #2971ff;
+    }
+}
+.stakepool-select-account-n-text {
+    width: 200%;
+}
+.stakepool-highlight-text-neon-green {
+    color: #2ed8a3;
+}
+.stakepool-highligh-text-orange {
+    color: #fd714b;
+}
+.stakepool-select-voting-preferences {
+    display: block;
+    float: right;
+    overflow: hidden;
+    height: 100%;
+    padding-top: 3px;
+    color: #0c1e3e;
+    &:hover {
+      height: auto;
+    }
+}
+.stakepool-select-purchase-tickets {
+    display: block;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    padding-top: 3px;
+    color: #0c1e3e;
+    &:hover {
+      height: auto;
+    }
+}
+.stakepool-select-purchase-tickets-n-first {
+    overflow: hidden;
+    height: 34px;
+    margin-right: 20px;
+    padding-top: 5px;
+    padding-left: 10px;
+    color: #2971ff;
+    font-size: 19px;
+}
+.stakepool-select-purchase-tickets-n-text-send {
+    width: 200%;
+    padding-top: 1px;
+    font-size: 13px;
+}
+.stakepool-select-purchase-tickets-n-amount {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    margin-right: 20px;
+    padding-top: 7px;
+    padding-left: 40px;
+    background-image: linear-gradient(90deg, transparent, #fff 28%);
+    font-family: inconsolata, monospace;
+    color: #596d81;
+    font-size: 11px;
+    font-weight: 400;
+    text-align: right;
+}
+.stakepool-select-purchase-tickets-n-amount-bold {
+    font-family: inconsolata, monospace;
+    font-weight: 700;
+}
+.stakepool-select-purchase-tickets-n-nest-send {
+    font-size: 13px;
+    overflow: auto;
+    height: auto;
+    max-height: 413px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #a9b4bf;
+    background-color: #fff;
+}
+.stakepool-select-purchase-tickets-n-gradient {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 40px;
+    height: 100%;
+    background-image: linear-gradient(90deg, transparent, #fff 75%);
+}
+.stakepool-select-purchase-tickets-n {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 18px;
+    padding-bottom: 18px;
+    padding-left: 10px;
+    float: left;
+    &:hover {
+      color: #2971ff;
+    }
+}
+.stakepool-select-purchase-tickets-n-text {
+    width: 200%;
+}
+.stakepool-input-form {
+    position: relative;
+    width: 100%;
+    height: 25px;
+}
+.stakepool-input-form-purchase-ticket {
+    position: relative;
+    width: 100%;
+    height: 25px;
+    padding-top: 1px;
+}
+.stakepool-content-nest-address-amount {
+    display: block;
+    height: 34px;
+    float: right;
+}
+.stakepool-content-nest-address-amount-sum-and-currency {
+    position: relative;
+    overflow: hidden;
+    width: 140px;
+    height: 100%;
+    margin-right: 20px;
+    float: right;
+    border-bottom: 1px solid #a9b4bf;
+    color: #0c1e3e;
+    text-align: right;
+}
+.stakepool-content-nest-address-amount-sum-gradient {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    display: inline-block;
+    width: 37px;
+    height: 100%;
+    padding-top: 9px;
+    padding-right: 10px;
+    background-color: #fff;
+    font-family: inconsolata, monospace;
+    font-size: 13px;
+    text-transform: uppercase;
+}
+.stakepool-content-nest-address-amount-sum {
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-size: 19px;
+    font-weight: 700;
+}
+.stakepool-content-nest-to-address-amount-sum-number-format-small {
+    font-size: 13px;
+}
+.stakepool-content-nest-address-amount-sum-number-format-small {
+    font-size: 13px;
+}
+.stakepool-content-send {
+    margin-top: 20px;
+}
+.stakepool-content-send-section {
+    display: block;
+    width: 91%;
+    height: 22px;
+    padding-left: 30px;
+    float: left;
+    color: #0c1e3e;
+}
+.stakepool-content-send-section-checkbox-text {
+    height: 100%;
+    padding-top: 1px;
+    padding-left: 5px;
+    float: left;
+    text-transform: capitalize;
+}
+.stakepool-content-send-section-amount {
+    width: 160px;
+    height: 100%;
+    padding-top: 1px;
+    padding-right: 30px;
+    float: right;
+    font-family: inconsolata, monospace;
+    font-size: 13px;
+    text-align: right;
+}
+.stakepool-content-send-section-description {
+    height: 100%;
+    padding-top: 1px;
+    padding-right: 20px;
+    float: right;
+    color: #596d81;
+    font-size: 13px;
+}
+.stakepool-content-send-section-amount-currency {
+    padding-left: 5px;
+}
+.stakepool-content-purchase-button {
+    margin-top: 8px;
+    margin-left: 8px;
+    float: left;
+}
+.stakepool-content-revoke-button {
+    margin-top: 8px;
+    margin-right: 8px;
+    float: right;
+}
+.stakepool-content-import-script-button {
+    margin-top: 8px;
+    margin-right: 8px;
+    float: right;
+}
+.stakepool-show-advanced {
+    width: 300px;
+    position: relative;
+    z-index: 3;
+    overflow: visible;
+    height: 34px;
+    min-width: 300px;
+    float: left;
+    border-bottom: 1px solid #2971ff;
+    background-color: #fff;
+    background-image: @arrow-down-mid-blue-icon;
+    background-position: 100% 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &:hover {
+      background-image: @arrow-down-key-blue-icon;
+      background-size: 10px;
+    }
+}
+.stakepool-hide-advanced {
+    width: 300px;
+    position: relative;
+    z-index: 3;
+    overflow: visible;
+    height: 34px;
+    min-width: 300px;
+    float: left;
+    border-bottom: 1px solid #2971ff;
+    background-color: #fff;
+    background-image: @arrow-up-light-blue-icon;
+    background-position: 100% 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &:hover {
+      background-image: @arrow-up-turquiose-icon;
+      background-size: 10px;
+    }
+}
+.stakepool-select-area {
+    paddingTop: "4px"
+}
+.stakepool-auto-buyer-quick-bar-row {
+    width: 400px;
+    padding-left: 37px;
+    padding-top: 8px;
+    float: left;
+    position: relative;
+}
+
+/*
+  .switch.disabled-inactive {
+    background-color: #f3f6f6;
+    cursor: default;
+  }
+
+  .switch.disabled-inactive.transition0.automatic-purchase {
+    float: left;
+  }
+
+  .switch.enabled-inactive {
+    background-color: #f3f6f6;
+    cursor: default;
+  }
+
+  .switch.enabled-inactive.transition0.automatic-purchase {
+    float: left;
+  }
+  .switch-knob.disabled-inactive {
+    float: right;
+    background-color: #e7eaed;
+  }
+
+  .switch-knob.enabled-inactive {
+    background-color: #e7eaed;
+  }
+  */
+
+.stakepool-auto-buyer-label {
+    width: 75px;
+    display: block;
+    padding-top: 13px;
+    padding-left: 20px;
+    float: left;
+    color: #0c1e3e;
+    font-size: 19px;
+    text-transform: capitalize;
+}
+.stakepool-auto-buyer-show-advanced-area {
+    float: right;
+    padding-top: 13px;
+}
+.stakepool-flex-height-auto-buyer-hidden {
+    padding-top: 1px;
+    background-color: #fff;
+    height: 54px;
+    width: 740px;
+    float: left;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transition: all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s;
+}
+.stakepool-flex-height-auto-buyer-shown {
+    padding-top: 1px;
+    background-color: #fff;
+    height: 258px;
+    width: 740px;
+    float: left;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.stakepool-auto-buyer-row {
+    width: 100%;
+    height: 54px;
+    float: left;
+}
+.stakepool-purchase-ticket-quick-bar-row {
+    height: 36px;
+    float: left;
+    padding-top: 5px;
+    padding-right: 20px;
+    position: relative;
+}
+.stakepool-quick-bar-row-label {
+    width: 120px;
+    position: relative;
+    padding-top: 6px;
+    float: left;
+    font-size: 13px;
+    padding-right: 10px;
+    color: #0c1e3e;
+    height: 100%;
+    text-align: right;
+    text-transform: capitalize;
+}
+.stakepool-auto-buyer-icon-areas {
+    margin-top: 8px;
+    padding-right: 10px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-auto-buyer-icon-areas-expand {
+    margin-top: 8px;
+    width: 140px;
+    text-align: right;
+    padding-right: 10px;
+    padding-left: 10px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-balance-to-maintain-icon {
+    display: block;
+    background-image: @balance-to-maintain-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 10px;
+    float: left;
+}
+.stakepool-max-fee-icon {
+    display: block;
+    background-image: @max-fee-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 10px;
+    float: left;
+}
+.stakepool-max-price-absolute-icon {
+    display: block;
+    background-image: @max-price-absolute-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 10px;
+    float: left;
+}
+.stakepool-max-price-relative-icon {
+    display: block;
+    background-image: @max-price-relative-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 10px;
+    float: left;
+}
+.stakepool-max-per-block-icon {
+    display: block;
+    background-image: @max-per-block-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 10px;
+    float: left;
+}
+.stakepool-icon {
+    display: block;
+    background-image: @stake-pool-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-expiry-icon {
+    background-image: @expiry-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    display: block;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-fee-icon {
+    background-image: @split-fee-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    display: block;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-ticket-address-icon {
+    background-image: @ticket-address-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    display: block;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-fee-address-icon {
+    background-image: @fee-address-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    display: block;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-pool-fee-icon {
+    background-image: @pool-fee-icon;
+    background-position: 0px 50%;
+    background-size: 16px;
+    background-repeat: no-repeat;
+    display: block;
+    height: 16px;
+    min-width: 20px;
+    margin-top: 8px;
+    padding-right: 18px;
+    padding-left: 20px;
+    float: left;
+    font-family: inconsolata, monospace;
+    color: #0c1e3e;
+    font-size: 11px;
+    line-height: 17px;
+}
+.stakepool-stake-info-area {
+    padding-top: 1px;
+    background-color: rgb(255, 255, 255);
+    height: 130px;
+    width: 740px;
+    float: left;
+    margin-bottom: 10px;
+}
+.stakepool-stake-info-area-small {
+    padding-top: 1px;
+    background-color: rgb(255, 255, 255);
+    height: 25px;
+    width: 740px;
+    float: left;
+    margin-bottom: 10px;
+    transition: all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s;
+}
+.stakepool-stake-info-row-small {
+    width: 33%;
+    float: left;
+}
+.stakepool-stake-info-row-small-right {
+    width: 34%;
+    float: left;
+}
+.stakepool-stake-info-row {
+    width: 100%;
+    height: 25px;
+    float: left;
+    border-bottom: 1px #e7eaed solid;
+}
+.stakepool-stake-info-row-left {
+    width: 50%;
+    float: left;
+}
+.stakepool-stake-info-row-right {
+    width: 50%;
+    float: right;
+}
+.stakepool-stake-info-label {
+    width: 152px;
+    padding-right: 15px;
+    padding-left: 5px;
+    float: left;
+    height: 100%;
+    padding-top: 2px;
+    font-size: 14px;
+    text-align: right;
+}
+.stakepool-stake-info-value {
+    font-family: inconsolata, monospace;
+    float: left;
+    padding-top: 3px;
+}
+.stakepool-purchase-ticket-row {
+    width: 100%;
+    height: 45px;
+    padding-top: 2px;
+    float: left;
+    border-bottom: 1px #e7eaed solid;
+}
+.stakepool-purchase-ticket-row-thirds {
+    width: 33%;
+    float: left;
+}
+.stakepool-purchase-ticket-row-account-select {
+    width: 58%;
+    float: left;
+}
+.stakepool-purchase-ticket-account-select-label {
+    width: 86px;
+    padding-right: 15px;
+    padding-left: 5px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 16px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-row-num-tickets {
+    width: 42%;
+    float: left;
+}
+.stakepool-purchase-ticket-row-left {
+    width: 50%;
+    float: left;
+}
+.stakepool-purchase-ticket-row-right {
+    width: 50%;
+    float: right;
+}
+.stakepool-purchase-ticket-label {
+    width: 152px;
+    padding-right: 15px;
+    padding-left: 5px;
+    float: left;
+    height: 100%;
+    padding-top: 5px;
+    font-size: 16px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-input {
+    width: 283px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-input-select {
+    width: 283px;
+    float: left;
+    height: 100%;
+    font-size: 16px;
+    text-align: left;
+}
+.stakepool-purchase-ticket-num-select {
+    width: 85px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-num-input {
+    width: 146px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-thirds-input {
+    width: 53px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-address-input {
+    width: 331px;
+    float: left;
+    height: 100%;
+    font-size: 19px;
+    text-align: right;
+}
+.stakepool-purchase-ticket-input-buttons {
+    width: 90px;
+    float: right;
+    padding-top: 5px;
+    padding-left: 10px;
+}
+.stakepool-manage-pool-button-area {
+    float: left;
+    padding-top: 8px;
+    padding-left: 10px;
+}
+.stakepool-purchase-ticket-input-error {
+    float: right;
+    width: 200px;
+    text-align: left;
+    color: red;
+    font-size: 11px;
+    padding-top: 4px;
+}
+.stakepool-area-spacing {
+    float: left;
+    height: 25px;
+    width: 100%;
+}
+.stakepool-api-key-error {
+    padding-left: 70px;
+    text-align: left;
+    float: left;
+    color: red;
+}
+.stakepool-link {
+    color: #2971ff;
+    font-weight: bold;
+    cursor: pointer;
+}
+.stakepool-flex-height {
+    background-color: #fff;
+    float: left;
+}
+.stakepool-flex-height-balance-overview {
+    padding-top: 1px;
+    background-color: #fff;
+    height: 553px;
+    float: left;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.stakepool-flex-height-hidden {
+    padding-top: 1px;
+    background-color: #fff;
+    height: 116px;
+    width: 740px;
+    float: left;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transition: all 100ms cubic-bezier(0.86, 0, 0.07, 1) 0s;
+}
+.stakepool-purchase-ticket-buttons-area {
+    width: 740px;
+    float: left;
+}
+.stakepool-flex-height-shown {
+    padding-top: 1px;
+    background-color: #fff;
+    height: 288px;
+    width: 740px;
+    float: left;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.stakepool-loading {
+    margin-top: 110px;
+    margin-left: 268px;
+}
+.stakepool-select-accounts-purchase {
+    width: 300px;
+    position: relative;
+    z-index: 3;
+    overflow: visible;
+    height: 34px;
+    min-width: 300px;
+    float: left;
+    border-bottom: 1px solid #2971ff;
+    background-color: #fff;
+    background-image: @arrow-down-mid-blue-icon;
+    background-position: 100% 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &:hover {
+      background-image: @arrow-down-key-blue-icon;
+      background-size: 10px;
+    }
+}
+.stakepool-toggle {
+    font-family: source -sans -pro, sans-serif;
+    float: right;
+}
+.stakepool-content-title {
+    display: block;
+    height: 44px;
+    margin-right: auto;
+    margin-bottom: 10px;
+    margin-left: auto;
+    border-bottom: 1px solid transparent;
+    color: #596d81;
+    font-size: 27px;
+}
+.stakepool-content-title-text {
+    display: inline-block;
+    overflow: hidden;
+    width: 500px;
+    height: 100%;
+    padding-top: 13px;
+    padding-right: 20px;
+    padding-left: 20px;
+}
+.stakepool-voting-title-area {
+    display: block;
+    height: 20px;
+    width: 740px;
+    border-bottom: 1px solid transparent;
+    color: #596d81;
+    font-size: 20px;
+}
+.stakepool-voting-title-area-name {
+    font-size: 20px;
+    display: inline-block;
+    height: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    float: left;
+}
+.stakepool-voting-agenda-area {
+    width: 100%;
+    float: left;
+}
+.stakepool-no-agendas-message {
+    font-size: 25px;
+    padding-top: 200px;
+    padding-left: 150px;
+}
+.stakepool-hide-config {
+    float: right;
+    margin-top: 10px;
+}
+.stakepool-manage-stake-pools-button {
+    width: 150px;
+    padding: 7px 18px;
+    display: block;
 }
\ No newline at end of file
diff --git a/app/style/Stakey.less b/app/style/Stakey.less
index 14a63464cf..26a0e785db 100644
--- a/app/style/Stakey.less
+++ b/app/style/Stakey.less
@@ -1,7 +1,5 @@
 @import (reference) "./main.less";
-
-@stakeySprites: url(../components/icons/stakeySprites.png);
-
+@import (reference) "./Icons.less";
 
 .stakey {
   width: 256px;
diff --git a/app/style/TxDetails.less b/app/style/TxDetails.less
new file mode 100644
index 0000000000..51de5c2d87
--- /dev/null
+++ b/app/style/TxDetails.less
@@ -0,0 +1,283 @@
+@import (reference) "./main.less";
+@import (reference) "./Icons.less";
+
+.txdetails-view {
+    width: 880px;
+    height: 100%;
+    float: right;
+    background-color: #f3f6f6;
+}
+.txdetails-header {
+    padding-right: 80px;
+    padding-left: 100px;
+    background-color: #fff;
+}
+.txdetails-content {
+    overflow: auto;
+    height: 556px;
+    padding: 54px 60px 54px 80px;
+}
+.txdetails-header-top {
+    height: 106px;
+    padding-bottom: 20px;
+}
+.txdetails-header-title-overview {
+    height: 54px;
+    padding-top: 13px;
+    color: #596d81;
+    font-size: 27px;
+}
+.txdetails-header-meta-overview {
+    height: 54px;
+    padding-top: 5px;
+    font-family: inconsolata, monospace;
+    font-size: 53px;
+}
+.txdetails-content-title {
+    display: block;
+    height: 44px;
+    margin-right: auto;
+    margin-bottom: 10px;
+    margin-left: auto;
+    border-bottom: 1px solid transparent;
+    color: #596d81;
+    font-size: 27px;
+}
+.txdetails-content-nest {
+    padding-top: 1px;
+}
+.txdetails-indicator-pending {
+    display: inline-block;
+    padding: 5px 8px 5px 20px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 8px;
+    text-align: right;
+    text-transform: capitalize;
+    border-color: #2971ff;
+    background-image: @indicator-pending-icon;
+    background-position: 6px 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    color: #2971ff;
+}
+
+.txdetails-indicator-confirmed {
+    display: inline-block;
+    padding: 5px 8px 5px 20px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 8px;
+    text-align: right;
+    text-transform: capitalize;
+    border-color: #2ed8a3;
+    background-image: @indicator-confirmed-icon;
+    background-position: 6px 50%;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    color: #2ed8a3;
+}
+.txdetails-header-meta-stake-tx {
+    height: 38px;
+    padding-top: 16px;
+    padding-left: 50px;
+    background-image: @ticket-small-icon;
+    background-position: 0px 50%;
+    background-size: 30px;
+    background-repeat: no-repeat;
+    font-family: inconsolata, monospace;
+    font-size: 35px;
+    font-weight: 700;
+}
+.txdetails-header-meta-in {
+    height: 38px;
+    padding-top: 16px;
+    padding-left: 50px;
+    background-image: @plus-big-icon;
+    background-position: 0px 50%;
+    background-size: 30px;
+    background-repeat: no-repeat;
+    font-family: inconsolata, monospace;
+    font-size: 35px;
+    font-weight: 700;
+}
+.txdetails-header-meta-transfer {
+    height: 38px;
+    padding-top: 16px;
+    padding-left: 50px;
+    background-image: @wallet-gray-icon;
+    background-position: 0px 50%;
+    background-size: 30px;
+    background-repeat: no-repeat;
+    font-family: inconsolata, monospace;
+    font-size: 35px;
+    font-weight: 700;
+}
+.txdetails-header-meta-currency {
+    font-size: 19px;
+    font-weight: 400;
+}
+
+.txdetails-header-meta-time-and-date {
+    display: inline-block;
+    padding-top: 4px;
+    float: right;
+    font-family: source -sans -pro, sans-serif;
+    font-size: 19px;
+    font-weight: 400;
+}
+
+.txdetails-header-meta-out {
+    height: 38px;
+    padding-top: 16px;
+    padding-left: 50px;
+    background-image: @minus-big-icon;
+    background-position: 0px 50%;
+    background-size: 30px;
+    background-repeat: no-repeat;
+    font-family: inconsolata, monospace;
+    font-size: 35px;
+    font-weight: 700;
+}
+
+.txdetails-details {
+    padding-top: 18px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e7eaed;
+    font-size: 13px;
+    height: 100px;
+}
+
+.txdetails-top {
+    padding-top: 18px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e7eaed;
+    font-size: 13px;
+    height: 240px;
+}
+
+.txdetails-left {
+    width: 150px;
+    float: left;
+}
+
+.txdetails-right {
+    width: 570px;
+    float: right;
+}
+
+.txdetails-name {
+    display: block;
+    width: 160px;
+    height: 28px;
+    padding-top: 4px;
+    padding-right: 20px;
+    float: left;
+    clear: left;
+    font-size: 13px;
+    line-height: 19px;
+    text-align: right;
+}
+.txdetails-overview {
+    height: 100px;
+    width: 100%;
+    padding-left: 80px;
+}
+.txdetails-overview-title {
+    float: left;
+    height: 30px;
+    width: 100%;
+    font-size: 20px;
+    font-weight: 700;
+    border-top: 1px solid #e7eaed;
+    padding-top: 10px;
+}
+.txdetails-overview-title-created {
+    float: right;
+    width: 63%;
+}
+.txdetails-overview-title-consumed {
+    float: left;
+    width: 30%;
+}
+.txdetails-input-area {
+    float: left;
+    width: 30%;
+    height: 100px;
+    overflow: auto;
+    background-image: @arrow-right-key-blue-icon;
+    background-position: 100% 50%;
+    background-size: 15px;
+    background-repeat: no-repeat;
+    padding-right: 35px;
+}
+.txdetails-output-area {
+    float: right;
+    width: 56%;
+    height: 100px;
+    overflow: auto;
+    padding-right: 50px;
+}
+.txdetails-direction {
+    display: block;
+    width: 100%;
+    height: 28px;
+    padding-top: 4px;
+    padding-left: 80px;
+    float: left;
+    clear: left;
+    font-size: 20px;
+    line-height: 19px;
+    text-align: left;
+}
+.txdetails-value {
+    display: inline-block;
+    height: 28px;
+    padding-top: 9px;
+    float: left;
+    font-family: inconsolata, monospace;
+    line-height: 10px;
+    font-weight: 700;
+    text-align: left;
+}
+.txdetails-row {
+    display: inline-block;
+    height: 28px;
+    padding-top: 9px;
+    width: 100%;
+    float: left;
+    font-family: inconsolata, monospace;
+    line-height: 10px;
+    font-weight: 700;
+}
+.txdetails-address {
+    width: 50%;
+    float: left;
+    text-align: left;
+}
+.txdetails-amount {
+    width: 50%;
+    float: right;
+    text-align: right;
+}
+
+.txdetails-value-text {
+    font-weight: 400;
+}
+
+.txdetails-title {
+    width: 140px;
+    height: 28px;
+    padding-top: 4px;
+    color: #596d81;
+    font-size: 20px;
+    text-align: right;
+}
+
+.txdetails-last {
+    border-bottom: 0px none transparent;
+}
diff --git a/app/style/TxHistory.less b/app/style/TxHistory.less
index 9de69b5899..d366b2703d 100644
--- a/app/style/TxHistory.less
+++ b/app/style/TxHistory.less
@@ -1,14 +1,5 @@
 @import (reference) "./main.less";
-
-@indicator-pending-icon: url(../components/icons/indicator-pending.svg);
-@indicator-confirmed-icon: url(../components/icons/indicator-confirmed.svg);
-@wallet-gray-icon: url(../components/icons/wallet-gray.svg);
-@plus-small-icon: url(../components/icons/plus-small.svg);
-@minus-small-icon: url(../components/icons/minus-small.svg);
-@ticket-small-icon: url(../components/icons/tickets-ticket.svg);
-@arrow-right-gray-icon: url(../components/icons/arrow-right-gray.svg);
-@arrow-right-blue-icon: url(../components/icons/arrow-right-key-blue.svg);
-
+@import (reference) "./Icons.less";
 
 .indicator-pending {
     display: inline-block;
diff --git a/app/fonts/Inconsolata-Bold.ttf b/app/style/fonts/Inconsolata-Bold.ttf
similarity index 100%
rename from app/fonts/Inconsolata-Bold.ttf
rename to app/style/fonts/Inconsolata-Bold.ttf
diff --git a/app/fonts/Inconsolata-Regular.ttf b/app/style/fonts/Inconsolata-Regular.ttf
similarity index 100%
rename from app/fonts/Inconsolata-Regular.ttf
rename to app/style/fonts/Inconsolata-Regular.ttf
diff --git a/app/fonts/SourceSansPro-Bold.ttf b/app/style/fonts/SourceSansPro-Bold.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-Bold.ttf
rename to app/style/fonts/SourceSansPro-Bold.ttf
diff --git a/app/fonts/SourceSansPro-BoldItalic.ttf b/app/style/fonts/SourceSansPro-BoldItalic.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-BoldItalic.ttf
rename to app/style/fonts/SourceSansPro-BoldItalic.ttf
diff --git a/app/fonts/SourceSansPro-Italic.ttf b/app/style/fonts/SourceSansPro-Italic.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-Italic.ttf
rename to app/style/fonts/SourceSansPro-Italic.ttf
diff --git a/app/fonts/SourceSansPro-Light.ttf b/app/style/fonts/SourceSansPro-Light.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-Light.ttf
rename to app/style/fonts/SourceSansPro-Light.ttf
diff --git a/app/fonts/SourceSansPro-LightItalic.ttf b/app/style/fonts/SourceSansPro-LightItalic.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-LightItalic.ttf
rename to app/style/fonts/SourceSansPro-LightItalic.ttf
diff --git a/app/fonts/SourceSansPro-Regular.ttf b/app/style/fonts/SourceSansPro-Regular.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-Regular.ttf
rename to app/style/fonts/SourceSansPro-Regular.ttf
diff --git a/app/fonts/SourceSansPro-SemiBold.ttf b/app/style/fonts/SourceSansPro-SemiBold.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-SemiBold.ttf
rename to app/style/fonts/SourceSansPro-SemiBold.ttf
diff --git a/app/fonts/SourceSansPro-SemiBoldItalic.ttf b/app/style/fonts/SourceSansPro-SemiBoldItalic.ttf
similarity index 100%
rename from app/fonts/SourceSansPro-SemiBoldItalic.ttf
rename to app/style/fonts/SourceSansPro-SemiBoldItalic.ttf
diff --git a/app/components/icons/account-download.svg b/app/style/icons/account-download.svg
similarity index 100%
rename from app/components/icons/account-download.svg
rename to app/style/icons/account-download.svg
diff --git a/app/components/icons/account-eye-hide.svg b/app/style/icons/account-eye-hide.svg
similarity index 100%
rename from app/components/icons/account-eye-hide.svg
rename to app/style/icons/account-eye-hide.svg
diff --git a/app/components/icons/account-eye-open.svg b/app/style/icons/account-eye-open.svg
similarity index 100%
rename from app/components/icons/account-eye-open.svg
rename to app/style/icons/account-eye-open.svg
diff --git a/app/components/icons/account-rename.svg b/app/style/icons/account-rename.svg
similarity index 100%
rename from app/components/icons/account-rename.svg
rename to app/style/icons/account-rename.svg
diff --git a/app/components/icons/add.svg b/app/style/icons/add.svg
similarity index 100%
rename from app/components/icons/add.svg
rename to app/style/icons/add.svg
diff --git a/app/components/icons/arrow-down-key-blue.svg b/app/style/icons/arrow-down-key-blue.svg
similarity index 100%
rename from app/components/icons/arrow-down-key-blue.svg
rename to app/style/icons/arrow-down-key-blue.svg
diff --git a/app/components/icons/arrow-down-mid-blue.svg b/app/style/icons/arrow-down-mid-blue.svg
similarity index 100%
rename from app/components/icons/arrow-down-mid-blue.svg
rename to app/style/icons/arrow-down-mid-blue.svg
diff --git a/app/components/icons/arrow-right-gray.svg b/app/style/icons/arrow-right-gray.svg
similarity index 100%
rename from app/components/icons/arrow-right-gray.svg
rename to app/style/icons/arrow-right-gray.svg
diff --git a/app/components/icons/arrow-right-key-blue.svg b/app/style/icons/arrow-right-key-blue.svg
similarity index 100%
rename from app/components/icons/arrow-right-key-blue.svg
rename to app/style/icons/arrow-right-key-blue.svg
diff --git a/app/components/icons/arrow-right-smoke.svg b/app/style/icons/arrow-right-smoke.svg
similarity index 100%
rename from app/components/icons/arrow-right-smoke.svg
rename to app/style/icons/arrow-right-smoke.svg
diff --git a/app/components/icons/arrow-up-key-blue.svg b/app/style/icons/arrow-up-key-blue.svg
similarity index 100%
rename from app/components/icons/arrow-up-key-blue.svg
rename to app/style/icons/arrow-up-key-blue.svg
diff --git a/app/components/icons/arrow-up-light-blue.svg b/app/style/icons/arrow-up-light-blue.svg
similarity index 100%
rename from app/components/icons/arrow-up-light-blue.svg
rename to app/style/icons/arrow-up-light-blue.svg
diff --git a/app/components/icons/arrow-up-turquiose.svg b/app/style/icons/arrow-up-turquiose.svg
similarity index 100%
rename from app/components/icons/arrow-up-turquiose.svg
rename to app/style/icons/arrow-up-turquiose.svg
diff --git a/app/components/icons/balance-to-maintain.svg b/app/style/icons/balance-to-maintain.svg
similarity index 100%
rename from app/components/icons/balance-to-maintain.svg
rename to app/style/icons/balance-to-maintain.svg
diff --git a/app/components/icons/checkbox.svg b/app/style/icons/checkbox.svg
similarity index 100%
rename from app/components/icons/checkbox.svg
rename to app/style/icons/checkbox.svg
diff --git a/app/components/icons/copy-to-clipboard-blue.svg b/app/style/icons/copy-to-clipboard-blue.svg
similarity index 100%
rename from app/components/icons/copy-to-clipboard-blue.svg
rename to app/style/icons/copy-to-clipboard-blue.svg
diff --git a/app/components/icons/copy-to-clipboard-gray.svg b/app/style/icons/copy-to-clipboard-gray.svg
similarity index 100%
rename from app/components/icons/copy-to-clipboard-gray.svg
rename to app/style/icons/copy-to-clipboard-gray.svg
diff --git a/app/components/icons/delete.svg b/app/style/icons/delete.svg
similarity index 100%
rename from app/components/icons/delete.svg
rename to app/style/icons/delete.svg
diff --git a/app/components/icons/expiry.svg b/app/style/icons/expiry.svg
similarity index 100%
rename from app/components/icons/expiry.svg
rename to app/style/icons/expiry.svg
diff --git a/app/components/icons/img.svg b/app/style/icons/img.svg
similarity index 100%
rename from app/components/icons/img.svg
rename to app/style/icons/img.svg
diff --git a/app/components/icons/indicator-confirmed.svg b/app/style/icons/indicator-confirmed.svg
similarity index 100%
rename from app/components/icons/indicator-confirmed.svg
rename to app/style/icons/indicator-confirmed.svg
diff --git a/app/components/icons/indicator-finished.svg b/app/style/icons/indicator-finished.svg
similarity index 100%
rename from app/components/icons/indicator-finished.svg
rename to app/style/icons/indicator-finished.svg
diff --git a/app/components/icons/indicator-invalid.svg b/app/style/icons/indicator-invalid.svg
similarity index 100%
rename from app/components/icons/indicator-invalid.svg
rename to app/style/icons/indicator-invalid.svg
diff --git a/app/components/icons/indicator-pending.svg b/app/style/icons/indicator-pending.svg
similarity index 100%
rename from app/components/icons/indicator-pending.svg
rename to app/style/icons/indicator-pending.svg
diff --git a/app/components/icons/logo.svg b/app/style/icons/logo.svg
similarity index 100%
rename from app/components/icons/logo.svg
rename to app/style/icons/logo.svg
diff --git a/app/components/icons/max-fee.svg b/app/style/icons/max-fee.svg
similarity index 100%
rename from app/components/icons/max-fee.svg
rename to app/style/icons/max-fee.svg
diff --git a/app/components/icons/max-per-block.svg b/app/style/icons/max-per-block.svg
similarity index 100%
rename from app/components/icons/max-per-block.svg
rename to app/style/icons/max-per-block.svg
diff --git a/app/components/icons/max-price-absolute.svg b/app/style/icons/max-price-absolute.svg
similarity index 100%
rename from app/components/icons/max-price-absolute.svg
rename to app/style/icons/max-price-absolute.svg
diff --git a/app/components/icons/max-price-relative.svg b/app/style/icons/max-price-relative.svg
similarity index 100%
rename from app/components/icons/max-price-relative.svg
rename to app/style/icons/max-price-relative.svg
diff --git a/app/components/icons/menu-link-left-color.png b/app/style/icons/menu-link-left-color.png
similarity index 100%
rename from app/components/icons/menu-link-left-color.png
rename to app/style/icons/menu-link-left-color.png
diff --git a/app/components/icons/menu-logo.svg b/app/style/icons/menu-logo.svg
similarity index 100%
rename from app/components/icons/menu-logo.svg
rename to app/style/icons/menu-logo.svg
diff --git a/app/components/icons/minus-big.svg b/app/style/icons/minus-big.svg
similarity index 100%
rename from app/components/icons/minus-big.svg
rename to app/style/icons/minus-big.svg
diff --git a/app/components/icons/minus-small.svg b/app/style/icons/minus-small.svg
similarity index 100%
rename from app/components/icons/minus-small.svg
rename to app/style/icons/minus-small.svg
diff --git a/app/components/icons/plus-big.svg b/app/style/icons/plus-big.svg
similarity index 100%
rename from app/components/icons/plus-big.svg
rename to app/style/icons/plus-big.svg
diff --git a/app/components/icons/plus-small.svg b/app/style/icons/plus-small.svg
similarity index 100%
rename from app/components/icons/plus-small.svg
rename to app/style/icons/plus-small.svg
diff --git a/app/components/icons/pool-fee-address.svg b/app/style/icons/pool-fee-address.svg
similarity index 100%
rename from app/components/icons/pool-fee-address.svg
rename to app/style/icons/pool-fee-address.svg
diff --git a/app/components/icons/pool-fees.svg b/app/style/icons/pool-fees.svg
similarity index 100%
rename from app/components/icons/pool-fees.svg
rename to app/style/icons/pool-fees.svg
diff --git a/app/components/icons/qrcode-1.svg b/app/style/icons/qrcode-1.svg
similarity index 100%
rename from app/components/icons/qrcode-1.svg
rename to app/style/icons/qrcode-1.svg
diff --git a/app/components/icons/search.svg b/app/style/icons/search.svg
similarity index 100%
rename from app/components/icons/search.svg
rename to app/style/icons/search.svg
diff --git a/app/components/icons/searchHightWidth.svg b/app/style/icons/searchHightWidth.svg
similarity index 100%
rename from app/components/icons/searchHightWidth.svg
rename to app/style/icons/searchHightWidth.svg
diff --git a/app/components/icons/split-fee.svg b/app/style/icons/split-fee.svg
similarity index 100%
rename from app/components/icons/split-fee.svg
rename to app/style/icons/split-fee.svg
diff --git a/app/components/icons/stake-pool.svg b/app/style/icons/stake-pool.svg
similarity index 100%
rename from app/components/icons/stake-pool.svg
rename to app/style/icons/stake-pool.svg
diff --git a/app/components/icons/stakeySprites.png b/app/style/icons/stakeySprites.png
similarity index 100%
rename from app/components/icons/stakeySprites.png
rename to app/style/icons/stakeySprites.png
diff --git a/app/components/icons/stripe.svg b/app/style/icons/stripe.svg
similarity index 100%
rename from app/components/icons/stripe.svg
rename to app/style/icons/stripe.svg
diff --git a/app/components/icons/tickets-agenda-card-cebab-disabled.svg b/app/style/icons/tickets-agenda-card-cebab-disabled.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-cebab-disabled.svg
rename to app/style/icons/tickets-agenda-card-cebab-disabled.svg
diff --git a/app/components/icons/tickets-agenda-card-cebab-hover.svg b/app/style/icons/tickets-agenda-card-cebab-hover.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-cebab-hover.svg
rename to app/style/icons/tickets-agenda-card-cebab-hover.svg
diff --git a/app/components/icons/tickets-agenda-card-cebab.svg b/app/style/icons/tickets-agenda-card-cebab.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-cebab.svg
rename to app/style/icons/tickets-agenda-card-cebab.svg
diff --git a/app/components/icons/tickets-agenda-card-kebab-disabled.svg b/app/style/icons/tickets-agenda-card-kebab-disabled.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-kebab-disabled.svg
rename to app/style/icons/tickets-agenda-card-kebab-disabled.svg
diff --git a/app/components/icons/tickets-agenda-card-kebab-hover.svg b/app/style/icons/tickets-agenda-card-kebab-hover.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-kebab-hover.svg
rename to app/style/icons/tickets-agenda-card-kebab-hover.svg
diff --git a/app/components/icons/tickets-agenda-card-kebab.svg b/app/style/icons/tickets-agenda-card-kebab.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-card-kebab.svg
rename to app/style/icons/tickets-agenda-card-kebab.svg
diff --git a/app/components/icons/tickets-agenda-close.svg b/app/style/icons/tickets-agenda-close.svg
similarity index 100%
rename from app/components/icons/tickets-agenda-close.svg
rename to app/style/icons/tickets-agenda-close.svg
diff --git a/app/components/icons/tickets-cogs-closed.svg b/app/style/icons/tickets-cogs-closed.svg
similarity index 100%
rename from app/components/icons/tickets-cogs-closed.svg
rename to app/style/icons/tickets-cogs-closed.svg
diff --git a/app/components/icons/tickets-cogs-opened.svg b/app/style/icons/tickets-cogs-opened.svg
similarity index 100%
rename from app/components/icons/tickets-cogs-opened.svg
rename to app/style/icons/tickets-cogs-opened.svg
diff --git a/app/components/icons/tickets-info.svg b/app/style/icons/tickets-info.svg
similarity index 100%
rename from app/components/icons/tickets-info.svg
rename to app/style/icons/tickets-info.svg
diff --git a/app/components/icons/tickets-manage-stakepools.svg b/app/style/icons/tickets-manage-stakepools.svg
similarity index 100%
rename from app/components/icons/tickets-manage-stakepools.svg
rename to app/style/icons/tickets-manage-stakepools.svg
diff --git a/app/components/icons/tickets-ticket.svg b/app/style/icons/tickets-ticket.svg
similarity index 100%
rename from app/components/icons/tickets-ticket.svg
rename to app/style/icons/tickets-ticket.svg
diff --git a/app/components/icons/transparent.png b/app/style/icons/transparent.png
similarity index 100%
rename from app/components/icons/transparent.png
rename to app/style/icons/transparent.png
diff --git a/app/components/icons/voting-address.svg b/app/style/icons/voting-address.svg
similarity index 100%
rename from app/components/icons/voting-address.svg
rename to app/style/icons/voting-address.svg
diff --git a/app/components/icons/wallet-blue.svg b/app/style/icons/wallet-blue.svg
similarity index 100%
rename from app/components/icons/wallet-blue.svg
rename to app/style/icons/wallet-blue.svg
diff --git a/app/components/icons/wallet-gray.svg b/app/style/icons/wallet-gray.svg
similarity index 100%
rename from app/components/icons/wallet-gray.svg
rename to app/style/icons/wallet-gray.svg
diff --git a/app/components/icons/wallet-smoke.svg b/app/style/icons/wallet-smoke.svg
similarity index 100%
rename from app/components/icons/wallet-smoke.svg
rename to app/style/icons/wallet-smoke.svg
diff --git a/app/components/icons/wallet-turquoise.svg b/app/style/icons/wallet-turquoise.svg
similarity index 100%
rename from app/components/icons/wallet-turquoise.svg
rename to app/style/icons/wallet-turquoise.svg
diff --git a/package.json b/package.json
index 98c4a191bf..47f89b7178 100644
--- a/package.json
+++ b/package.json
@@ -155,7 +155,6 @@
     "minimist": "^1.2.0",
     "mocha": "^3.1.2",
     "node-loader": "^0.6.0",
-    "radium": "^0.18.1",
     "react-addons-test-utils": "^15.3.2",
     "react-tap-event-plugin": "^2.0.1",
     "redux-logger": "^2.7.4",
@@ -181,7 +180,6 @@
     "mv": "^2.1.1",
     "prop-types": "^15.5.10",
     "qr-image": "^3.2.0",
-    "radium": "^0.18.1",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-redux": "^4.4.5",
diff --git a/public/css/app.global.css b/public/css/app.global.css
deleted file mode 100644
index 247a261d0a..0000000000
--- a/public/css/app.global.css
+++ /dev/null
@@ -1,37 +0,0 @@
-body {
-  position: relative;
-  color: white;
-  height: 100vh;
-  background-color: #232C39;
-  background-image: linear-gradient(45deg, rgba(0, 216, 255, .5) 10%, rgba(0, 1, 127, .7));
-  font-family: Arial, Helvetica, Helvetica Neue, serif;
-  overflow-y: hidden;
-}
-
-h2 {
-  margin: 0;
-  font-size: 2.25rem;
-  font-weight: bold;
-  letter-spacing: -.025em;
-  color: #fff;
-}
-
-p {
-  font-size: 24px;
-}
-
-li {
-  list-style: none;
-}
-
-a {
-  color: white;
-  opacity: .75;
-  text-decoration: none;
-}
-
-a:hover {
-  opacity: 1;
-  text-decoration: none;
-  cursor: pointer;
-}