We don't need the invalid state, as we'll accept all types.

src/components/App/style.scss

@@ -15,40 +15,34 @@ Note: These styles are temporary. They will be replaced before going live.
 .drop {
   overflow: hidden;
   touch-action: none;
-  height:100%;
-  width:100%;
+  height: 100%;
+  width: 100%;
 
-  &::after {
-    content: '';
-    position: absolute;
-    display: block;
-    left: 10px;
-    top: 10px;
-    right: 10px;
-    bottom: 10px;
-    border: 2px dashed #fff;
-    border-radius: 10px;
-    opacity: 0;
-    transform: scale(0.95);
-    transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end;
-    pointer-events: none;
-  }
+  &:global {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 10px;
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      border: 2px dashed #fff;
+      background-color:rgba(88, 116, 88, 0.2);
+      border-color: rgba(65, 129, 65, 0.5);
+      border-radius: 10px;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: all 200ms ease-in;
+      transition-property: transform, opacity;
+      pointer-events: none;
+    }
 
-  &.drop-valid::after,
-  &.drop-invalid::after {
-    opacity: 1;
-    transform: scale(1);
-    transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
-  }
-
-  &.drop-valid::after {
-    background-color:rgba(88, 116, 88, 0.2);
-    border-color: rgba(65, 129, 65, 0.5);
-  }
-
-  &.drop-invalid::after {
-    background-color:rgba(119, 85, 85, 0.2);
-    border-color:rgba(129, 63, 63, 0.5);
+    &.drop-valid::after {
+      opacity: 1;
+      transform: scale(1);
+      transition-timing-function: ease-out;
+    }
   }
 }
 

src/init-app.tsx

@@ -16,6 +16,7 @@ if (process.env.NODE_ENV === 'development') {
 
   // When an update to any module is received, re-import the app and trigger a full re-render:
   module.hot.accept('./components/App', () => {
+    // The linter doesn't like the capital A in App. It is wrong.
     // tslint:disable-next-line variable-name
     import('./components/App').then(({ default: App }) => {
       root = render(<App />, document.body, root);