builds icon system and css

src/client/components/graphics/Arrow/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default props => {
+  return (
+    <svg className="icon arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 199.35">
+      <line className="stroke" stroke={props.color} x1="12.5" y1="99.8" x2="192.8" y2="99.8"/>
+      <polyline className="stroke" stroke={props.color} points="102.5,190.1 192.8,99.8 102.5,9.5 "/>
+    </svg>
+  );
+};

src/client/components/layout/StepNav/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import Label from '../../type/Label';
+import Label from 'payload/client/components/type/Label';
+import Arrow from 'payload/client/components/graphics/Arrow';
 
 import './index.css';
 
@@ -16,7 +17,7 @@ class StepNav extends Component {
     return (
       <nav className="current-view-nav">
         {this.props.nav.length > 0
-          ? <Link to="/">{dashboardLabel}</Link>
+          ? <Link to="/">{dashboardLabel}<Arrow /></Link>
           : dashboardLabel
         }
         {this.props.nav.map((item, i) => {
@@ -24,7 +25,7 @@ class StepNav extends Component {
 
           const Step = this.props.nav.length === i + 1
             ? StepLabel
-            : <Link to={item.url} key={i}>{StepLabel}</Link>;
+            : <Link to={item.url} key={i}>{StepLabel}<Arrow /></Link>;
 
           return Step;
         })}

src/client/components/layout/StepNav/index.scss

@@ -9,8 +9,16 @@
   }
 
   a {
-    margin-right: rem(.25);
+    margin-right: rem(.33);
     border: 0;
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-left: rem(.33);
+      width: rem(.2);
+      height: rem(.2);
+    }
 
     label {
       cursor: pointer;

src/client/scss/_vars.scss

@@ -38,7 +38,7 @@ $green      : #3bffaa;
 $dark-green : #0FCE84;
 
 $light-gray : #f5f5f5;
-$gray       : #909090;
+$gray       : #afafaf;
 $black      : rgb(60, 60, 60);
 
 $pink       : #ff8efc;

src/client/scss/app.scss

@@ -93,3 +93,18 @@ a {
     border-bottom: 1px solid $dark-green;
   }
 }
+
+.icon {
+  @include color-svg($black);
+
+
+  path, line, polyline {
+    vector-effect: non-scaling-stroke;
+    shape-rendering:crispEdges;
+    fill: none;
+  }
+
+  .stroke {
+    stroke-width: $stroke-width;
+  }
+}