feature: add layout styles to console view

app/views/console.js

@@ -5,12 +5,37 @@ import React, { Component, Fragment } from 'react';
 import { ipcRenderer } from 'electron';
 import styled from 'styled-components';
 import generateRandomString from '../utils/generate-random-string';
+import { TextComponent } from '../components/text';
+
+import ConsoleSymbol from '../assets/images/console_zcash.svg';
 
 const Wrapper = styled.div`
   max-height: 100%;
   overflow-y: auto;
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  margin-top: ${props => props.theme.layoutContentPaddingTop};
+  border-radius: ${props => props.theme.boxBorderRadius};
+  padding: 38px 33.5px;
 `;
 
+const ConsoleText = styled(TextComponent)`
+  font-family: 'Source Code Pro', monospace;
+`;
+
+const ConsoleImg = styled.img`
+  height: 200px;
+  width: auto;
+`;
+
+const initialLog = `
+  Thank you for running a Zcash node!
+  You're helping to strengthen the network and contributing to a social good :)
+
+  In order to ensure you are adequately protecting your privacy when using Zcash, please see <https://z.cash/support/security/>.
+`;
+
+const breakpoints = [1, 4, 7, 10, 13];
+
 type Props = {};
 
 type State = {
@@ -18,22 +43,13 @@ type State = {
 };
 
 export class ConsoleView extends Component<Props, State> {
-  scrollView = React.createRef();
-
   state = {
     log: '',
   };
 
   componentDidMount() {
     ipcRenderer.on('zcashd-log', (event, message) => {
-      this.setState(state => ({
-        log: `${state.log}\n${message}`,
-      }));
-
-      if (this.scrollView && this.scrollView.current) {
-        // eslint-disable-next-line
-        this.scrollView.current.scrollTop = this.scrollView.current.scrollHeight;
-      }
+      this.setState(() => ({ log: initialLog + message }));
     });
   }
 
@@ -41,14 +57,20 @@ export class ConsoleView extends Component<Props, State> {
     const { log } = this.state;
 
     return (
-      <Wrapper ref={this.scrollView}>
-        {log
-          && log.split('\n').map(item => (
-            <Fragment key={generateRandomString()}>
-              {item}
-              <br />
-            </Fragment>
-          ))}
+      <Wrapper>
+        {log ? (
+          <Fragment>
+            <ConsoleImg src={ConsoleSymbol} alt='Zcashd' />
+            {log.split('\n').map((item, idx) => (
+              <Fragment key={generateRandomString()}>
+                <ConsoleText value={item} />
+                {breakpoints.includes(idx) ? <br /> : null}
+              </Fragment>
+            ))}
+          </Fragment>
+        ) : (
+          <ConsoleText value='Waiting for daemon logs...' />
+        )}
       </Wrapper>
     );
   }