feature: refactor theme files to allow for Light and Dark theme separately

__tests__/components/button.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { Button } from '../../app/components/button';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/clipboard.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { Clipboard } from '../../app/components/clipboard';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/column.test.js

@@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { ColumnComponent } from '../../app/components/column';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 
 describe('<ColumnComponent />', () => {
   test('should render correctly', () => {
-    // $FlowFixMe
     const { container } = render(
       <ThemeProvider theme={appTheme}>
         <ColumnComponent>

__tests__/components/divider.test.js

@@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { Divider } from '../../app/components/divider';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 
 describe('<Divider />', () => {
   test('should render correctly', () => {
-    // $FlowFixMe
     const { container } = render(
       <ThemeProvider theme={appTheme}>
         <Divider opacity={0.3} />

__tests__/components/dropdown.test.js

@@ -7,7 +7,7 @@ import 'jest-dom/extend-expect';
 
 import { DropdownComponent } from '../../app/components/dropdown';
 import { Button } from '../../app/components/button';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 
@@ -28,8 +28,8 @@ describe('<DropdownComponent />', () => {
               />
             )}
             options={[
-              { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
-              { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+              { label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
+              { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
             ]}
           />
         </div>
@@ -53,8 +53,8 @@ describe('<DropdownComponent />', () => {
               />
             )}
             options={[
-              { label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
-              { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
+              { label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
+              { label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
             ]}
           />
         </div>

__tests__/components/empty-transactions.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/input-label.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { InputLabelComponent } from '../../app/components/input-label';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/input.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { InputComponent } from '../../app/components/input';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/loading-screen.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { LoadingScreen } from '../../app/components/loading-screen';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/row.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { RowComponent } from '../../app/components/row';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/select.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { SelectComponent } from '../../app/components/select';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 
@@ -33,7 +33,7 @@ describe('<SelectComponent />', () => {
     const { queryByTestId } = render(
       <ThemeProvider theme={appTheme}>
         <SelectComponent
-          onChange={console.log}
+          onChange={console.log} // eslint-disable-line
           value='asbh1yeasbdh23848asdasd'
           placeholder='Select a address'
           options={[
@@ -51,7 +51,7 @@ describe('<SelectComponent />', () => {
     const { container } = render(
       <ThemeProvider theme={appTheme}>
         <SelectComponent
-          onChange={console.log}
+          onChange={console.log} // eslint-disable-line
           value='asbh1yeasbdh23848asdasd'
           placeholder='Select a address'
           options={[

__tests__/components/status-pill.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { StatusPill } from '../../app/components/status-pill';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/text.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { TextComponent } from '../../app/components/text';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/transaction-item.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { TransactionItemComponent } from '../../app/components/transaction-item';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/transactions-daily.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { TransactionDailyComponent } from '../../app/components/transaction-daily';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

__tests__/components/wallet-address.test.js

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import 'jest-dom/extend-expect';
 
 import { WalletAddress } from '../../app/components/wallet-address';
-import appTheme from '../../app/theme';
+import { appTheme } from '../../app/theme';
 
 afterEach(cleanup);
 

app/app.js

@@ -7,9 +7,9 @@ import { ThemeProvider } from 'styled-components';
 
 import { configureStore, history } from './redux/create';
 import { Router } from './router/container';
-import theme, { GlobalStyle } from './theme';
+import { appTheme as theme, GlobalStyle } from './theme';
 import electronStore from '../config/electron-store';
-import { DARK } from './constants/themes';
+import { DARK, THEME_MODE } from './constants/themes';
 
 const store = configureStore({});
 
@@ -20,15 +20,15 @@ type State = {
 
 export class App extends Component<Props, State> {
   state = {
-    themeMode: electronStore.get('THEME_MODE') || DARK,
+    themeMode: electronStore.get(THEME_MODE) || DARK,
   };
 
   componentDidMount() {
-    if (!electronStore.has('THEME_MODE')) {
-      electronStore.set('THEME_MODE', DARK);
+    if (!electronStore.has(THEME_MODE)) {
+      electronStore.set(THEME_MODE, DARK);
     }
 
-    electronStore.onDidChange('THEME_MODE', newValue => this.setState({ themeMode: newValue }));
+    electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
   }
 
   render() {

app/components/input.js

@@ -3,7 +3,7 @@
 import React, { type Element } from 'react';
 import styled from 'styled-components';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 type Props = {
   inputType?: 'input' | 'textarea',
@@ -104,5 +104,5 @@ InputComponent.defaultProps = {
   onChange: () => {},
   onFocus: () => {},
   step: 1,
-  bgColor: theme.colors.inputBackground,
+  bgColor: appTheme.colors.inputBackground,
 };

app/components/loading-screen.js

@@ -11,7 +11,7 @@ import { TextComponent } from './text';
 
 import zcashLogo from '../assets/images/zcash-simple-icon.svg';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 const Wrapper = styled.div`
   width: 100vw;
@@ -103,8 +103,8 @@ export class LoadingScreen extends PureComponent<Props, State> {
                   s // TODO: check if this has any effect
                   responsive
                   showPercentage={false}
-                  progressColor={theme.colors.activeItem}
-                  bgColor={theme.colors.inactiveItem}
+                  progressColor={appTheme.colors.activeItem}
+                  bgColor={appTheme.colors.inactiveItem}
                 />
               </CircleWrapper>
               <TextComponent value={message} />

app/components/select.js

@@ -7,7 +7,7 @@ import { TextComponent } from './text';
 import ChevronUp from '../assets/images/chevron-up.svg';
 import ChevronDown from '../assets/images/chevron-down.svg';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 /* eslint-disable max-len */
 type SelectWrapperProps = PropsWithTheme<{
@@ -125,7 +125,7 @@ export class SelectComponent extends PureComponent<Props, State> {
   static defaultProps = {
     placeholder: '',
     placement: 'bottom',
-    bgColor: theme.colors.inputBackground,
+    bgColor: appTheme.colors.inputBackground,
     capitalize: true,
   };
 

app/components/text.js

@@ -5,7 +5,7 @@ import React from 'react';
 import styled from 'styled-components';
 import type { ElementProps } from 'react';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 export type Props = {
   ...ElementProps<'p'>,
@@ -45,7 +45,7 @@ export const TextComponent = ({
 TextComponent.defaultProps = {
   className: '',
   isBold: false,
-  color: theme.colors.text,
-  size: theme.fontSize.regular,
+  color: appTheme.colors.text,
+  size: appTheme.fontSize.regular,
   align: 'left',
 };

app/components/transaction-details.js

@@ -15,7 +15,7 @@ import { TextComponent } from './text';
 import { RowComponent } from './row';
 import { ColumnComponent } from './column';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 import { formatNumber } from '../utils/format-number';
 import { truncateAddress } from '../utils/truncate-address';
@@ -158,7 +158,7 @@ export const TransactionDetailsComponent = ({
             append: `${isReceived ? '+' : '-'}ZEC `,
             value: amount,
           })}
-          color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
+          color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
         />
         <TextComponent
           value={formatNumber({
@@ -166,7 +166,7 @@ export const TransactionDetailsComponent = ({
             value: new BigNumber(amount).times(zecPrice).toNumber(),
           })}
           size={1.5}
-          color={theme.colors.transactionsDetailsLabel}
+          color={appTheme.colors.transactionsDetailsLabel}
         />
       </DetailsWrapper>
       <InfoRow>
@@ -175,7 +175,7 @@ export const TransactionDetailsComponent = ({
           <TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
         </ColumnComponent>
         <ColumnComponent>
-          <TextComponent value='FEES' isBold color={theme.colors.transactionsDetailsLabel} />
+          <TextComponent value='FEES' isBold color={appTheme.colors.transactionsDetailsLabel} />
           <TextComponent
             value={formatNumber({
               value: new BigNumber(amount).times(0.1).toNumber(),

app/components/transaction-item.js

@@ -13,7 +13,7 @@ import { TextComponent } from './text';
 import { ModalComponent } from './modal';
 import { TransactionDetailsComponent } from './transaction-details';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 import { formatNumber } from '../utils/format-number';
 import { truncateAddress } from '../utils/truncate-address';
@@ -110,9 +110,12 @@ export const TransactionItemComponent = ({
             <TextComponent
               isBold
               value={transactionValueInZec}
-              color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
+              color={isReceived
+                ? appTheme.colors.transactionReceived
+                : appTheme.colors.transactionSent
+              }
             />
-            <TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
+            <TextComponent value={transactionValueInUsd} color={appTheme.colors.inactiveItem} />
           </ColumnComponent>
         </Wrapper>
       )}

app/components/wallet-summary.js

@@ -8,7 +8,7 @@ import { RowComponent } from './row';
 
 import { formatNumber } from '../utils/format-number';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 const Wrapper = styled.div`
   display: flex;
@@ -60,31 +60,31 @@ export const WalletSummaryComponent = ({
     <AllAddresses value='ALL ADDRESSES' isBold />
     <ValueBox>
       <TextComponent
-        size={theme.fontSize.medium * 2.5}
+        size={appTheme.fontSize.medium * 2.5}
         value={`ZEC ${formatNumber({ value: total })}`}
         isBold
       />
       <USDValue
         value={`USD $${formatNumber({ value: total * zecPrice })}`}
-        size={theme.fontSize.medium * 2}
+        size={appTheme.fontSize.medium * 2}
       />
     </ValueBox>
     <RowComponent>
       <ValueBox>
-        <ShieldedValue value='&#9679; SHIELDED' isBold size={theme.fontSize.small} />
+        <ShieldedValue value='&#9679; SHIELDED' isBold size={appTheme.fontSize.small} />
         <TextComponent
           value={`ZEC ${formatNumber({ value: shielded })}`}
           isBold
-          size={theme.fontSize.medium}
+          size={appTheme.fontSize.medium}
         />
         <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
       </ValueBox>
       <ValueBox>
-        <Label value='&#9679; TRANSPARENT' isBold size={theme.fontSize.small} />
+        <Label value='&#9679; TRANSPARENT' isBold size={appTheme.fontSize.small} />
         <TextComponent
           value={`ZEC ${formatNumber({ value: transparent })}`}
           isBold
-          size={theme.fontSize.medium}
+          size={appTheme.fontSize.medium}
         />
         <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
       </ValueBox>

app/constants/themes.js

@@ -1,4 +1,8 @@
 // @flow
 
-export const LIGHT = 'light';
-export const DARK = 'dark';
+// Theme Modifier
+export const THEME_MODE = 'THEME_MODE';
+
+// Themes
+export const LIGHT = 'LIGHT';
+export const DARK = 'DARK';

app/theme.js

@@ -1,176 +0,0 @@
-// @flow
-
-import React, { Fragment, type Node } from 'react';
-import theme from 'styled-theming';
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
-// $FlowFixMe
-import { normalize } from 'polished'; // eslint-disable-line
-
-import { DARK } from './constants/themes';
-
-const darkOne = '#F4B728';
-const blackTwo = '#171717';
-const lightOne = '#ffffff';
-const brandOne = '#000';
-const brandThree = '#5d5d65';
-const buttonBorderColor = '#3e3c42';
-const activeItem = '#F4B728';
-const text = '#FFF';
-const cardBackgroundColor = '#000';
-const sidebarLogoGradientBegin = '#F4B728';
-const sidebarLogoGradientEnd = '#FFE240';
-const sidebarHoveredItem = '#1C1C1C';
-const sidebarHoveredItemLabel = '#8e8e96';
-const background = '#212124';
-const transactionSent = '#FF6C6C';
-const transactionReceived = '#6AEAC0';
-const transactionsDate = '#777777';
-const transactionsItemHovered = '#222222';
-const selectButtonShadow = 'rgba(238,201,76,0.65)';
-const statusPillLabel = '#727272';
-const transactionsDetailsLabel = transactionsDate;
-
-const appTheme: AppTheme = {
-  mode: DARK,
-  fontFamily: 'Roboto',
-  fontWeight: {
-    bold: 700,
-    default: 400,
-    light: 300,
-  },
-  fontSize: {
-    large: 1.25,
-    medium: 1.125,
-    regular: 0.84375,
-    small: 0.667,
-  },
-  colors: {
-    primary: theme('mode', {
-      light: lightOne,
-      dark: darkOne,
-    }),
-    secondary: theme('mode', {
-      light: darkOne,
-      dark: lightOne,
-    }),
-    sidebarBg: theme('mode', {
-      light: brandOne,
-      dark: brandOne,
-    }),
-    sidebarItem: theme('mode', {
-      light: brandThree,
-      dark: brandThree,
-    }),
-    sidebarItemActive: theme('mode', {
-      light: activeItem,
-      dark: activeItem,
-    }),
-    sidebarHoveredItem: theme('mode', {
-      light: sidebarHoveredItem,
-      dark: sidebarHoveredItem,
-    }),
-    sidebarHoveredItemLabel: theme('mode', {
-      light: sidebarHoveredItemLabel,
-      dark: sidebarHoveredItemLabel,
-    }),
-    cardBackgroundColor: theme('mode', {
-      light: cardBackgroundColor,
-      dark: cardBackgroundColor,
-    }),
-    text: theme('mode', {
-      light: '#000',
-      dark: text,
-    }),
-    activeItem: theme('mode', {
-      light: activeItem,
-      dark: activeItem,
-    }),
-    inactiveItem: theme('mode', {
-      light: brandThree,
-      dark: brandThree,
-    }),
-    sidebarLogoGradientBegin: theme('mode', {
-      light: sidebarLogoGradientBegin,
-      dark: sidebarLogoGradientBegin,
-    }),
-    sidebarLogoGradientEnd: theme('mode', {
-      light: sidebarLogoGradientEnd,
-      dark: sidebarLogoGradientEnd,
-    }),
-    background: theme('mode', {
-      light: '#FFF',
-      dark: background,
-    }),
-    transactionSent: theme('mode', {
-      light: transactionSent,
-      dark: transactionSent,
-    }),
-    transactionReceived: theme('mode', {
-      light: transactionReceived,
-      dark: transactionReceived,
-    }),
-    transactionsDate: theme('mode', {
-      light: transactionsDate,
-      dark: transactionsDate,
-    }),
-    transactionsItemHovered: theme('mode', {
-      light: transactionsItemHovered,
-      dark: transactionsItemHovered,
-    }),
-    inputBackground: theme('mode', {
-      light: brandOne,
-      dark: brandOne,
-    }),
-    selectButtonShadow: theme('mode', {
-      light: selectButtonShadow,
-      dark: selectButtonShadow,
-    }),
-    transactionsDetailsLabel: theme('mode', {
-      light: transactionsDetailsLabel,
-      dark: transactionsDetailsLabel,
-    }),
-    statusPillLabel: theme('mode', {
-      light: statusPillLabel,
-      dark: statusPillLabel,
-    }),
-    modalItemLabel: theme('mode', {
-      light: transactionsDate,
-      dark: transactionsDate,
-    }),
-    blackTwo: theme('mode', {
-      light: blackTwo,
-      dark: blackTwo,
-    }),
-    buttonBorderColor: theme('mode', {
-      light: buttonBorderColor,
-      dark: buttonBorderColor,
-    }),
-  },
-  sidebarWidth: '180px',
-  headerHeight: '60px',
-  layoutPaddingLeft: '35px',
-  layoutPaddingRight: '35px',
-  layoutContentPaddingTop: '20px',
-  boxBorderRadius: '3px',
-  transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-};
-
-export const GlobalStyle = createGlobalStyle`
-  ${normalize()}
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-
-export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
-  <ThemeProvider theme={appTheme}>
-    <Fragment>
-      <GlobalStyle />
-      {children()}
-    </Fragment>
-  </ThemeProvider>
-);
-
-// eslint-disable-next-line
-export default appTheme;

app/theme/colors/dark.js

@@ -0,0 +1,25 @@
+// @flow
+
+export const DARK_COLORS = {
+  darkOne: '#F4B728',
+  blackTwo: '#171717',
+  lightOne: '#ffffff',
+  brandOne: '#000',
+  brandThree: '#5d5d65',
+  buttonBorderColor: '#3e3c42',
+  activeItem: '#F4B728',
+  text: '#FFF',
+  cardBackgroundColor: '#000',
+  sidebarLogoGradientBegin: '#F4B728',
+  sidebarLogoGradientEnd: '#FFE240',
+  sidebarHoveredItem: '#1C1C1C',
+  sidebarHoveredItemLabel: '#8e8e96',
+  background: '#212124',
+  transactionSent: '#FF6C6C',
+  transactionReceived: '#6AEAC0',
+  transactionsDate: '#777777',
+  transactionsItemHovered: '#222222',
+  selectButtonShadow: 'rgba(238,201,76,0.65)',
+  statusPillLabel: '#727272',
+  transactionsDetailsLabel: '#777777',
+};

app/theme/colors/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { DARK_COLORS } from './dark';
+export { LIGHT_COLORS } from './light';

app/theme/colors/light.js

@@ -0,0 +1,25 @@
+// @flow
+
+export const LIGHT_COLORS = {
+  darkOne: '#F4B728',
+  blackTwo: '#171717',
+  lightOne: '#ffffff',
+  brandOne: '#000',
+  brandThree: '#5d5d65',
+  buttonBorderColor: '#3e3c42',
+  activeItem: '#F4B728',
+  text: '#FFF',
+  cardBackgroundColor: '#000',
+  sidebarLogoGradientBegin: '#F4B728',
+  sidebarLogoGradientEnd: '#FFE240',
+  sidebarHoveredItem: '#1C1C1C',
+  sidebarHoveredItemLabel: '#8e8e96',
+  background: '#fff',
+  transactionSent: '#FF6C6C',
+  transactionReceived: '#6AEAC0',
+  transactionsDate: '#777777',
+  transactionsItemHovered: '#222222',
+  selectButtonShadow: 'rgba(238,201,76,0.65)',
+  statusPillLabel: '#727272',
+  transactionsDetailsLabel: '#777777',
+};

app/theme/docz.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React, { Fragment, type Node } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { appTheme } from './theme';
+import { GlobalStyle } from './global';
+
+export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
+  <ThemeProvider theme={appTheme}>
+    <Fragment>
+      <GlobalStyle />
+      {children()}
+    </Fragment>
+  </ThemeProvider>
+);

app/theme/global.js

@@ -0,0 +1,13 @@
+// @flow
+
+// $FlowFixMe
+import { normalize } from 'polished'; // eslint-disable-line
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  ${normalize()}
+
+  * {
+    box-sizing: border-box;
+  }
+`;

app/theme/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+export { appTheme } from './theme';
+export { DoczWrapper } from './docz';
+export { GlobalStyle } from './global';

app/theme/theme.js

@@ -0,0 +1,130 @@
+// @flow
+
+import theme from 'styled-theming';
+
+import { DARK, LIGHT } from '../constants/themes';
+import { typography } from './typography';
+import { DARK_COLORS, LIGHT_COLORS } from './colors';
+
+export const appTheme: AppTheme = {
+  // General
+  mode: DARK,
+
+  // Typography
+  ...typography,
+
+  // Spacing
+  sidebarWidth: '180px',
+  headerHeight: '60px',
+  layoutPaddingLeft: '35px',
+  layoutPaddingRight: '35px',
+  layoutContentPaddingTop: '20px',
+  boxBorderRadius: '3px',
+
+  // Misc
+  transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+
+  // Colors
+  colors: {
+    primary: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.darkOne,
+      [DARK]: DARK_COLORS.darkOne,
+    }),
+    secondary: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.darkOne,
+      [DARK]: DARK_COLORS.darkOne,
+    }),
+    sidebarBg: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.brandOne,
+      [DARK]: DARK_COLORS.brandOne,
+    }),
+    sidebarItem: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.brandThree,
+      [DARK]: DARK_COLORS.brandThree,
+    }),
+    sidebarItemActive: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.activeItem,
+      [DARK]: DARK_COLORS.activeItem,
+    }),
+    sidebarHoveredItem: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarHoveredItem,
+      [DARK]: DARK_COLORS.sidebarHoveredItem,
+    }),
+    sidebarHoveredItemLabel: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarHoveredItemLabel,
+      [DARK]: DARK_COLORS.sidebarHoveredItemLabel,
+    }),
+    cardBackgroundColor: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.cardBackgroundColor,
+      [DARK]: DARK_COLORS.cardBackgroundColor,
+    }),
+    text: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.text,
+      [DARK]: DARK_COLORS.text,
+    }),
+    activeItem: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.activeItem,
+      [DARK]: DARK_COLORS.activeItem,
+    }),
+    inactiveItem: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.brandThree,
+      [DARK]: DARK_COLORS.brandThree,
+    }),
+    sidebarLogoGradientBegin: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarLogoGradientBegin,
+      [DARK]: DARK_COLORS.sidebarLogoGradientBegin,
+    }),
+    sidebarLogoGradientEnd: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.sidebarLogoGradientEnd,
+      [DARK]: DARK_COLORS.sidebarLogoGradientEnd,
+    }),
+    background: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.background,
+      [DARK]: DARK_COLORS.background,
+    }),
+    transactionSent: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionSent,
+      [DARK]: DARK_COLORS.transactionSent,
+    }),
+    transactionReceived: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionReceived,
+      [DARK]: DARK_COLORS.transactionReceived,
+    }),
+    transactionsDate: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionsDate,
+      [DARK]: DARK_COLORS.transactionsDate,
+    }),
+    transactionsItemHovered: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionsItemHovered,
+      [DARK]: DARK_COLORS.transactionsItemHovered,
+    }),
+    inputBackground: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.brandOne,
+      [DARK]: DARK_COLORS.brandOne,
+    }),
+    selectButtonShadow: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.selectButtonShadow,
+      [DARK]: DARK_COLORS.selectButtonShadow,
+    }),
+    transactionsDetailsLabel: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionsDetailsLabel,
+      [DARK]: DARK_COLORS.transactionsDetailsLabel,
+    }),
+    statusPillLabel: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.statusPillLabel,
+      [DARK]: DARK_COLORS.statusPillLabel,
+    }),
+    modalItemLabel: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.transactionsDate,
+      [DARK]: DARK_COLORS.transactionsDate,
+    }),
+    blackTwo: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.blackTwo,
+      [DARK]: DARK_COLORS.blackTwo,
+    }),
+    buttonBorderColor: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.buttonBorderColor,
+      [DARK]: DARK_COLORS.buttonBorderColor,
+    }),
+  },
+};

app/theme/typography.js

@@ -0,0 +1,18 @@
+// @flow
+
+const FONT_FAMILY = 'Roboto';
+
+export const typography = {
+  fontFamily: FONT_FAMILY,
+  fontWeight: {
+    bold: 700,
+    default: 400,
+    light: 300,
+  },
+  fontSize: {
+    large: 1.25,
+    medium: 1.125,
+    regular: 0.84375,
+    small: 0.667,
+  },
+};

app/views/send.js

@@ -30,7 +30,7 @@ import InvalidIcon from '../assets/images/error_icon.png';
 import LoadingIcon from '../assets/images/sync_icon.png';
 import ArrowUpIcon from '../assets/images/arrow_up.png';
 
-import theme from '../theme';
+import { appTheme } from '../theme';
 
 const rotate = keyframes`
   from {
@@ -390,12 +390,12 @@ export class SendView extends PureComponent<Props, State> {
     return isToAddressValid ? (
       <RowComponent alignItems='center'>
         <ValidateStatusIcon src={ValidIcon} />
-        <ItemLabel value='VALID' color={theme.colors.transactionReceived} />
+        <ItemLabel value='VALID' color={appTheme.colors.transactionReceived} />
       </RowComponent>
     ) : (
       <RowComponent alignItems='center'>
         <ValidateStatusIcon src={InvalidIcon} />
-        <ItemLabel value='INVALID' color={theme.colors.transactionSent} />
+        <ItemLabel value='INVALID' color={appTheme.colors.transactionSent} />
       </RowComponent>
     );
   };
@@ -600,7 +600,7 @@ export class SendView extends PureComponent<Props, State> {
                             onChange={this.handleChange('fee')}
                             value={String(fee)}
                             disabled={feeType !== FEES.CUSTOM}
-                            bgColor={theme.colors.blackTwo}
+                            bgColor={appTheme.colors.blackTwo}
                             name='fee'
                           />
                         </ColumnComponent>
@@ -608,7 +608,7 @@ export class SendView extends PureComponent<Props, State> {
                           <SelectComponent
                             placement='top'
                             value={String(feeType)}
-                            bgColor={theme.colors.blackTwo}
+                            bgColor={appTheme.colors.blackTwo}
                             onChange={this.handleChangeFeeType}
                             options={Object.keys(FEES).map(cur => ({
                               label: cur.toLowerCase(),

app/views/settings.js

@@ -20,7 +20,7 @@ import { Clipboard } from '../components/clipboard';
 import { SelectComponent } from '../components/select';
 
 import rpc from '../../services/api';
-import { DARK, LIGHT } from '../constants/themes';
+import { DARK, LIGHT, THEME_MODE } from '../constants/themes';
 import electronStore from '../../config/electron-store';
 
 const HOME_DIR = electron.remote.app.getPath('home');
@@ -215,23 +215,19 @@ export class SettingsView extends PureComponent<Props, State> {
       error,
     } = this.state;
 
+    const themeOptions = [
+      { label: 'Dark', value: DARK },
+      { label: 'Light', value: LIGHT },
+    ];
+
     return (
       <Wrapper>
         <ThemeSelectWrapper>
           <SettingsTitle value='Theme' />
           <SelectComponent
-            onChange={newMode => electronStore.set('THEME_MODE', newMode)}
-            options={[
-              {
-                label: 'Dark',
-                value: DARK,
-              },
-              {
-                label: 'Light',
-                value: LIGHT,
-              },
-            ]}
-            value={electronStore.get('THEME_MODE')}
+            onChange={newMode => electronStore.set(THEME_MODE, newMode)}
+            value={electronStore.get(THEME_MODE)}
+            options={themeOptions}
           />
         </ThemeSelectWrapper>
         <ConfirmDialogComponent