9 files changed, 171 insertions, 43 deletions

diff --git a/src/styles/button.scss b/src/styles/button.scss
index 75d2cb1d4..8d2adbbcc 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -48,6 +48,18 @@
     }
   }
 
+  &.franz-form__button--warning {
+    background: $theme-brand-warning;
+
+    &:hover {
+      background: darken($theme-brand-warning, 5%);
+    }
+
+    &:active {
+      background: lighten($theme-brand-warning, 5%);
+    }
+  }
+
   &.franz-form__button--inverted {
     background: none;
     padding: 10px 20px;
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index aa3c8594b..47dfea2c4 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -12,15 +12,17 @@
       flex: 1;
       // border: 1px solid $theme-gray-lightest;
       color: $theme-gray-dark;
-      background: $theme-gray-lightest;
-      border-bottom: 1px solid $theme-gray-lighter;
-      box-shadow: inset 0px -3px 10px rgba(black, 0.05);
-      transition: all $theme-transition-time;
+      background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
+      border-right: 1px solid $theme-gray-lighter;
+      transition: background $theme-transition-time;
+
+      &:last-of-type {
+        border-right: 0;
+      }
 
       &.is-active {
         background: $theme-brand-primary;
         color: #FFF;
-        border-bottom: 1px solid $theme-brand-primary;
         box-shadow: none;
       }
     }
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
new file mode 100644
index 000000000..06176a7af
--- /dev/null
+++ b/src/styles/image-upload.scss
@@ -0,0 +1,91 @@
+.image-upload {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  border: 1px solid $theme-gray-lighter;
+  border-radius: $theme-border-radius-small;
+  background: $theme-gray-lightest;
+  overflow: hidden;
+  margin-top: 5px;
+
+  &__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;
+    border-radius: 3px;
+  }
+
+  &__action {
+    position: relative;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.5s;
+    display: flex;
+    justify-content: center;
+
+    &-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;
+      color: #FFF;
+
+      .mdi {
+        color: #FFF;
+      }
+    }
+  }
+
+  &__dropzone {
+    text-align: center;
+    border-radius: 5px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__dropzone, 
+  button {
+    .mdi {
+      margin-bottom: 5px;
+    }
+
+    p {
+      font-size: 10px;
+      line-height: 10px;
+    }
+  }
+
+  &:hover {
+    .image-upload__action {
+      opacity: 1;
+    }
+  }
+}
+
+.image-upload-wrapper {
+  .mdi {
+    font-size: 40px;
+    color: $theme-gray-light;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 814dce5f8..7042f56e8 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -47,6 +47,10 @@
     padding: 8px;
     // font-size: 18px;
     color: $theme-gray;
+
+    &::placeholder {
+      color: lighten($theme-gray-light, 10%);
+    }
   }
 
   .franz-form__input-prefix,
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/searchInput.scss b/src/styles/searchInput.scss
index 28ff09fc4..633a31e09 100644
--- a/src/styles/searchInput.scss
+++ b/src/styles/searchInput.scss
@@ -1,4 +1,20 @@
 .search-input {
   width: 100%;
   height: auto;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 30px;
+  background: $theme-gray-lightest;
+  padding: 5px 10px;
+  @extend %headline;
+  color: $theme-gray-light;
+
+  input {
+    padding-left: 10px;
+    background: none;
+    border: 0;
+    flex: 1;
+    color: $theme-gray-light;
+  }
 }
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 282c15121..9f6cfc772 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -24,6 +24,7 @@
       display: inline-flex;
       width: 0px;
       height: 0px;
+      background: $theme-gray-lighter;
     }
 
     &.is-active {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 73cef0813..2182c9b5f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -111,6 +111,26 @@
     &::-webkit-scrollbar-thumb:window-inactive {
         background: none;
     }
+    
+    .service-flex-grid {
+      display: flex;
+    }
+
+    .service-name {
+      flex: 1px;
+    }
+
+    .service-icon {
+      width: 140px;
+      float: right;
+      margin-top: 30px;
+      margin-left: 40px;
+
+      label {
+        font-weight: bold;
+        letter-spacing: -0.1px;
+      }
+    }
   }
 
   .settings__close {
@@ -129,30 +149,28 @@
     }
   }
 
-  .settings__search-header {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    border-radius: $theme-border-radius;
-    transition: background $theme-transition-time;
-    @extend %headline;
-    font-size: 22px;
-
-    &:hover {
-      background: darken($theme-gray-lighter, 5%);
-    }
+  .search-input {
+    margin-bottom: 30px;
+  }
 
-    input {
-      padding-left: 10px;
-      background: none;
-      border: 0;
-      flex: 1;
-      @extend %headline;
-    }
+  &__options {
+    margin-top: 20px;
+    flex: 1;
   }
 
-  .settings__options {
-    margin-top: 30px;
+  &__settings-group {
+    margin-top: 10px;
+
+    h3 {
+      font-weight: bold;
+      margin: 25px 0 15px;
+      color: $theme-gray-light;
+      letter-spacing: -0.1px;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
   }
 
   .settings__message {
@@ -173,10 +191,6 @@
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
   }
 
   .settings__controls {
@@ -312,12 +326,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/src/styles/welcome.scss b/src/styles/welcome.scss
index cfdcc80ad..46299b966 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -73,15 +73,8 @@
       width: 35px;
       height: 35px;
       margin: 0 10px 15px;
-      filter: grayscale(1)
-      opacity(0.5);
       transition: 0.5s filter, 0.5s opacity;
 
-      &:hover {
-        filter: grayscale(0);
-        opacity: (1);
-      }
-
       img {
         width: 35px;
       }