test: fixing SASS variable name in example styles

Making the variable name match the element it's being applied to.

Author: davidjoy

example/src/App.jsx

@@ -28,7 +28,7 @@ export default function App() {
       <p>Test process.env variable: {process.env.TEST_VARIABLE}</p>
       <p>Non-existent process.env variable (nothing here is good): {process.env.I_AM_NOT_HERE}</p>
       <h2>env.config.js tests</h2>
-      <p>env.config.js boolean test:
+      <p><span>env.config.js boolean test: </span>
         {config.FALSE_VALUE === false ? config.CORRECT_BOOL_VALUE : config.INCORRECT_BOOL_VALUE}
       </p>
       <p>env.config.js integer test: {Number.isInteger(config.INTEGER_VALUE) ? 'It was an integer. Great.' : 'It was not an integer! Why not? '}</p>

example/src/__snapshots__/App.test.jsx.snap

@@ -87,7 +87,9 @@ exports[`Basic test should render 1`] = `
     env.config.js tests
   </h2>
   <p>
-    env.config.js boolean test:
+    <span>
+      env.config.js boolean test: 
+    </span>
     Good, false meant false.  We did not cast a boolean to a string.
   </p>
   <p>

example/src/style.scss

@@ -1,7 +1,7 @@
-$h1-color: red;
+$h3-color: red;
 
 h3 {
-  color: $h1-color;
+  color: $h3-color;
 }
 
 .text-align-right {