Extract FilePreview to a separate component

src/plugins/Dashboard/FileCard.js

@@ -1,4 +1,5 @@
 const getFileTypeIcon = require('./getFileTypeIcon')
+const FilePreview = require('./FilePreview')
 const { h, Component } = require('preact')
 
 module.exports = class FileCard extends Component {
@@ -68,14 +69,7 @@ module.exports = class FileCard extends Component {
 
           <div class="uppy-DashboardFileCard-inner">
             <div class="uppy-DashboardFileCard-preview" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
-              {file.preview
-                ? <img alt={file.name} src={file.preview} />
-                : <div class="uppy-DashboardItem-previewIconWrap">
-                  <span class="uppy-DashboardItem-previewIcon" style={{ color: getFileTypeIcon(file.type).color }}>{getFileTypeIcon(file.type).icon}</span>
-                  <span class="uppy-DashboardItem-previewType">{file.extension}</span>
-                  <svg class="uppy-DashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF" /><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4" /></g></svg>
-                </div>
-              }
+              <FilePreview file={file} />
             </div>
 
             <div class="uppy-DashboardFileCard-info">
@@ -83,11 +77,11 @@ module.exports = class FileCard extends Component {
             </div>
 
             <div class="uppy-Dashboard-actions">
-              <button class="uppy-u-reset uppy-c-buttonLarge uppy-c-buttonLarge--blue uppy-Dashboard-actionsBtn"
+              <button class="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-actionsBtn"
                 type="button"
                 title={this.props.i18n('finishEditingFiles')}
                 onclick={this.handleSave}>Save changes</button>
-              <button class="uppy-u-reset uppy-c-buttonLarge uppy-c-buttonLarge--transparent uppy-Dashboard-actionsBtn"
+              <button class="uppy-u-reset uppy-c-btn uppy-c-btn-link uppy-Dashboard-actionsBtn"
                 type="button"
                 title={this.props.i18n('finishEditingFiles')}
                 onclick={this.handleCancel}>Cancel</button>

src/plugins/Dashboard/FilePreview.js

@@ -0,0 +1,20 @@
+const getFileTypeIcon = require('./getFileTypeIcon')
+const { h } = require('preact')
+
+module.exports = function FilePreview (props) {
+  const file = props.file
+
+  if (file.preview) {
+    return <img class="uppy-DashboardItem-previewImg" alt={file.name} src={file.preview} />
+  }
+
+  const { color, icon } = getFileTypeIcon(file.type)
+
+  return (
+    <div class="uppy-DashboardItem-previewIconWrap">
+      <span class="uppy-DashboardItem-previewIcon" style={{ color: color }}>{icon}</span>
+      <span class="uppy-DashboardItem-previewType">{file.extension && file.extension.length < 5 ? file.extension : null}</span>
+      <svg class="uppy-DashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF" /><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4" /></g></svg>
+    </div>
+  )
+}