DP logo and colours

client/components/Nav.jsx

@@ -17,7 +17,8 @@ import { metaKeyName, } from '../utils/metaKey';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
-import LogoIcon from '../images/p5js-logo-small.svg';
+// import LogoIcon from '../images/p5js-logo-small.svg';
+import LogoIcon from '../images/dp-logo-line-drawing.svg';
 
 class Nav extends React.PureComponent {
   constructor(props) {

client/styles/abstracts/_variables.scss

@@ -1,7 +1,7 @@
 $base-font-size: 12;
 
 //colors
-$p5js-pink: #ed225d;
+$p5js-pink: #FFE117; /*DP Colours*/
 $processing-blue: #007BBB;
 $p5js-active-pink: #f10046;
 $white: #fff;

client/styles/components/_nav.scss

@@ -166,12 +166,23 @@
 
 .nav__item-logo {
   position: relative;
-  height: #{42 / $base-font-size}rem;
+  height: #{(42 - 1) / $base-font-size}rem;
   width: #{56 / $base-font-size}rem;
+  background:$p5js-pink;
 
   & span {
     position: absolute;
   }
+
+  svg{
+    width: 100%;
+    height: 90%;
+    padding-top: 5%;
+
+    path{
+      stroke: $dark;
+    }
+  }
 }
 .svg__logo g > path {
   @include themify() {

client/theme.js

@@ -7,7 +7,7 @@ export const Theme = {
 };
 
 export const colors = {
-  p5jsPink: '#ed225d',
+  p5jsPink: '#FFE117', // DP Colours
   processingBlue: '#007BBB',
   p5jsActivePink: '#f10046',
   white: '#fff',