Pass intercom app id in environment for Grunt build

Gruntfile.js

@@ -287,6 +287,7 @@ module.exports = function(grunt) {
             var locals = {
               version: version,
               env: require('./client/config/json/environment.json').environment,
+              intercomAppId: require('./client/config/json/environment.json').intercomAppId,
               commitHash: require('./client/config/json/commit.json').commitHash,
               commitTime: require('./client/config/json/commit.json').commitTime,
               apiHost: require('./client/config/json/api.json').host
@@ -438,6 +439,7 @@ module.exports = function(grunt) {
         configObj.userContentDomain = process.env.USER_CONTENT_DOMAIN || 'runnableapp.com';
         configObj.corporateUrl = process.env.MARKETING_URL || 'https://runnable.io';
         configObj.stripeToken = process.env.STRIPE_TOKEN || 'pk_test_sHr5tQaPtgwiE2cpW6dQkzi8';
+        configObj.siftApiKey = process.env.SIFT_API_KEY || 'eea9746dff';
 
         if (configObj.host.charAt(configObj.host.length - 1) === '/') {
           configObj.host = configObj.host.substr(0, configObj.host.length - 1);
@@ -477,7 +479,8 @@ module.exports = function(grunt) {
       },
       function (cb) {
         var configObj = {
-          environment: environment || process.env.NODE_ENV || 'development'
+          environment: environment || process.env.NODE_ENV || 'development',
+          intercomAppId: process.env.INTERCOM_APP_ID || 'xs5g95pd'
         };
         var configJSON = JSON.stringify(configObj);
         fs.writeFile(path.join(clientPath, 'config', 'json', 'environment.json'), configJSON, function () {

client/assets/styles/scss/components/aha-button.scss

@@ -9,6 +9,6 @@
 
   .iconnables {
     height: 12px;
-    width: 12px;
+    width: 100%;
   }
 }

client/assets/styles/scss/components/aha-guide.scss

@@ -1,3 +1,16 @@
+.environment-view-aha-guide {
+  > .aha-guide {
+  margin: 0 auto 15px;
+  max-width: 450px;
+
+    .p-slide {
+      font-size: 15px;
+      position: relative;
+      top: 0;
+    }
+  }
+}
+
 .aha-guide {
   color: $gray;
   overflow: hidden;
@@ -14,7 +27,6 @@
   }
 
   // anchor image
-  .spinner-wrapper,
   .aha-meter {
     height: $input-md;
     left: 15px;
@@ -96,7 +108,6 @@
 
     .icons-alert {
       color: $orange;
-      overflow: visible;
       padding: 10px 11px 11px;
     }
   }
@@ -179,3 +190,9 @@
 .aha-tips > .iconnables {
   margin-left: 6px;
 }
+
+.aha-overlay-div {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}

client/assets/styles/scss/components/aha-modals.scss

@@ -23,15 +23,7 @@
   }
 
   + .modal-dialog {
-    margin-top: 30px;
-
-    @include media(lg) {
-      margin-top: 90px;
-    }
-
-    @media (max-height: $screen-xs), (max-width: $screen-sm) {
-      margin-top: 105px;
-    }
+    margin-top: 120px;
   }
 
   .spinner-wrapper,

client/assets/styles/scss/components/aha-sidebar.scss

@@ -33,11 +33,22 @@
     transform: translate3d(100%,0,0);
   }
 
+  .aha-sidebar-header {
+    border-bottom: 1px solid $gray-lightest;
+    height: $input-md;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    position: relative;
+    width: 100%;
+  }
+
   .icons-close {
-    color: $gray;
+    color: $gray-light;
     cursor: pointer;
-    margin-bottom: 15px;
     pointer-events: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
 
     &:hover,
     &:active {
@@ -46,13 +57,21 @@
   }
 
   .aha-overview {
-    animation: slide-left .45s ease-in-out forwards;
     border-bottom: 1px solid $gray-lightest;
     margin-bottom: 15px;
-    padding: 32px 0 42px;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    .p {
+      margin-top: 15px;
+    }
 
     .btn {
-      align-self: center;
+      margin-bottom: 30px;
+      margin-left: auto;
+      margin-right: auto;
     }
   }
 

client/assets/styles/scss/components/buttons/buttons-group.scss

@@ -134,7 +134,7 @@
   > .btn:active {
 
     &:not(:first-child):not(:last-child) {
-      border-radius: $input-border-radius;
+      border-radius: 0;
     }
 
     &:first-child:not(:last-child) {

client/assets/styles/scss/components/buttons/buttons.scss

@@ -45,7 +45,6 @@
   > .spinner-wrapper {
     align-items: center;
     display: flex;
-    float: left;
     height: 100%;
 
     &:first-child {
@@ -116,7 +115,7 @@
   font-size: 12px;
   height: $input-xxs;
   line-height: $input-line-height-xxs;
-  padding: 0 3px;
+  padding: 0 5px;
 }
 
 // .btn-icon
@@ -486,57 +485,37 @@
  }
 
 .btn-radio {
-  background: $white;
   border: $input-border solid transparent;
   border-radius: $input-border-radius;
   box-shadow: none;
   cursor: pointer;
-  display: inline-block;
   font-size: 16px;
   height: 72px;
   text-align: center;
   text-decoration: none;
   transition: none;
   user-select: none;
   white-space: nowrap;
-  width: 90px;
 
-  &:active,
-  &.active {
+  &:hover:not([disabled]) {
+    border-color: $gray-lighter;
+  }
+
+  &:active:not([disabled]),
+  &.active.active {
+    background: lighten($purple-lightest,6%);
+    border-color: $purple-light;
+    box-shadow: inset 0 0 0 1px $purple-light;
     color: $purple-light;
-    cursor: default;
   }
 
   &.active {
-    font-weight: $weight-bold;
+    cursor: default;
   }
 
   &:focus {
     outline: 0;
   }
-
-  &.btn-lg {
-    height: 108px;
-    width: 120px;
-
-    .img,
-    .iconnables {
-      margin-bottom: 6px;
-      width: 36px;
-    }
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  .img,
-  .iconnables {
-    display: block;
-    height: 33px;
-    margin: 0 auto;
-    width: 18px;
-  }
 }
 
 // add button
@@ -550,14 +529,10 @@
   transition: none;
 
   &.btn-sm {
-    right: 15px;
-    top: 15px;
     width: $input-sm;
   }
 
   &.btn-xs {
-    right: 6px;
-    top: 6px;
     width: $input-xs;
   }
 

client/assets/styles/scss/components/cards.scss

@@ -1,5 +1,5 @@
 .card {
-  border: 2px solid transparent;
+  border: $input-border solid transparent;
   border-radius: $input-border-radius-lg;
   display: flex;
   flex-direction: column;
@@ -148,8 +148,8 @@
     }
 
     &:not([disabled]):hover {
-      border-color: darken($gray-lighter,6%);
-      box-shadow: inset 0 1px 0 darken($gray-lighter,6%);
+      border-color: $gray-light;
+      box-shadow: inset 0 0 0 $gray-light;
 
       &:first-child {
         box-shadow: none;
@@ -159,18 +159,14 @@
     &:not([disabled]):active {
       background: lighten($purple-lightest,6%);
       border-color: $purple-light;
-      box-shadow: inset 0 1px 0 $purple-light;
+      box-shadow: inset 0 0 0 $purple-light;
 
       &:first-child {
         box-shadow: none;
       }
 
-      > .small {
-        color: lighten($purple-light,18%);
-      }
-
       .icons-arrow-down {
-        color: lighten($purple-light,37%);
+        color: lighten($purple-light,18%);
       }
 
       .btn-xxs {
@@ -210,9 +206,9 @@
 
     // description of tool
     > .small {
-      color: $gray;
       display: block;
       line-height: 15px;
+      opacity: .6;
     }
 
     // notifications

client/assets/styles/scss/components/lists.scss

@@ -81,6 +81,7 @@
 
   &:active:not(.disabled) .btn-add {
     @extend %green;
+    color: $white;
 
     .iconnables {
       color: $white;
@@ -121,8 +122,8 @@
     }
 
     .small {
-      color: $gray;
       display: block;
+      opacity: .6;
     }
 
     .input-checkbox {
@@ -150,11 +151,6 @@
     opacity: 0;
     position: absolute;
   }
-
-  // add button
-  .btn-add {
-    position: absolute;
-  }
 }
 
 // links