update some things

package.json

@@ -12,24 +12,24 @@
     "npm": ">=6"
   },
   "dependencies": {
-    "@kentcdodds/react-workshop-app": "^2.7.3",
+    "@kentcdodds/react-workshop-app": "^2.7.4",
     "@testing-library/react": "^10.0.1",
     "chalk": "^3.0.0",
     "codegen.macro": "^3.0.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "husky": "^4.2.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "react-scripts": "^3.4.0"
+    "react-scripts": "^3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "test:coverage": "npm run test -- --watchAll=false --coverage",
+    "test:coverage": "npm run test -- --watchAll=false",
     "test:exercises": "npm run test -- testing.*exercises\\/ --onlyChanged",
     "setup": "node ./scripts/setup",
     "lint": "eslint .",

src/box-styles.css

@@ -0,0 +1,19 @@
+.box {
+  border: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+.box--large {
+  width: 270px;
+  height: 270px;
+}
+.box--medium {
+  width: 180px;
+  height: 180px;
+}
+.box--small {
+  width: 90px;
+  height: 90px;
+}

src/exercise/05.js

@@ -1,12 +1,8 @@
 // Styling
 // http://localhost:3000/isolated/exercise/05.js
 
-/*
-For the rest of the exercises, you can now run things locally with `npm start`
-or on codesandbox: https://codesandbox.io/s/github/kentcdodds/react-fundamentals
-*/
-
 import React from 'react'
+import '../box-styles.css'
 
 // 💰 Use the className for the size and style (backgroundColor) for the color
 // 💰 each of the elements should also have the "box" className applied

src/final/05.extra-1.js

@@ -3,6 +3,7 @@
 // http://localhost:3000/isolated/final/05.extra-1.js
 
 import React from 'react'
+import '../box-styles.css'
 
 function Box({style, size, className = '', ...otherProps}) {
   const sizeClassName = size ? `box--${size}` : ''

src/final/05.js

@@ -2,6 +2,7 @@
 // http://localhost:3000/isolated/final/05.js
 
 import React from 'react'
+import '../box-styles.css'
 
 const smallBox = (
   <div

src/styles.css

@@ -1,19 +0,0 @@
-.box {
-  border: 1px solid #333;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-.box--large {
-  width: 270px;
-  height: 270px;
-}
-.box--medium {
-  width: 180px;
-  height: 180px;
-}
-.box--small {
-  width: 90px;
-  height: 90px;
-}