refactor images, change heading colors on scroll

packages/microcosm-www-next/src/components/graphic.js

@@ -1,13 +1,18 @@
 import React from 'react'
 
-const Graphic = ({ section, graphicUrl }) => (
+const Graphic = ({ section, microcosmView }) => (
   <figure
     id={'graphic-' + section}
     className="section__graphic__figure"
     data-module="ObserveGraphic"
     data-section={section}
   >
-    <img src={graphicUrl} alt="TODO" />
+    <img
+      src={
+        microcosmView ? `/${section}-microcosm.png` : `/${section}-browser.png`
+      }
+      alt="TODO"
+    />
   </figure>
 )
 

packages/microcosm-www-next/src/data/index.json

@@ -3,25 +3,49 @@
     "num": "01.",
     "heading": "Rendering a View",
     "microcosmText": "The <a href='TODO'>Domains</a> are in charge of keeping state organized, and provide whatever data is necessary to the Presenter. A Presenter at its core is a React Component, so it uses the data it pulls from the Domains to render the appropriate view.",
-    "browserText": "A user fires up the browser to take a quiz.",
-    "microcosmUrl": "../static/images/v.png",
-    "browserUrl": "http://via.placeholder.com/400x400"
+    "browserText": "A user fires up the browser to take a quiz."
   },
   "2": {
     "num": "02.",
     "heading": "Creating an Action",
     "microcosmText": "The <a href='TODO'>Presenter</a> creates a new <a href='TODO'>Action</a> in response to the user's click. This particular Action's job will be to fetch some data from an external API on cats. Cool cats.",
-    "browserText": "A user selects an option from the quiz list.",
-    "microcosmUrl": "http://via.placeholder.com/500x500",
-    "browserUrl": "http://via.placeholder.com/300x300"
+    "browserText": "A user selects an option from the quiz list."
   },
   "3": {
     "num": "03.",
     "heading": "The Repository",
     "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
-    "browserText": "Lorem Ipsum.",
-    "microcosmUrl": "http://via.placeholder.com/400x400",
-    "browserUrl": "http://via.placeholder.com/200x200"
+    "browserText": "Lorem Ipsum."
+  },
+  "4": {
+    "num": "04.",
+    "heading": "The Action Begins",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "5": {
+    "num": "05.",
+    "heading": "History's Job",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "6": {
+    "num": "06.",
+    "heading": "Domains Update the State",
+    "microcosmText": "As guardians of the application data, Domains are in charge of updating their state whenever an Action changes status. Here, they're alerted that the Cool Cat Action is now Open. The Modal Domain reacts by updating their state to specify that the modal is open but in a loading state. The Cat’s Domain doesn't care so they just sit there.",
+    "browserText": "The modal opens!"
+  },
+  "7": {
+    "num": "07.",
+    "heading": "Needs a Name",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "8": {
+    "num": "08.",
+    "heading": "History Keeps Track of the Actions",
+    "microcosmText": "Clicking the 'X' triggers the action process all over again. The Presenter sends a new Action up to the Repo. The Action is immediately appended to History and gets to work on it's task. This time however, it doesn't have a slow API to work with like our Cool Cat Action (which is still waiting), it just has a simple message: 'Close the Modal!'. Since the Action is so straightforward, it skips the open step and jumps it's status straight to resolve. The Domains are alerted of the new activity - Close Modal Action is Resolved, and the Modal Domain adjusts it's state accordingly. Yet again, the Cats Domain doesn't care.",
+    "browserText": "Lorem Ipsum."
   }
 }
 

packages/microcosm-www-next/src/images/index.js

@@ -0,0 +1,5 @@
+import menu from './menu.png'
+import VigetLogo from './viget-logo.js'
+import microcosmLogo from './microcosm-logo.png'
+
+export { menu, VigetLogo, microcosmLogo }

packages/microcosm-www-next/src/layouts/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
-import VigetLogo from '../components/viget-logo'
+import { menu, VigetLogo, microcosmLogo } from '../images'
 import '../stylesheets/app.scss'
 
 const isBrowser = typeof window !== 'undefined'
@@ -17,10 +17,10 @@ const Navigation = () => (
     <div className="wrapper">
       <h1>
         <span className="screenreader-only">Microcosm</span>
-        <img src="./static/images/microcosm-logo.png" alt="" />
+        <img src={microcosmLogo} alt="" />
       </h1>
 
-      <img src="./static/images/menu.png" alt="menu" />
+      <img src={menu} alt="menu" />
     </div>
   </nav>
 )

packages/microcosm-www-next/src/pages/index.js

@@ -140,13 +140,7 @@ export default class IndexPage extends React.Component {
 
           <div className="section__graphic">
             {this.state.numSections.map(num => (
-              <Graphic
-                key={num}
-                section={num}
-                graphicUrl={
-                  microcosmView ? data[num].microcosmUrl : data[num].browserUrl
-                }
-              />
+              <Graphic key={num} section={num} microcosmView={microcosmView} />
             ))}
           </div>
         </section>

packages/microcosm-www-next/src/stylesheets/setup/_colors.scss

@@ -13,6 +13,42 @@ $colors: (
   bg-3-bottom: #19594d,
   bg-3-nav: #2c6e67,
   bg-3-footer: #10453b,
+  bg-4-top: #fec42e,
+  bg-4-bottom: #d69b00,
+  bg-4-nav: #b18920,
+  bg-4-footer: #b18920,
+  bg-5-top: #2bbbec,
+  bg-5-bottom: #2d5cae,
+  bg-5-nav: #1e83a5,
+  bg-5-footer: #214c98,
+  bg-6-top: #a3228e,
+  bg-6-bottom: #66339d,
+  bg-6-nav: #721863,
+  bg-6-footer: #55258a,
+  bg-7-top: #a5bee4,
+  bg-7-bottom: #48648f,
+  bg-7-nav: #73859f,
+  bg-7-footer: #334d75,
+  bg-8-top: #88d0c3,
+  bg-8-bottom: #00a287,
+  bg-8-nav: #5f9188,
+  bg-8-footer: #00846e,
+  primary-1: #c9dfff,
+  primary-2: #c34040,
+  primary-3: #7aeed9,
+  primary-4: #b18920,
+  primary-5: #214c98,
+  primary-6: #ff98d8,
+  primary-7: #334d75,
+  primary-8: #00846e,
+  secondary-1: #c9dfff,
+  secondary-2: #ffa991,
+  secondary-3: #7aeed9,
+  secondary-4: #ffdc81,
+  secondary-5: #d3f7ff,
+  secondary-6: #ff98d8,
+  secondary-7: #a5bee4,
+  secondary-8: #88d0c3,
 
   // elements
   text : #fff,

packages/microcosm-www-next/src/stylesheets/setup/_dimensions.scss

@@ -5,4 +5,4 @@ $page-gutter-desktop: 20px;
 $nav-height: 76px;
 $footer-height: 145px;
 
-$section-count: 3;
+$section-count: 8;

packages/microcosm-www-next/src/stylesheets/structure/_body.scss

@@ -21,7 +21,7 @@ body {
     }
   }
 
-  @for $i from 1 through $section-count {
+  @for $i from 2 through $section-count {
     &.bg-color-#{$i} {
       background-color: color(bg-#{$i}-bottom);
 

packages/microcosm-www-next/src/stylesheets/structure/_footer.scss

@@ -10,9 +10,17 @@ $cta-bottom-padding: 6px;
   width: 100%;
   z-index: 2;
 
-  @for $i from 1 through $section-count {
+  @for $i from 2 through $section-count {
     .bg-color-#{$i} & {
       background-color: color(bg-#{$i}-footer);
+
+      .viget-logo svg {
+        fill: color(secondary-#{$i});
+      }
+
+      .footer__cta {
+        color: color(secondary-#{$i});
+      }
     }
   }
 
@@ -49,16 +57,18 @@ $cta-bottom-padding: 6px;
     }
 
     svg {
-      fill: rgba(#fff, 0.5);
+      fill: color(secondary-1);
+      transition: transition(fill);
     }
   }
 }
 
 .footer__cta {
   border-bottom: $cta-border-height solid;
-  color: rgba(#fff, 0.5);
+  color: color(secondary-1);
   font-size: rem(14);
   padding-bottom: $cta-bottom-padding;
   text-decoration: none;
   text-transform: uppercase;
+  transition: transition(color);
 }

packages/microcosm-www-next/src/stylesheets/structure/_nav.scss

@@ -9,7 +9,7 @@
   z-index: 2;
   transition: transition(background-color);
 
-  @for $i from 1 through $section-count {
+  @for $i from 2 through $section-count {
     .bg-color-#{$i} & {
       background-color: color(bg-#{$i}-nav);
     }

packages/microcosm-www-next/src/stylesheets/structure/_section.scss

@@ -90,9 +90,17 @@ $section-top-padding-desktop: $nav-height + 110px;
 // CONTENT - elements
 
 .section__content__heading {
+  color: color(primary-1);
   font-size: rem(30);
   margin-bottom: rem(40);
   position: relative;
+  transition: transition(color);
+
+  @for $i from 2 through $section-count {
+    .bg-color-#{$i} & {
+      color: color(primary-#{$i});
+    }
+  }
 
   @include breakpoint(large-desktop-up) {
     margin-bottom: rem(63);
@@ -114,8 +122,16 @@ $section-top-padding-desktop: $nav-height + 110px;
 
 .section__content__subheading {
   @include font-family-medium;
+  color: color(secondary-1);
   margin-bottom: 0.5rem;
   text-transform: uppercase;
+  transition: transition(color);
+
+  @for $i from 2 through $section-count {
+    .bg-color-#{$i} & {
+      color: color(secondary-#{$i});
+    }
+  }
 
   .toggle-container.-mobile & {
     @include breakpoint(medium-desktop-down) {
@@ -167,14 +183,23 @@ $section-top-padding-desktop: $nav-height + 110px;
 }
 
 .section__toggle-btn {
+  background-color: color(secondary-1);
   border-radius: 10px;
+  font-size: rem(18);
   height: 57px;
   text-transform: uppercase;
+  transition: transition(background-color);
   width: 217px;
-  font-size: rem(18);
+
+  @for $i from 2 through $section-count {
+    .bg-color-#{$i} & {
+      background-color: color(secondary-#{$i});
+    }
+  }
 
   &::after {
     content: 'Browser View';
+    opacity: 0.6;
   }
 
   &.-browserView {
@@ -224,6 +249,10 @@ $section-top-padding-desktop: $nav-height + 110px;
   &:last-child {
     @include breakpoint(large-desktop-up) {
       margin-bottom: 60vh;
+
+      &::after {
+        content: ''
+      }
     }
   }