renames default icon / logo to avoid confusion

demo/client/components/graphics/Logo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import PayloadLogo from 'payload/client/components/graphics/Logo';
+import PayloadLogo from 'payload/client/components/graphics/PayloadLogo';
 
 export default props => {
   return (

src/client/components/graphics/PayloadIcon/icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#333;}.cls-2{fill:#666;}</style></defs><title>icon</title><path class="cls-1" d="M49.12.26l-43,26.92a1.64,1.64,0,0,0-.79,1.52V71.41a1.7,1.7,0,0,0,.79,1.43l43,26.9a1.62,1.62,0,0,0,1.77,0l43-26.9a1.69,1.69,0,0,0,.78-1.43V28.7a1.61,1.61,0,0,0-.78-1.41l-43-27A1.62,1.62,0,0,0,49.12.26ZM85.64,68.9,51.05,90.66a1.94,1.94,0,0,1-2.07,0L14.23,68.9a1.92,1.92,0,0,1-.91-1.64V32.74a1.92,1.92,0,0,1,.91-1.64L49,9.34a1.94,1.94,0,0,1,2.07,0L85.77,31.1a1.9,1.9,0,0,1,.92,1.64V67.26a1.9,1.9,0,0,1-.92,1.64Z"/><path class="cls-1" d="M50,53.56v25.6a1.52,1.52,0,0,0,2.32,1.28l24.9-15.66a2.44,2.44,0,0,0,1.12-2V37.15A2.2,2.2,0,0,0,78,36Z"/><path class="cls-2" d="M77.22,35.14l-.34-.21-25.6-16a2.46,2.46,0,0,0-2.61,0L28.5,31.59,24,34.38a1.73,1.73,0,0,0-.55,2.38,1.8,1.8,0,0,0,.55.55L33,42.92,50,53.59,78,36A2.32,2.32,0,0,0,77.22,35.14Z"/></svg>

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './index.css';
+
+export default () => {
+  return (
+    <svg className="payload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <title>Payload icon</title>
+      <path className="cls-1" d="M49.12.26l-43,26.92a1.64,1.64,0,0,0-.79,1.52V71.41a1.7,1.7,0,0,0,.79,1.43l43,26.9a1.62,1.62,0,0,0,1.77,0l43-26.9a1.69,1.69,0,0,0,.78-1.43V28.7a1.61,1.61,0,0,0-.78-1.41l-43-27A1.62,1.62,0,0,0,49.12.26ZM85.64,68.9,51.05,90.66a1.94,1.94,0,0,1-2.07,0L14.23,68.9a1.92,1.92,0,0,1-.91-1.64V32.74a1.92,1.92,0,0,1,.91-1.64L49,9.34a1.94,1.94,0,0,1,2.07,0L85.77,31.1a1.9,1.9,0,0,1,.92,1.64V67.26a1.9,1.9,0,0,1-.92,1.64Z"/>
+      <path className="cls-1" d="M50,53.56v25.6a1.52,1.52,0,0,0,2.32,1.28l24.9-15.66a2.44,2.44,0,0,0,1.12-2V37.15A2.2,2.2,0,0,0,78,36Z"/>
+      <path className="cls-2" d="M77.22,35.14l-.34-.21-25.6-16a2.46,2.46,0,0,0-2.61,0L28.5,31.59,24,34.38a1.73,1.73,0,0,0-.55,2.38,1.8,1.8,0,0,0,.55.55L33,42.92,50,53.59,78,36A2.32,2.32,0,0,0,77.22,35.14Z"/>
+    </svg>
+  );
+};

src/client/components/graphics/PayloadIcon/index.scss

@@ -0,0 +1,8 @@
+.payload-icon {
+  .cls-1 {
+    fill:#333;
+  }
+  .cls-2 {
+    fill:#666;
+  }
+}

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

@@ -4,7 +4,7 @@ import './index.css';
 
 export default () => {
   return (
-    <svg className="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 38.33">
+    <svg className="payload-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 38.33">
       <path className="cls-1" d="M64.41,29.73a.65.65,0,0,1-.65.64H62a.65.65,0,0,1-.65-.64V8.44A.65.65,0,0,1,62,7.79H67.8a6.78,6.78,0,0,1,0,13.55H64.73a.3.3,0,0,0-.32.32Zm.32-18.87a.3.3,0,0,0-.32.32V18a.31.31,0,0,0,.32.33H67.8a3.71,3.71,0,0,0,0-7.42Z"/><path className="cls-1" d="M83.25,29.89a.65.65,0,0,1-.61.48H80.86c-.51,0-.71-.35-.64-.64l6-21.45a.62.62,0,0,1,.61-.49h2.26a.63.63,0,0,1,.61.49l6,21.45c.06.29-.13.64-.65.64H93.28a.64.64,0,0,1-.61-.48L91.25,25a.6.6,0,0,0-.62-.45H85.28a.61.61,0,0,0-.61.45Zm2.45-8.74c-.06.25.06.35.26.35h4c.19,0,.32-.1.26-.35l-2.1-9c0-.13-.07-.2-.13-.2h-.06c-.07,0-.1.07-.13.2Z"/><path className="cls-1" d="M112.67,8.28c.13-.36.32-.49.61-.49h2.13a.62.62,0,0,1,.52.91l-5.42,13.9v7.13a.65.65,0,0,1-.65.64h-1.8a.65.65,0,0,1-.65-.64v-7.1L101.93,8.7a.61.61,0,0,1,.51-.91h2.13a.61.61,0,0,1,.62.49l3.64,10c.06.16.19.16.26,0Z"/><path className="cls-1" d="M128,27a.31.31,0,0,0,.32.33h7.87a.65.65,0,0,1,.65.64v1.78a.65.65,0,0,1-.65.64H125.54a.64.64,0,0,1-.64-.64V8.44a.65.65,0,0,1,.64-.65h1.78a.65.65,0,0,1,.64.65Z"/><path className="cls-1" d="M158.12,14.24a51.32,51.32,0,0,1,0,9.68,7.19,7.19,0,0,1-7.25,6.71c-3.88,0-6.75-2.55-7.26-6.71a48.92,48.92,0,0,1,0-9.68,7.24,7.24,0,0,1,7.26-6.7C154.74,7.54,157.61,10.08,158.12,14.24Zm-11.45,0a48.92,48.92,0,0,0,0,9.68,4.1,4.1,0,0,0,4.2,3.65,4,4,0,0,0,4.19-3.65,42.92,42.92,0,0,0,0-9.68,4.24,4.24,0,0,0-8.39,0Z"/><path className="cls-1" d="M167.13,29.89a.66.66,0,0,1-.62.48h-1.77c-.52,0-.71-.35-.65-.64l6-21.45a.63.63,0,0,1,.62-.49H173a.64.64,0,0,1,.62.49l6,21.45c.06.29-.13.64-.65.64h-1.77a.66.66,0,0,1-.62-.48L175.12,25a.59.59,0,0,0-.61-.45h-5.35a.63.63,0,0,0-.62.45Zm2.45-8.74c-.07.25.06.35.25.35h4c.2,0,.33-.1.26-.35l-2.09-9c0-.13-.07-.2-.13-.2h-.07c-.06,0-.09.07-.13.2Z"/><path className="cls-1" d="M186.87,30.37a.65.65,0,0,1-.65-.64V8.44a.65.65,0,0,1,.65-.65H193c3.74,0,6.32,3,6.77,6.78a44.67,44.67,0,0,1,0,9c-.42,3.71-3,6.77-6.77,6.77ZM193,27.31a4,4,0,0,0,3.71-3.71,42.59,42.59,0,0,0,0-9A4,4,0,0,0,193,10.86h-3.39a.3.3,0,0,0-.32.32V27a.31.31,0,0,0,.32.33Z"/><path className="cls-1" d="M16.78.1.3,10.42A.62.62,0,0,0,0,11V27.37a.65.65,0,0,0,.3.55L16.78,38.23a.64.64,0,0,0,.68,0L33.94,27.92a.65.65,0,0,0,.3-.55V11a.62.62,0,0,0-.3-.54L17.46.1A.64.64,0,0,0,16.78.1Zm14,26.31L17.52,34.75a.75.75,0,0,1-.79,0L3.41,26.41a.75.75,0,0,1-.35-.63V12.55a.75.75,0,0,1,.35-.63L16.73,3.58a.75.75,0,0,1,.79,0l13.31,8.34a.73.73,0,0,1,.35.63V25.78A.73.73,0,0,1,30.83,26.41Z"/><path className="cls-1" d="M17.12,20.53v9.81a.58.58,0,0,0,.89.49l9.54-6a.93.93,0,0,0,.43-.77V14.24a.82.82,0,0,0-.12-.43Z"/><path className="cls-2" d="M27.55,13.47l-.13-.08L17.61,7.24a.94.94,0,0,0-1,0L8.88,12.11,7.17,13.18a.66.66,0,0,0,0,1.12l3.42,2.15,6.53,4.09,10.74-6.73A.85.85,0,0,0,27.55,13.47Z"/>
     </svg>
   );

src/client/components/graphics/PayloadLogo/index.scss

@@ -1,4 +1,4 @@
-.logo {
+.payload-logo {
   .cls-1 {
     fill:#333;
   }

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

@@ -2,6 +2,7 @@
 
 .sidebar {
   position: fixed;
+  top: 0;
   left: 0;
   width: rem(6);
   padding: rem(1);

src/client/scss/_type.scss

@@ -6,70 +6,70 @@
 /////////////////////////////
 
 %h1, %h2, %h3, %h4, %h5 {
-    font-family: $font-brand;
-    font-weight: 700;
-    color: lighten($black, 4%);
+  font-family: $font-brand;
+  font-weight: 700;
+  color: lighten($black, 4%);
 }
 
 %jumbo {
-    font-size: rem(2.5);
-    line-height: 1;
-    margin: 0 0 rem(2);
+  font-size: rem(2.5);
+  line-height: 1;
+  margin: 0 0 rem(2);
 }
 
 %h1 {
   margin: 0 0 rem(1.5);
-    font-size: rem(2);
-    line-height: rem(2);
-    letter-spacing: rem(.025);
+  font-size: rem(1);
+  line-height: rem(1);
 
-    @include small-break {
-        font-size: rem(1.25);
-        line-height: rem(1.25);
-    }
+  @include small-break {
+    letter-spacing: rem(0);
+    font-size: rem(1.25);
+    line-height: rem(1.25);
+  }
 }
 
 %h2 {
-    margin: 0 0 rem(1);
-    font-size: rem(1.5);
-    line-height: rem(1.75);
-    letter-spacing: rem(.02);
+  margin: 0 0 rem(1);
+  font-size: rem(1.5);
+  line-height: rem(1.75);
+  letter-spacing: rem(.02);
 
-    @include small-break {
-        font-size: rem(.85);
-        line-height: rem(.85);
-    }
+  @include small-break {
+    font-size: rem(.85);
+    line-height: rem(.85);
+  }
 }
 
 %h3 {
-    margin: 0 0 rem(1);
-    font-size: rem(1);
-    line-height: 1.25;
-    font-weight: 500;
+  margin: 0 0 rem(1);
+  font-size: rem(1);
+  line-height: 1.25;
+  font-weight: 500;
 
-    @include small-break {
-        font-size: rem(.65);
-        line-height: rem(.75);
-    }
+  @include small-break {
+    font-size: rem(.65);
+    line-height: rem(.75);
+  }
 }
 
 %h4 {
-    margin: 0 0 $base;
-    font-size: rem(.75);
-    line-height: 1.5;
+  margin: 0 0 $base;
+  font-size: rem(.75);
+  line-height: 1.5;
 }
 
 %h5 {
-    margin: 0;
-    font-size: rem(.5);
-    line-height: 1.5;
-    font-weight: 700;
+  margin: 0;
+  font-size: rem(.5);
+  line-height: 1.5;
+  font-weight: 700;
 }
 
 %small {
-    margin: 0;
-    font-size: rem(.4);
-    line-height: 1.5;
+  margin: 0;
+  font-size: rem(.4);
+  line-height: 1.5;
 }
 
 /////////////////////////////
@@ -77,39 +77,39 @@
 /////////////////////////////
 
 %label {
-    text-transform: uppercase;
-    letter-spacing: rem(.1);
-    font-size: rem(.275);
-    font-family: $font-label;
-    -webkit-font-smoothing: auto;
+  text-transform: uppercase;
+  letter-spacing: rem(.1);
+  font-size: rem(.275);
+  font-family: $font-label;
+  -webkit-font-smoothing: auto;
 
-    @include mid-break {
-        font-size: rem(.375);
-        letter-spacing: rem(.05);
-    }
+  @include mid-break {
+    font-size: rem(.375);
+    letter-spacing: rem(.05);
+  }
 }
 
 %large-body {
-    font-size: rem(.6);
+  font-size: rem(.6);
+  line-height: rem(1);
+  letter-spacing: rem(.02);
+
+  @include mid-break {
+    font-size: rem(.7);
     line-height: rem(1);
-    letter-spacing: rem(.02);
+  }
 
-    @include mid-break {
-        font-size: rem(.7);
-        line-height: rem(1);
-    }
-
-    @include small-break {
-        font-size: rem(.55);
-        line-height: rem(.75);
-    }
+  @include small-break {
+    font-size: rem(.55);
+    line-height: rem(.75);
+  }
 }
 
 %code {
-    font-size: rem(.4);
-    color: $gray;
+  font-size: rem(.4);
+  color: $gray;
 
-    span {
-        color: $black;
-    }
+  span {
+    color: $black;
+  }
 }

src/client/scss/app.scss

@@ -27,7 +27,7 @@ html {
   line-height: rem(1);
   font-size: 20px;
 
-/*  @include mid-break {
+  @include mid-break {
     font-size: 18px;
     line-height: rem(1);
   }
@@ -35,7 +35,7 @@ html {
   @include small-break {
     font-size: 16px;
     line-height: rem(.8)
-  }*/
+  }
 }
 
 ::selection {