refactor: work on console view and more theme work

app/components/dropdown.js

@@ -21,6 +21,7 @@ const MenuWrapper = styled.div`
   margin-left: -10px;
   max-width: 400px;
   overflow: hidden;
+  border: 1px solid ${props => props.theme.colors.border}
 `;
 
 const MenuItem = styled.button`

app/theme/colors/dark.js

@@ -76,6 +76,7 @@ export const DARK_COLORS = {
 
   // Console
   consoleBg: black,
+  consoleBorder: 'transparent',
 
   // Input
   inputBorder: 'transparent',

app/theme/colors/light.js

@@ -70,7 +70,7 @@ export const LIGHT_COLORS = {
 
   // Status Pill
   statusPillLabel: text,
-  statusPillBg: '#F2F2F2',
+  statusPillBg: '#F9FBFE',
   statusPillBorder: border,
 
   // QR Code
@@ -88,6 +88,7 @@ export const LIGHT_COLORS = {
 
   // Console
   consoleBg: white,
+  consoleBorder: border,
 
   // Misc
   divider: '#AAAAAA',

app/theme/theme.js

@@ -218,5 +218,9 @@ export const appTheme: AppTheme = {
       [LIGHT]: LIGHT_COLORS.sidebarItemHoveredBg,
       [DARK]: DARK_COLORS.sidebarItemHoveredBg,
     }),
+    consoleBorder: theme('mode', {
+      [LIGHT]: LIGHT_COLORS.consoleBorder,
+      [DARK]: DARK_COLORS.consoleBorder,
+    }),
   },
 };

app/views/console.js

@@ -1,21 +1,25 @@
 // @flow
 
-import React, { Component, Fragment } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { ipcRenderer } from 'electron';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import uuid from 'uuid/v4';
+
 import { TextComponent } from '../components/text';
 
-import ConsoleSymbol from '../assets/images/console_zcash.png';
+import ConsoleSymbolDark from '../assets/images/console_zcash_dark.png';
+import ConsoleSymbolLight from '../assets/images/console_zcash_light.png';
+import { DARK } from '../constants/themes';
 
 const Wrapper = styled.div`
   max-height: 100%;
   overflow-y: auto;
   background-color: ${props => props.theme.colors.consoleBg};
+  border: 1px solid ${props => props.theme.colors.consoleBorder};
   margin-top: ${props => props.theme.layoutContentPaddingTop};
   border-radius: ${props => props.theme.boxBorderRadius};
-  padding: 38px 33.5px;
+  padding: 30px;
 `;
 
 const ConsoleText = styled(TextComponent)`
@@ -53,13 +57,15 @@ const defaultState = `
 
 const breakpoints = [1, 4, 7, 10, 13];
 
-type Props = {};
+type Props = {
+  theme: AppTheme,
+};
 
 type State = {
   log: string,
 };
 
-export class ConsoleView extends Component<Props, State> {
+class Component extends PureComponent<Props, State> {
   state = {
     log: defaultState,
   };
@@ -76,6 +82,11 @@ export class ConsoleView extends Component<Props, State> {
 
   render() {
     const { log } = this.state;
+    const { theme } = this.props;
+
+    const ConsoleSymbol = theme.mode === DARK
+      ? ConsoleSymbolDark
+      : ConsoleSymbolLight;
 
     return (
       <Wrapper id='console-wrapper'>
@@ -92,3 +103,5 @@ export class ConsoleView extends Component<Props, State> {
     );
   }
 }
+
+export const ConsoleView = withTheme(Component);

flow-custom-typedefs/theme.js

@@ -36,6 +36,7 @@ type Colors = {
 
   // Console
   consoleBg: ThemeSet,
+  consoleBorder: ThemeSet,
 
   // Buttons
   buttonPrimaryText: ThemeSet,