diff --git a/app/components/preview-files/FileLightbox.jsx b/app/components/preview-files/FileLightbox.jsx index 92b370e9e1b2d76fe837b2aba3ee30257bad719d..a8534984f8e97476642699b0497adfc60faa5487 100755 --- a/app/components/preview-files/FileLightbox.jsx +++ b/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 { diff --git a/app/components/preview-files/FileThumbnails.jsx b/app/components/preview-files/FileThumbnails.jsx index 54c147544ff78f9a3ec2eef5256428e8e8786c38..7c0a7eb99947ab02691c810a1d3d7c6cc29f5071 100755 --- a/app/components/preview-files/FileThumbnails.jsx +++ b/app/components/preview-files/FileThumbnails.jsx @@ -1,6 +1,7 @@ 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>