diff --git a/app/scenes/Settings/components/ImageUpload.js b/app/scenes/Settings/components/ImageUpload.js index 7df8d3b97..47b1069c3 100644 --- a/app/scenes/Settings/components/ImageUpload.js +++ b/app/scenes/Settings/components/ImageUpload.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; import { observable } from 'mobx'; -import { observer } from 'mobx-react'; +import { observer, inject } from 'mobx-react'; import styled from 'styled-components'; import Dropzone from 'react-dropzone'; import LoadingIndicator from 'components/LoadingIndicator'; @@ -10,6 +10,7 @@ import Modal from 'components/Modal'; import Button from 'components/Button'; import AvatarEditor from 'react-avatar-editor'; import { uploadFile, dataUrlToBlob } from 'utils/uploadFile'; +import UiStore from 'stores/UiStore'; type Props = { children?: React.Node, @@ -17,10 +18,11 @@ type Props = { onError: string => void, submitText: string, borderRadius: number, + ui: UiStore, }; @observer -class DropToImport extends React.Component { +class ImageUpload extends React.Component { @observable isUploading: boolean = false; @observable isCropping: boolean = false; @observable zoom: number = 1; @@ -75,7 +77,7 @@ class DropToImport extends React.Component { }; renderCropping() { - const { submitText } = this.props; + const { ui, submitText } = this.props; return ( @@ -89,7 +91,9 @@ class DropToImport extends React.Component { height={250} border={25} borderRadius={this.props.borderRadius} - color={[255, 255, 255, 0.6]} // RGBA + color={ + ui.theme === 'light' ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6] + } // RGBA scale={this.zoom} rotate={0} /> @@ -150,7 +154,7 @@ const RangeInput = styled.input` height: 16px; width: 16px; border-radius: 50%; - background: black; + background: ${props => props.theme.text}; cursor: pointer; } @@ -163,4 +167,4 @@ const CropButton = styled(Button)` width: 300px; `; -export default DropToImport; +export default inject('ui')(ImageUpload);