Apply thumbnail canvas nav design tweaks; fixes #1978

src/components/WindowSideBarCanvasPanel.js

@@ -36,10 +36,11 @@ export class WindowSideBarCanvasPanel extends Component {
               return (
                 <ListItem
                   key={canvas.id}
+                  alignItems="flex-start"
                   onClick={onClick}
                   button
                 >
-                  <div>
+                  <div style={{ minWidth: 50 }}>
                     <CanvasThumbnail
                       className={classNames(classes.clickable)}
                       isValid={isValid}
@@ -47,17 +48,11 @@ export class WindowSideBarCanvasPanel extends Component {
                       maxHeight={config.canvasNavigation.height}
                       maxWidth={config.canvasNavigation.width}
                       aspectRatio={manifestoCanvas.aspectRatio}
-                      style={{
-                        cursor: 'pointer',
-                        height: config.canvasNavigation.height,
-                        width: isValid ? WindowSideBarCanvasPanel.calculateScaledWidth(config.canvasNavigation.height, validationCanvas.aspectRatio) : 'auto',
-                      }}
                     />
                   </div>
                   <Typography
                     className={classNames(classes.label)}
                     variant="body2"
-                    color="secondary"
                   >
                     {canvas.label}
                   </Typography>

src/containers/WindowSideBarCanvasPanel.js

@@ -27,13 +27,12 @@ const mapDispatchToProps = { setCanvas: actions.setCanvas };
 /**
  *
  * @param theme
- * @returns {label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
+ * @returns {label: {paddingLeft: number}, windowSideBarH2: *}}
  */
 const styles = theme => ({
   windowSideBarH2: theme.typography.h5,
   label: {
-    fontSize: '8pt',
-    paddingLeft: 8,
+    paddingLeft: theme.spacing.unit,
   },
 });