error display in file thumbnail list

app/components/preview-files/FileLightbox.jsx

@@ -9,7 +9,6 @@ import { ImageTypes } from './'
 
 const Image = styled.img`
   max-width: 100%;
-  max-height: 100%;
 `
 const PDF = styled.div`
   .pdf-viewer {

app/components/preview-files/FileThumbnails.jsx

 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import * as mime from 'mime-types'
+import { Icon } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import { B } from '../ui'
 import { FileLightbox, fileSort, ImageTypes } from './'
@@ -98,6 +99,14 @@ const FileInfo = styled.p`
     width: 60%;
   }
 `
+const error = css`
+  display: inline-flex;
+  align-items: flex-start;
+  color: ${th('colorError')};
+`
+const Bold = styled(B)`
+  ${props => props.error && error}
+`
 const FileThumbnails = ({ files }) => (
   <Thumbnails>
     {fileSort(files).map(file => (
@@ -115,11 +124,27 @@ const FileThumbnails = ({ files }) => (
           <FileLightbox file={file} />
           <br />
           <span>
-            <B>Type:</B> {file.type}
+            <Bold error={!file.type}>
+              Type:
+              {!file.type && (
+                <Icon color="currentColor" size={2}>
+                  x-circle
+                </Icon>
+              )}
+            </Bold>
+            {` ${file.type}`}
           </span>
           {file.type !== 'manuscript' && (
             <span>
-              <B>Label:</B> {file.label}
+              <Bold error={!file.label}>
+                Label:
+                {!file.label && (
+                  <Icon color="currentColor" size={2}>
+                    x-circle
+                  </Icon>
+                )}
+              </Bold>
+              {` ${file.label}`}
             </span>
           )}
         </FileInfo>