Styling intro screen and adding demo images.

src/components/App/index.tsx

@@ -43,7 +43,7 @@ import Intro from '../intro';
 type Orientation = 'horizontal' | 'vertical';
 
 export interface SourceImage {
-  file: File;
+  file: File | Fileish;
   data: ImageData;
   vectorImage?: HTMLImageElement;
 }
@@ -259,7 +259,7 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  async updateFile(file: File) {
+  async updateFile(file: File | Fileish) {
     this.setState({ loading: true });
     try {
       let data: ImageData;
@@ -268,7 +268,7 @@ export default class App extends Component<Props, State> {
       // Special-case SVG. We need to avoid createImageBitmap because of
       // https://bugs.chromium.org/p/chromium/issues/detail?id=606319.
       // Also, we cache the HTMLImageElement so we can perform vector resizing later.
-      if (file.type === 'image/svg+xml') {
+      if (file.type.startsWith('image/svg+xml')) {
         vectorImage = await processSvg(file);
         data = drawableToImageData(vectorImage);
       } else {
@@ -368,6 +368,7 @@ export default class App extends Component<Props, State> {
     this.setState({ images });
   }
 
+  @bind
   showError (error: string) {
     if (!this.snackbar) throw Error('Snackbar missing');
     this.snackbar.showSnackbar({ message: error });
@@ -410,7 +411,7 @@ export default class App extends Component<Props, State> {
                 ))}
               </div>
             :
-              <Intro onFile={this.updateFile} />
+              <Intro onFile={this.updateFile} onError={this.showError} />
           }
           {anyLoading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
           <snack-bar ref={linkRef(this, 'snackbar')} />