9 files changed, 99 insertions, 26 deletions

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/info-bar.scss b/src/styles/info-bar.scss
index c30c951ee..b6d1e84e2 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -46,6 +46,10 @@
     }
   }
 
+  a {
+    // text-decoration: underline;
+  }
+
   &.info-bar--bottom {
     order: 10;
   }
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/recipes.scss b/src/styles/recipes.scss
index 017aa4fe2..1b519a5e5 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -29,6 +29,10 @@
       pointer-events: none;
     }
   }
+
+  &__service-request {
+    float: right;
+  }
 }
 
 .recipe-teaser {
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 2a6540e0b..9f6cfc772 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -13,7 +13,7 @@
   }
 
   .services__webview, 
-  .services__crash-handler {
+  .services__info-layer {
     position: absolute;
     width: 100%;
     top: 0;
@@ -24,6 +24,7 @@
       display: inline-flex;
       width: 0px;
       height: 0px;
+      background: $theme-gray-lighter;
     }
 
     &.is-active {
@@ -44,7 +45,7 @@
   }
 
   .services__no-service, 
-  .services__crash-handler {
+  .services__info-layer {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -63,7 +64,7 @@
     }
   }
 
-  .services__crash-handler {
+  .services__info-layer {
     position: absolut;
     z-index: 110;
   }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 556803c46..283913ab7 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -40,7 +40,7 @@
   width: 100%;
   max-width: 900px;
   min-height: 400px;
-  max-height: 600px;
+  max-height: 720px;
   z-index: 9999;
   background: #FFF;
   border-radius: $theme-border-radius;
@@ -165,8 +165,23 @@
     }
   }
 
-  .settings__options {
-    margin-top: 30px;
+  &__options {
+    margin-top: 20px;
+  }
+
+  &__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 {
@@ -187,10 +202,6 @@
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
   }
 
   .settings__controls {
@@ -295,6 +306,10 @@
       margin-left: auto;
     }
 
+    .franz-form__button {
+      white-space: nowrap;
+    }
+
     div {
       height: auto;
     }
@@ -342,6 +357,12 @@
     background: none;
     padding: 0;
   }
+
+  .legal {
+    text-align: center;
+    margin-top: 20px;
+    color: $theme-gray-light;
+  }
 }
 
 .settings-navigation {
@@ -352,9 +373,10 @@
   flex-direction: column;
 
   .settings-navigation__link {
-    display: block;
+    display: flex;
+    align-items: center;
     height: 50px;
-    line-height: 50px;
+    flex-shrink: 0;
     text-decoration: none;
     color: $theme-text-color;
     padding: 0 20px;
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
index 63183f085..01d8f4ecb 100644
--- a/src/styles/subscription.scss
+++ b/src/styles/subscription.scss
@@ -36,7 +36,7 @@
         margin-right: 0;
       }
 
-      &:last-of-type {
+      &:nth-child(4) {
         margin-right: 0;
         margin-top: 2%;
         width: 100%;
@@ -55,7 +55,8 @@
           margin-right: 0;
         }
 
-        &:last-of-type {
+        &:nth-child(3) {
+          margin-top: 2%;
           width: 100%;
         }
       }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 8347de3b4..ac48aabd6 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -67,8 +67,28 @@
     padding: 0px 5px;
     font-size: 11px;
     position: absolute;
-    right: 5px;
-    bottom: 5px;
+    right: 8px;
+    bottom: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.is-indirect {
+      padding-top: 0px;
+    }
+  }
+
+  .tab-item__info-badge {
+    width: 17px;
+    height: 17px;
+    background: $theme-gray-light;
+    color: $theme-gray-lighter;
+    border-radius: 20px;
+    padding: 0px 5px;
+    font-size: 11px;
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index 5365921fb..cfdcc80ad 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -58,17 +58,32 @@
     }
 
     &__featured-services {
-      margin-top: 150px;
       text-align: center;
-      margin-top: 80px;
+      width: 480px;
+      margin: 80px auto 0 auto;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      background: #FFF;
+      border-radius: 6px;
+      padding: 20px 20px 5px;
     }
 
     &__featured-service {
       width: 35px;
-      margin-right: 30px;
+      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);
+      }
 
-      &:last-of-type {
-        margin-right: 0;
+      img {
+        width: 35px;
       }
     }
   }