8 files changed, 217 insertions, 7 deletions

diff --git a/package.json b/package.json
index 9c111d336..6c4c65cb8 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "react": "^15.4.1",
     "react-addons-css-transition-group": "^15.4.2",
     "react-dom": "^15.4.1",
+    "react-dropzone": "^4.2.1",
     "react-electron-web-view": "^2.0.1",
     "react-intl": "^2.3.0",
     "react-loader": "^2.4.0",
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 4458c4c5a..ee69d53aa 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
+import ImageUpload from '../../ui/ImageUpload';
 
 const messages = defineMessages({
   saveService: {
@@ -217,7 +218,15 @@ export default class EditServiceForm extends Component {
         </div>
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
-            <Input field={form.$('name')} focus />
+            <div className="service-flex-grid">
+              <div className="service-name">
+                <Input field={form.$('name')} focus />
+              </div>
+              <div className="service-icon">
+                {/* <Input field={form.$('name')} focus /> */}
+                <ImageUpload field={form.$('icon')} />
+              </div>
+            </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
                 active={activeTabIndex}
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
new file mode 100644
index 000000000..d07c3649c
--- /dev/null
+++ b/src/components/ui/ImageUpload.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+// import Loader from 'react-loader';
+import classnames from 'classnames';
+import Dropzone from 'react-dropzone';
+
+@observer
+export default class ImageUpload extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    multiple: PropTypes.bool,
+    // disabled: PropTypes.bool,
+    // onClick: PropTypes.func,
+    // type: PropTypes.string,
+    // buttonType: PropTypes.string,
+    // loaded: PropTypes.bool,
+    // htmlForm: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: null,
+    multiple: false,
+    // disabled: false,
+    // onClick: () => {},
+    // type: 'button',
+    // buttonType: '',
+    // loaded: true,
+    // htmlForm: '',
+  };
+
+  dropzoneRef = null;
+
+  state = {
+    path: null,
+  }
+
+  onDrop(acceptedFiles) {
+    // const req = request.post('/upload');
+    acceptedFiles.forEach((file) => {
+      console.log(file);
+      this.setState({
+        path: file.path,
+      });
+      // req.attach(file.name, file);
+    });
+    // req.end(callback);
+  }
+
+  render() {
+    const {
+      field,
+      className,
+      multiple,
+      // disabled,
+      // onClick,
+      // type,
+      // buttonType,
+      // loaded,
+      // htmlForm,
+    } = this.props;
+
+    const cssClasses = classnames({
+      'franz-form__button': true,
+      // [`franz-form__button--${buttonType}`]: buttonType,
+      [`${className}`]: className,
+    });
+
+    return (
+      <div>
+        {field.label}
+        {this.state.path ? (
+          <div
+            className="image-upload"
+          >
+            <div
+              className="image-upload__preview"
+              style={({
+                backgroundImage: `url(${this.state.path})`,
+              })}
+            />
+            <div className="image-upload__action">
+              <button
+                type="button"
+                onClick={() => {
+                  this.setState({
+                    path: null,
+                  });
+                }}
+              >
+                remove icon
+
+              </button>
+              <div className="image-upload__action-background" />
+            </div>
+          </div>
+        ) : (
+          <Dropzone
+            ref={(node) => { this.dropzoneRef = node; }}
+            onDrop={this.onDrop.bind(this)}
+            className={cssClasses}
+            multiple={multiple}
+            accept="image/jpeg, image/png"
+          >
+            <p>Try dropping some files here, or click to select files to upload.</p>
+          </Dropzone>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 3c52152b1..8827896ef 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -46,6 +46,10 @@ const messages = defineMessages({
     id: 'settings.service.form.indirectMessages',
     defaultMessage: '!!!Show message badge for all new messages',
   },
+  icon: {
+    id: 'settings.service.form.icon',
+    defaultMessage: '!!!Icon',
+  },
 });
 
 @inject('stores', 'actions') @observer
@@ -102,6 +106,11 @@ export default class EditServiceScreen extends Component {
           value: !service.isMuted,
           default: true,
         },
+        icon: {
+          label: intl.formatMessage(messages.icon),
+          value: service.icon,
+          default: true,
+        },
       },
     };
 
@@ -199,6 +208,12 @@ export default class EditServiceScreen extends Component {
       return (<div>Loading...</div>);
     }
 
+    if (!recipe) {
+      return (
+        <div>something went wrong</div>
+      );
+    }
+
     const form = this.prepareForm(recipe, service);
 
     return (
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
new file mode 100644
index 000000000..764bb3158
--- /dev/null
+++ b/src/styles/image-upload.scss
@@ -0,0 +1,52 @@
+.image-upload {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: $theme-border-radius;
+  overflow: hidden;
+
+  &__preview,
+  &__action {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &__preview {
+    z-index: 1;
+    background-size: cover;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin: 5px;
+  }
+
+  &__action {
+    position: relative;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.5s;
+
+    &-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba($theme-gray, 0.7);
+      z-index: 10;
+    }
+
+    button {
+      position: relative;
+      z-index: 100;
+    }
+  }
+
+  &:hover {
+    .image-upload__action {
+      opacity: 1;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0a082729c..261396f6f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './button.scss';
 @import './searchInput.scss';
 @import './select.scss';
+@import './image-upload.scss';
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index b29ed5468..283913ab7 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -111,6 +111,20 @@
     &::-webkit-scrollbar-thumb:window-inactive {
         background: none;
     }
+    
+    .service-flex-grid {
+      display: flex;
+    }
+
+    .service-name {
+      flex: 1px;
+    }
+
+    .service-icon {
+      width: 30%;
+      min-width: 100px;
+      margin-left: 40px;
+    }
   }
 
   .settings__close {
@@ -323,12 +337,6 @@
     }
   }
 
-  // @include element(add-service-teaser) {
-  //   height: auto;
-  //   margin-top: 20px;
-  //   display: block;
-  //   text-align: center;
-  // }
   .emoji {
     display: block;
     font-size: 40px;
diff --git a/yarn.lock b/yarn.lock
index c662ce63f..4a6c4be6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -337,6 +337,10 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
+attr-accept@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.0.tgz#b5cd35227f163935a8f1de10ed3eba16941f6be6"
+
 "auto-launch@https://github.com/meetfranz/node-auto-launch.git":
   version "5.0.1"
   resolved "https://github.com/meetfranz/node-auto-launch.git#b90a0470467eb84435e6554ae9db1e2c6db79e61"
@@ -4963,6 +4967,13 @@ react-dom@^15.4.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dropzone@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9"
+  dependencies:
+    attr-accept "^1.0.3"
+    prop-types "^15.5.7"
+
 react-electron-web-view@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-electron-web-view/-/react-electron-web-view-2.0.1.tgz#984b7bbbeb77e35bcca921dc50120fc8f2b0f27d"