A component only for canvas is not needed

src/App.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
-import { Canvas } from 'components';
+import { Header } from 'components';
 
 function App() {
   return (
     <div className="app">
-      <Canvas />
+      <div className="canvas">
+        <Header />
+      </div>
     </div>
   );
 }

src/assets/scss/styles.scss

@@ -6,3 +6,28 @@ body {
   font-size: 14px;
   background-color: $gray-light;
 }
+
+.canvas {
+  max-width: 1000px;
+  width: 100%;
+  min-width: 500px;
+  background-color: $gray-mid;
+  margin: 0 auto;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+}
+
+.box {
+  border-radius: 0;
+  border-width: 3px;
+  border-style: solid;
+  background-color: $gray;
+  border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
+    lighten($gray, 20%);
+
+  &:hover,
+  &:focus {
+    background-color: lighten($gray, 10%);
+  }
+}

src/components/Board/Board.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import './styles.scss';
 
 const Board = () => {
   return <div className="board">Board here</div>;

src/components/Board/styles.scss

@@ -0,0 +1 @@
+@import '../../assets/scss/variables';

src/components/Canvas/Canvas.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Header } from 'components';
-import './styles.scss';
-
-const Canvas = () => {
-  return (
-    <div className="canvas">
-      <Header />
-    </div>
-  );
-};
-
-export default Canvas;

src/components/Canvas/index.js

@@ -1 +0,0 @@
-export { default } from './Canvas';

src/components/Canvas/styles.scss

@@ -1,26 +0,0 @@
-@import '../../assets/scss/variables';
-
-.canvas {
-  max-width: 1000px;
-  width: 100%;
-  min-width: 500px;
-  background-color: $gray-mid;
-  margin: 0 auto;
-  border-radius: 3px;
-  display: flex;
-  justify-content: center;
-}
-
-.box {
-  border-radius: 0;
-  border-width: 3px;
-  border-style: solid;
-  background-color: $gray;
-  border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
-    lighten($gray, 20%);
-
-  &:hover,
-  &:focus {
-    background-color: lighten($gray, 10%);
-  }
-}

src/components/index.js

@@ -1,3 +1,2 @@
-export { default as Canvas } from './Canvas';
 export { default as Header } from './Header';
 export { default as Board } from './Board';