enhancement(media-library): use checkerboard pattern as background (#2152)

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from 'react-emotion';
-import { colors, borders, lengths } from 'netlify-cms-ui-default';
+import { colors, borders, lengths, shadows, effects } from 'netlify-cms-ui-default';
+
+const IMAGE_HEIGHT = 160;
 
 const Card = styled.div`
   width: ${props => props.width};
@@ -20,10 +22,17 @@ const Card = styled.div`
   }
 `;
 
+const CardImageWrapper = styled.div`
+  height: ${IMAGE_HEIGHT + 2}px;
+  ${effects.checkerboard};
+  ${shadows.inset};
+  border-bottom: solid ${lengths.borderWidth} ${colors.textFieldBorder};
+`;
+
 const CardImage = styled.img`
   width: 100%;
-  height: 160px;
+  height: ${IMAGE_HEIGHT}px;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 2px 2px 0 0;
 `;
 
@@ -57,7 +66,9 @@ class MediaLibraryCard extends React.Component {
         tabIndex="-1"
         isPrivate={isPrivate}
       >
-        <div>{url ? <CardImage src={url} /> : <CardFileIcon>{type}</CardFileIcon>}</div>
+        <CardImageWrapper>
+          {url ? <CardImage src={url} /> : <CardFileIcon>{type}</CardFileIcon>}
+        </CardImageWrapper>
         <CardText>{text}</CardText>
       </Card>
     );

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCardGrid.js

@@ -8,6 +8,7 @@ import { colors } from 'netlify-cms-ui-default';
 
 const CardGridContainer = styled.div`
   overflow-y: auto;
+  overflow-x: hidden;
 `;
 
 const CardGrid = styled.div`

packages/netlify-cms-ui-default/src/index.js

@@ -16,5 +16,6 @@ export {
   shadows,
   borders,
   transitions,
+  effects,
   reactSelectStyles,
 } from './styles';

packages/netlify-cms-ui-default/src/styles.js

@@ -10,6 +10,7 @@ export {
   shadows,
   borders,
   transitions,
+  effects,
   reactSelectStyles,
 };
 
@@ -89,6 +90,8 @@ const colors = {
   errorBackground: colorsRaw.redLight,
   textFieldBorder: '#dfdfe3',
   controlLabel: '#7a8291',
+  checkerboardLight: '#f2f2f2',
+  checkerboardDark: '#e6e6e6',
 };
 
 const lengths = {
@@ -122,6 +125,33 @@ const shadows = {
   dropDeep: css`
     box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
   `,
+  inset: css`
+    box-shadow: inset 0 0 4px rgba(68, 74, 87, 0.3);
+  `,
+};
+
+const effects = {
+  checkerboard: css`
+    background-color: ${colors.checkerboardLight};
+    background-size: 16px 16px;
+    background-position: 0 0, 8px 8px;
+    background-image: linear-gradient(
+        45deg,
+        ${colors.checkerboardDark} 25%,
+        transparent 25%,
+        transparent 75%,
+        ${colors.checkerboardDark} 75%,
+        ${colors.checkerboardDark}
+      ),
+      linear-gradient(
+        45deg,
+        ${colors.checkerboardDark} 25%,
+        transparent 25%,
+        transparent 75%,
+        ${colors.checkerboardDark} 75%,
+        ${colors.checkerboardDark}
+      );
+  `,
 };
 
 const badge = css`

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -6,7 +6,7 @@ import { Map, List } from 'immutable';
 import { once } from 'lodash';
 import uuid from 'uuid/v4';
 import { oneLine } from 'common-tags';
-import { lengths, components, buttons } from 'netlify-cms-ui-default';
+import { lengths, components, buttons, borders, effects, shadows } from 'netlify-cms-ui-default';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -16,13 +16,16 @@ const ImageWrapper = styled.div`
   height: 100px;
   margin-right: 20px;
   margin-bottom: 20px;
+  border: ${borders.textField};
+  border-radius: ${lengths.borderRadius};
+  ${effects.checkerboard};
+  ${shadows.inset};
 `;
 
 const Image = styled.img`
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
-  border-radius: ${lengths.borderRadius};
 `;
 
 const MultiImageWrapper = styled.div`