Simplify design and add styles

package.json

@@ -7,6 +7,7 @@
     "@types/node": "10.12.18",
     "@types/react": "16.7.18",
     "@types/react-dom": "16.0.11",
+    "milligram": "^1.3.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3",

src/App.css

@@ -1,18 +1,7 @@
-.App {
+.main {
   text-align: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  /* min-height: 100vh; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
 .main-canvas {
   object-fit: scale-down;
   height: 100%;

src/App.tsx

@@ -42,7 +42,7 @@ class App extends Component<Props, State> {
 
   private drawMiniPositions(): void {
     const {positions, fullWidth} = this.calcFullPositions();
-    if (!positions) {
+    if (positions.length === 0) {
       return;
     }
 
@@ -107,25 +107,20 @@ class App extends Component<Props, State> {
       };
     })
 
-    this.setState({
-      imgs: [...this.state.imgs, ...imgs],
-    })
+    this.setState({ imgs });
 
     // clear input
     fileInput.value = '';
   }
 
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          Article Header Generator
-        </header>
-        <h1>Preview</h1>
-        <canvas ref={this.mainCanvas} className="main-canvas"/>
+      <div className="main container">
+        <h1>Article Header Generator</h1>
+        {this.state.imgs.length > 0 && <canvas ref={this.mainCanvas} className="main-canvas"/>}
         {this.state.imgs.map(img => <p key={img.img.src}>{img.name}</p>) /* TODO: proper component */}
-        <input type="file" accept="image/*" multiple ref={this.fileInput}/>
-        <button onClick={this.add}>Add</button>
+        <input id="fileInput" type="file" accept="image/*" multiple ref={this.fileInput} hidden onChange={this.add}/>
+        <label htmlFor="fileInput" className="button">Select Images</label>
       </div>
     );
   }

src/index.tsx

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import 'milligram';
+import 'normalize.css';
+
 
 ReactDOM.render(<App />, document.getElementById('root'));
 

yarn.lock

@@ -5340,6 +5340,12 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
+milligram@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/milligram/-/milligram-1.3.0.tgz#a5d980ef8eaf79337c96a8d7c7e176764931042c"
+  dependencies:
+    normalize.css "~5.0.0"
+
 "mime-db@>= 1.36.0 < 2", mime-db@~1.37.0:
   version "1.37.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
@@ -5639,6 +5645,10 @@ normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
 
+normalize.css@~5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-5.0.0.tgz#7cec875ce8178a5333c4de80b68ea9c18b9d7c37"
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
@@ -6901,7 +6911,7 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
   dependencies:
@@ -6968,7 +6978,7 @@ [email protected]:
   optionalDependencies:
     fsevents "1.2.4"
 
-[email protected]:
+react@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
   dependencies: