Merge pull request #3823 from despatates/master

feat(file-input): use theme for dropzone background
marmelab · Oct 15, 2019 · 077653e · 077653e
2 parents f54652f + 93a0994
commit 077653e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/packages/ra-ui-materialui/src/input/FileInput.js b/packages/ra-ui-materialui/src/input/FileInput.js
@@ -12,18 +12,19 @@ import Labeled from './Labeled';
 import FileInputPreview from './FileInputPreview';
 import sanitizeRestProps from './sanitizeRestProps';
 
-const styles = createStyles({
-    dropZone: {
-        background: '#efefef',
-        cursor: 'pointer',
-        padding: '1rem',
-        textAlign: 'center',
-        color: '#999',
-    },
-    preview: {},
-    removeButton: {},
-    root: { width: '100%' },
-});
+const styles = theme =>
+    createStyles({
+        dropZone: {
+            background: theme.palette.background.default,
+            cursor: 'pointer',
+            padding: '1rem',
+            textAlign: 'center',
+            color: theme.palette.text.hint,
+        },
+        preview: {},
+        removeButton: {},
+        root: { width: '100%' },
+    });
 
 export class FileInput extends Component {
     static propTypes = {

diff --git a/packages/ra-ui-materialui/src/input/ImageInput.js b/packages/ra-ui-materialui/src/input/ImageInput.js
@@ -4,32 +4,33 @@ import { addField, translate } from 'ra-core';
 
 import { FileInput } from './FileInput';
 
-const styles = createStyles({
-    root: { width: '100%' },
-    dropZone: {
-        background: '#efefef',
-        cursor: 'pointer',
-        padding: '1rem',
-        textAlign: 'center',
-        color: '#999',
-    },
-    preview: {},
-    removeButton: {
-        display: 'inline-block',
-        position: 'relative',
-        float: 'left',
-        '& button': {
-            position: 'absolute',
-            top: '0.5rem',
-            right: '0.5rem',
-            minWidth: '2rem',
-            opacity: 0,
+const styles = theme =>
+    createStyles({
+        root: { width: '100%' },
+        dropZone: {
+            background: theme.palette.background.default,
+            cursor: 'pointer',
+            padding: '1rem',
+            textAlign: 'center',
+            color: theme.palette.text.hint,
         },
-        '&:hover button': {
-            opacity: 1,
+        preview: {},
+        removeButton: {
+            display: 'inline-block',
+            position: 'relative',
+            float: 'left',
+            '& button': {
+                position: 'absolute',
+                top: '0.5rem',
+                right: '0.5rem',
+                minWidth: '2rem',
+                opacity: 0,
+            },
+            '&:hover button': {
+                opacity: 1,
+            },
         },
-    },
-});
+    });
 
 export class ImageInput extends FileInput {
     static defaultProps = {