Closes secret-tech#32 Add theme switcher and light theme

src/components/wallets/WalletTile/index.js

@@ -59,7 +59,7 @@ const WalletTile = (props) => {
           </div>
           <div className={s.info}>
             {/* <h3>{name}</h3> */}
-            <div className="pt-text-muted">{address}</div>
+            <div className={s.address}>{address}</div>
           </div>
         </div>
 

src/components/wallets/WalletTile/styles.css

@@ -51,3 +51,7 @@
     margin: 20px 20px 0;
   }
 }
+
+.address {
+  color: #f5f8fa;
+}

src/containers/app/Nav/index.js

@@ -15,6 +15,7 @@ import s from './styles.css';
 
 const Nav = (props) => {
   const {
+    theme,
     wallets,
     selectedWallet,
     selectWallet,
@@ -45,7 +46,7 @@ const Nav = (props) => {
   };
 
   return (
-    <Navbar className="pt-dark">
+    <Navbar className={theme}>
       <NavbarGroup>
         <NavbarHeading>
           <Link to="/wallets" className={s.logo}>
@@ -74,7 +75,8 @@ const Nav = (props) => {
 const ConnectedComponent = connect(
   (state) => ({
     wallets: state.app.user.wallets,
-    selectedWallet: state.wallet.selectedWallet
+    selectedWallet: state.wallet.selectedWallet,
+    ...state.app.theme
   }),
   {
     selectWallet,

src/containers/app/Nav/styles.css

@@ -1,3 +1,13 @@
+:global(.pt-dark) .logo > span {
+  color: #f5f8fa;
+  margin-left: 10px;
+}
+
+:global(.pt-light) .logo > span {
+  color: #182026;
+  margin-left: 10px;
+}
+
 .logo {
   display: flex;
   align-items: center;
@@ -7,11 +17,6 @@
     width: 30px;
   }
 
-  & > span {
-    color: #fff;
-    margin-left: 10px;
-  }
-
   &:hover {
     text-decoration: none;
   }

src/containers/settings/ChangePasswordPopup/index.js

@@ -9,6 +9,7 @@ import VerifyChangePasswordForm from '../../../components/settings/VerifyChangeP
 
 const ChangePasswordPopup = (props) => {
   const {
+    theme,
     step,
     fetching,
     verification: {
@@ -42,7 +43,7 @@ const ChangePasswordPopup = (props) => {
     <Dialog
       style={{ width: '300px', paddingBottom: '0px' }}
       title="Change password"
-      className="pt-dark"
+      className={theme}
       {...props}>
 
       <div className="pt-dialog-body">
@@ -53,5 +54,6 @@ const ChangePasswordPopup = (props) => {
 };
 
 export default connect((state) => ({
-  ...state.settings.changePassword
+  ...state.settings.changePassword,
+  ...state.app.theme
 }))(ChangePasswordPopup);

src/containers/settings/RegisterCustomTokenPopup/index.js

@@ -9,6 +9,7 @@ import RegisterTokenForm from '../../../components/settings/RegisterTokenForm';
 
 const RegisterCustomTokenPopup = (props) => {
   const {
+    theme,
     step,
     fetching,
     walletAddress,
@@ -49,7 +50,7 @@ const RegisterCustomTokenPopup = (props) => {
     <Dialog
       style={{ width: '300px', paddingBottom: '0px' }}
       title="Register custom token"
-      className="pt-dark"
+      className={theme}
       {...props}>
 
       <div className="pt-dialog-body">
@@ -62,5 +63,6 @@ const RegisterCustomTokenPopup = (props) => {
 export default connect((state) => ({
   ...state.settings.registerCustomToken,
   walletAddress: state.wallet.selectedWallet,
-  wallets: state.app.user.wallets
+  wallets: state.app.user.wallets,
+  ...state.app.theme
 }))(RegisterCustomTokenPopup);

src/containers/wallet/DepositFunds/index.js

@@ -9,6 +9,7 @@ import s from './styles.css';
 
 const DepositFunds = (props) => {
   const {
+    theme,
     closeDepositFundsPopup,
     popupIsOpen
   } = props;
@@ -17,7 +18,7 @@ const DepositFunds = (props) => {
     <Dialog
       style={{ width: '700px', paddingBottom: '0px' }}
       title="Deposit funds"
-      className="pt-dark"
+      className={theme}
       onClose={closeDepositFundsPopup}
       isOpen={popupIsOpen}>
 
@@ -33,7 +34,8 @@ const DepositFunds = (props) => {
 const ComponentWithRouter = withRouter(DepositFunds);
 const ConnectedComponent = connect(
   (state) => ({
-    ...state.wallet.depositFunds
+    ...state.wallet.depositFunds,
+    ...state.app.theme
   }),
   {
     closeDepositFundsPopup

src/containers/wallet/TransferFunds/index.js

@@ -10,6 +10,7 @@ import VerifyTransferFundsForm from '../../../components/wallet/VerifyTransferFu
 
 const TransferFunds = (props) => {
   const {
+    theme,
     closeTransferFundsPopup,
     popupIsOpen,
     step,
@@ -71,7 +72,7 @@ const TransferFunds = (props) => {
     <Dialog
       style={{ width: '320px', paddingBottom: '0px' }}
       title="Transfer funds"
-      className="pt-dark"
+      className={theme}
       onClose={closeTransferFundsPopup}
       isOpen={popupIsOpen}>
 
@@ -86,6 +87,7 @@ const ComponentWithRouter = withRouter(TransferFunds);
 const ConnectedComponent = connect(
   (state) => ({
     ...state.wallet.transferFunds,
+    ...state.app.theme,
     wallets: state.app.user.wallets,
     selectedWallet: state.wallet.selectedWallet
   }),

src/containers/wallets/CreateWalletPopup/index.js

@@ -10,7 +10,6 @@ const CreateWalletPopup = (props) => (
   <Dialog
     style={{ width: '400px', paddingBottom: '0px' }}
     title="Create wallet"
-    className="pt-dark"
     {...props}>
 
     <div className="pt-dialog-body">
@@ -22,5 +21,6 @@ const CreateWalletPopup = (props) => (
 );
 
 export default connect((state) => ({
-  fetching: state.wallets.createWallet.fetching
+  fetching: state.wallets.createWallet.fetching,
+  ...state.app.theme
 }))(CreateWalletPopup);

src/containers/wallets/EditWalletPopup/index.js

@@ -4,7 +4,6 @@ import { Dialog, Button, Intent } from '@blueprintjs/core';
 const EditWalletPopup = (props) => (
   <Dialog
     title="Edit wallet"
-    className="pt-dark"
     {...props}>
 
     <div className="pt-dialog-body">

src/containers/wallets/ExportWalletPopup/index.js

@@ -7,7 +7,6 @@ const ExportWalletPopup = (props) => (
   <Dialog
     style={{ width: '800px' }}
     title="Export wallet"
-    className="pt-dark"
     {...props}>
 
     <div className="pt-dialog-body">

src/containers/wallets/ImportWalletPopup/index.js

@@ -4,7 +4,6 @@ import { Dialog, Button, Intent } from '@blueprintjs/core';
 const ImportWalletPopup = (props) => (
   <Dialog
     title="Import wallet"
-    className="pt-dark"
     {...props}>
 
     <div className="pt-dialog-body">

src/containers/wallets/WalletsPopups/index.js

@@ -13,6 +13,8 @@ import EditWalletPopup from '../EditWalletPopup';
 
 const WalletsPopups = (props) => {
   const {
+    theme,
+
     closeCreateWalletPopup,
     createWallet,
 
@@ -29,27 +31,34 @@ const WalletsPopups = (props) => {
   return [
     <CreateWalletPopup
       key="create-wallet-popup"
+      className={theme}
       isOpen={createWallet.popupIsOpen}
       onClose={() => closeCreateWalletPopup()}/>,
     <ImportWalletPopup
       key="import-wallet-popup"
+      className={theme}
       isOpen={importWallet.popupIsOpen}
       onClose={() => closeImportWalletPopup()}/>,
     <ExportWalletPopup
       key="export-wallet-popup"
+      className={theme}
       isOpen={exportWallet.popupIsOpen}
       onClose={() => closeExportWalletPopup()}
       walletAddress={exportWallet.walletAddress}/>,
     <EditWalletPopup
       key="edit-wallet-popup"
+      className={theme}
       isOpen={editWallet.popupIsOpen}
       onClose={() => closeEditWalletPopup()}
       walletAddress={editWallet.walletAddress}/>,
   ];
 };
 
 const ConnectedComponent = connect(
-  (state) => ({ ...state.wallets }),
+  (state) => ({
+    ...state.wallets,
+    ...state.app.theme
+  }),
   {
     closeCreateWalletPopup,
     closeImportWalletPopup,