[wip] add icon upload

3 files changed, 67 insertions, 6 deletions

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 48d12a807..556803c46 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 {
@@ -308,12 +322,6 @@
     }
   }
 
-  // @include element(add-service-teaser) {
-  //   height: auto;
-  //   margin-top: 20px;
-  //   display: block;
-  //   text-align: center;
-  // }
   .emoji {
     display: block;
     font-size: 40px;