Feature/dashboard

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
-  "editor.formatOnSave": true,
-  "prettier.trailingComma": "all",
-  "prettier.eslintIntegration": true,
-  "prettier.semi": true,
-  "prettier.singleQuote": true
+    "editor.formatOnSave": true,
+    "prettier.trailingComma": "all",
+    "prettier.eslintIntegration": true,
+    "prettier.semi": true,
+    "prettier.singleQuote": true,
+    "editor.tabSize": 4,
+    "editor.detectIndentation": false
 }

gatsby-browser.js

@@ -4,4 +4,4 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
- // You can delete this file if you're not using it
+// You can delete this file if you're not using it

gatsby-config.js

@@ -1,18 +1,18 @@
 const path = require('path');
 module.exports = {
-  siteMetadata: {
-    title: 'Shorted',
-  },
-  plugins: [
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-styled-components',
-    `gatsby-transformer-yaml`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        path: `${__dirname}/data/stocks`,
-        name: 'stocks',
-      },
+    siteMetadata: {
+        title: 'Shorted',
     },
-  ],
+    plugins: [
+        'gatsby-plugin-react-helmet',
+        'gatsby-plugin-styled-components',
+        `gatsby-transformer-yaml`,
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                path: `${__dirname}/data/stocks`,
+                name: 'stocks',
+            },
+        },
+    ],
 };

gatsby-node.js

@@ -4,35 +4,37 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
- // You can delete this file if you're not using it
- const path = require('path');
+// You can delete this file if you're not using it
+const path = require('path');
 
- exports.createPages = ({ graphql, actions }) => {
-    const { createPage } = actions;
-    const stockProfileTemplate = path.resolve(`src/templates/stock-profile-template.js`);
-    return graphql(`{
-        allStocksYaml {
-            edges {
-              node {
-                code,
-                sector
-              }
+exports.createPages = ({graphql, actions}) => {
+    const {createPage} = actions;
+    const stockProfileTemplate = path.resolve(
+        `src/templates/stock-profile-template.js`,
+    );
+    return graphql(`
+        {
+            allStocksYaml {
+                edges {
+                    node {
+                        code
+                        sector
+                    }
+                }
             }
-          }
-    }`)
-    .then(result => {
+        }
+    `).then(result => {
         if (result.errors) {
             return Promise.reject(result.errors);
         }
-        result.data.allStocksYaml.edges
-            .forEach(({ node }) => {
-                createPage({
-                    path: node.code.toUpperCase(),
-                    component: stockProfileTemplate,
-                    context: {
-                        code: node.code
-                    }
-                });
+        result.data.allStocksYaml.edges.forEach(({node}) => {
+            createPage({
+                path: node.code.toUpperCase(),
+                component: stockProfileTemplate,
+                context: {
+                    code: node.code,
+                },
             });
+        });
     });
- }
+};

gatsby-ssr.js

@@ -4,4 +4,4 @@
  * See: https://www.gatsbyjs.org/docs/ssr-apis/
  */
 
- // You can delete this file if you're not using it
+// You can delete this file if you're not using it

src/components/AboutHeader/index.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import Transition from 'react-transition-group/Transition'
-import AboutHeaderHero from '../../assets/images/about-main.svg'
+import React from 'react';
+import Transition from 'react-transition-group/Transition';
+import AboutHeaderHero from '../../assets/images/about-main.svg';
 import {
-  HeroWrapper,
-  HeroButtonWrapper,
-  HeroTitleWrapper,
-  duration,
-  transitionStyles,
-  Wrapper
-} from './style'
+    HeroWrapper,
+    HeroButtonWrapper,
+    HeroTitleWrapper,
+    duration,
+    transitionStyles,
+    Wrapper,
+} from './style';
 
 /**
  * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc
@@ -18,53 +18,59 @@ import {
  *
  */
 class AboutHeader extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      inside: false
+    constructor(props) {
+        super(props);
+        this.state = {
+            inside: false,
+        };
+    }
+    componentDidMount() {
+        this.toggleEnterState();
     }
-  }
-  componentDidMount () {
-    this.toggleEnterState()
-  }
 
-  toggleEnterState () {
-    this.setState({ inside: true })
-  }
+    toggleEnterState() {
+        this.setState({inside: true});
+    }
 
-  render () {
-    return (
-      <Transition timeout={duration} in appear>
-        {state => {
-          return (
-            <Wrapper duration={duration} {...transitionStyles[state]}>
-              <HeroWrapper>
-                <img alt='shorted-hero' width={'100%'} src={AboutHeaderHero} />
-              </HeroWrapper>
-              <HeroTitleWrapper>
-                <div className='hero-title'>
-                  <div className='header-1'>
-                    Hello, we are
-                  </div>
-                  <div className='header-2'>
-                    Shorted
-                  </div>
-                </div>
-                <div className='hero-description'>
-                  Bringing ASX market short positions to your front door, with added insights and intelligence.
-                </div>
-                <div className='hero-button'>
-                  <HeroButtonWrapper href={'/'}>
-                    Dashboard
-                  </HeroButtonWrapper>
-                </div>
-              </HeroTitleWrapper>
-            </Wrapper>
-          )
-        }}
-      </Transition>
-    )
-  }
+    render() {
+        return (
+            <Transition timeout={duration} in appear>
+                {state => {
+                    return (
+                        <Wrapper
+                            duration={duration}
+                            {...transitionStyles[state]}>
+                            <HeroWrapper>
+                                <img
+                                    alt="shorted-hero"
+                                    width={'100%'}
+                                    src={AboutHeaderHero}
+                                />
+                            </HeroWrapper>
+                            <HeroTitleWrapper>
+                                <div className="hero-title">
+                                    <div className="header-1">
+                                        Hello, we are
+                                    </div>
+                                    <div className="header-2">Shorted</div>
+                                </div>
+                                <div className="hero-description">
+                                    Bringing ASX market short positions to your
+                                    front door, with added insights and
+                                    intelligence.
+                                </div>
+                                <div className="hero-button">
+                                    <HeroButtonWrapper href={'/'}>
+                                        Dashboard
+                                    </HeroButtonWrapper>
+                                </div>
+                            </HeroTitleWrapper>
+                        </Wrapper>
+                    );
+                }}
+            </Transition>
+        );
+    }
 }
 
-export default AboutHeader
+export default AboutHeader;

src/components/AboutHeader/style.js

@@ -1,70 +1,70 @@
-import styled from 'styled-components'
+import styled from 'styled-components';
 
-export const duration = 500
+export const duration = 500;
 export const transitionStyles = {
-  entering: { opacity: 0, Ypos: -100 },
-  entered: { opacity: 1, Ypos: 0 },
-  exited: { opacity: 0 }
-}
+    entering: {opacity: 0, Ypos: -100},
+    entered: {opacity: 1, Ypos: 0},
+    exited: {opacity: 0},
+};
 
 export const HeroButtonWrapper = styled.a`
     grid-area: hero-button;
     width: 210px;
     height: 80px;
     display: flex;
-    text-decoration:none;
+    text-decoration: none;
     justify-content: center; /* align horizontal */
     align-items: center; /* align vertical */
     margin: 5px;
     border-radius: 30px;
     color: white;
     background: #282fc3;
-    outline:0;
+    outline: 0;
     font-size: 30px;
-    font-family: "Avenir Next,Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+    font-family: 'Avenir Next,Segoe UI', Helvetica, Arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     font-weight: bold;
-    background: linear-gradient(-135deg, #827D9F, #0F0646);
+    background: linear-gradient(-135deg, #827d9f, #0f0646);
     &:hover {
-        -webkit-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75);
-        -moz-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75);
-        box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75);
+        -webkit-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75);
+        -moz-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75);
+        box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75);
         color: #eee;
-        text-decoration: none!important;
+        text-decoration: none !important;
         height: 80px;
         transition: height 0.66s ease-out;
         margin-bottom: 5px;
     }
-`
+`;
 
 export const Wrapper = styled.div`
     display: grid;
     grid-gap: 20px;
     grid-template-columns: 1fr 2fr;
-    grid-template-areas:
-        "hero-title hero-image";
+    grid-template-areas: 'hero-title hero-image';
     margin-right: 100px;
     margin-left: 100px;
     margin-top: 250px;
     opacity: ${props => props.opacity};
     transition: ${props => `${props.duration}ms ease-in-out`};
     transition-property: opacity, transform;
     transform: ${props => `translateY(${props.Ypos}px)`};
-`
+`;
 
 export const HeroWrapper = styled.div`
     grid-area: hero-image;
     width: 100%;
-`
+`;
 export const HeroTitleWrapper = styled.div`
     grid-area: hero-title;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 3fr 1fr 1fr;
     grid-template-areas:
-        "hero-title"
-        "hero-description"
-        "todo"
-        "hero-button";
+        'hero-title'
+        'hero-description'
+        'todo'
+        'hero-button';
     .hero-title {
         margin-top: 50%;
         display: flex;
@@ -79,7 +79,7 @@ export const HeroTitleWrapper = styled.div`
             float: left;
             font-size: 70px;
             font-weight: bold;
-            font-family: Avenir Next,sans-serif;
+            font-family: Avenir Next, sans-serif;
         }
         .header-2 {
             display: flex;
@@ -89,7 +89,7 @@ export const HeroTitleWrapper = styled.div`
             vertical-align: middle;
             grid-area: hero-title;
             font-size: 75px;
-            font-family: Avenir Next,sans-serif;
+            font-family: Avenir Next, sans-serif;
             font-weight: bold;
             color: #282fc3;
             float: left;
@@ -101,7 +101,7 @@ export const HeroTitleWrapper = styled.div`
         grid-area: hero-description;
         font-weight: 300;
         font-size: 30px;
-        font-family: Avenir Next,sans-serif;
+        font-family: Avenir Next, sans-serif;
     }
     .hero-button {
         grid-area: hero-button;
@@ -111,4 +111,4 @@ export const HeroTitleWrapper = styled.div`
         vertical-align: middle;
         height: 70px;
     }
-`
+`;